Zawartość
- 01. Dopasuj obrazy do schematów kolorów witryny
- 02. Równomiernie podziel miejsce w ostatnim rzędzie siatki
- 03. Twórz animacje cząstek za pomocą box-shadow
- 04. Animuj wielościany za pomocą transformacji
- 05. Master ’calc ()’ do pozycjonowania
- 06. Uczyń model pudełkowy rozsądnym dzięki „wielkości pudełka”
- 07. Wyśrodkuj w pionie za pomocą CSS
- 08. Skieruj na bank powiązanych obiektów
- 09. Kontrola dzielenia wyrazów
- 10. Skorzystaj z trybów pisania
- 11. Używaj gradientów w nietypowy sposób
- 12. Użyj dopasowywania ciągów w linkach
- 13. Spraw, aby FOUT działał dla Ciebie
- 14. Przeglądaj SVG w tle
- 15. Skup się na użytkownikach z przejściami 3D
- 16. Twórz okrągłe menu z CSS i matematyką
- 17. Animuj linki po najechaniu kursorem
- 18. Twórz proste animacje klatek kluczowych
- 19. Twórz pływające efekty 3D z cieniami
- 20. Zaktualizuj elementy strony za pomocą „: target”
- 21. Przekazuj informacje zwrotne za pomocą subtelnych animacji
- 22. Przygotuj się na „wolę ożywienia”
- 23. Pola wprowadzania humanizowania
- 24. Wstrzymaj i odtwarzaj animacje CSS
- 25. Nie używaj zmiennych CSS
W pewnym momencie przy dowolnej technologii można odnieść wrażenie, że prawie wszystko, co można zrobić, zostało zrobione. Kiedy coś nie jest już tak nowe i błyszczące, zainteresowanie zanika i zwraca się uwagę na następną wielką rzecz. Tak było często w branży internetowej, która jest podatna na straszne podekscytowanie pewnym aspektem technologii, zanim, wcześniej czy później, sprowadzi ją do przyziemności.
Kiedy CSS pojawił się po raz pierwszy, był rewolucyjny iz czasem ewoluował, aby umożliwić projektantom tworzenie elastycznych, precyzyjnie dopracowanych i pięknych układów stron internetowych. Ostatnio jednak pojawiły się sugestie z różnych stron, że CSS jest zmęczony i być może jego czas na słońcu już minął.
Chcę pokazać, że w świecie CSS wciąż jest mnóstwo emocji i życia, niezależnie od tego, czy chodzi o nowatorskie właściwości, których być może jeszcze nie odkryłeś, czy też o wykorzystanie aspektu CSS w sposób, którego wcześniej nie brałeś pod uwagę.
Oto kilka wskazówek od najlepszych ekspertów w branży CSS.
(Uwaga: niektóre techniki w tej funkcji są najnowocześniejsze i mogą nie być w pełni obsługiwane we wszystkich przeglądarkach. Dokładnie przetestuj i upewnij się, że istnieją rozwiązania awaryjne, zanim zaczniesz działać).
01. Dopasuj obrazy do schematów kolorów witryny
Christopher Schmitt, organizator konferencji
Konferencje mają własne schematy kolorów, a przy wielu mówcach proces zarządzania portretami może być skomplikowany. Ręczne stosowanie filtrów nie jest skalowane i polega na tym, że masz dostęp, powiedzmy, do określonej akcji programu Photoshop. Teraz używam plików PNG w wysokiej rozdzielczości w skali szarości i dodam tony za pomocą filtrów CSS. Dzięki temu mogę dopasować dowolny portret do schematu wydarzenia, a także ponownie wykorzystać obrazy w wielu tematach. Potrzebuję tylko nowej reguły CSS dla każdego. Zobacz demo.
02. Równomiernie podziel miejsce w ostatnim rzędzie siatki
Stephen Hay, projektant i autor
Jeśli masz nieznaną liczbę elementów do wyświetlenia w siatce, możesz użyć Flexbox, aby równo podzielić ostatni wiersz. Więc jeśli jest tylko jeden element, zajmie cały wiersz; jeśli są dwa elementy, wiersz zostanie podzielony na pół i tak dalej. Zobacz demo.
03. Twórz animacje cząstek za pomocą box-shadow
Ana Tudor, programistka i pasjonatka matematyki
Mieszając box-shadow dzięki odrobinie matematyki i Sassowi możesz wykreślić krzywe 2D, naśladować ruch 3D i tworzyć szalone animacje cząstek, które każdy pomyli z płótnami! Zobacz demo i jeszcze jedno.
04. Animuj wielościany za pomocą transformacji
Ana Tudor, programistka i pasjonatka matematyki
Prawdopodobnie widzieliście już czyste wielokąty CSS utworzone z obramowaniami, ale mamy znacznie potężniejsze narzędzie w przekształcać własność. Łączenie i stosowanie przekształceń na zagnieżdżonych elementach pozwala nam tworzyć złożone wielokąty z tłem lub obramowaniem obrazu i przezroczystymi wnętrzami. Korzystając z przekształceń 3D, możemy łączyć te kształty 2D w wielościany i łączyć, rozkładać, eksplodować lub rekombinować bryły w sposób, który łatwo pomylić z WebGL. Zobacz demo.
05. Master ’calc ()’ do pozycjonowania
Ana Tudor, programistka i pasjonatka matematyki
kochałem calc () od chwili, gdy to odkryłem. Przydaje się do oswajania marginesów, wypełnienia lub wymiarów i może uratować życie, gdy jest używany do pozycjonowania lub zmiany rozmiaru tła, wewnątrz gradientów lub transformacji i w połączeniu nie tylko z tymi samymi starymi jednostkami, ale także nowymi i fajnymi rzutniami.
06. Uczyń model pudełkowy rozsądnym dzięki „wielkości pudełka”
Sawyer Hollenshead, deweloper i projektant w Oak Studios
Posługiwać się rozmiar pudełka aby zachować zdrowie psychiczne. Bez tego element o zdefiniowanej szerokości 250 pikseli i 25 pikseli wypełnienia łączy się z szerokością 300 pikseli, co utrudnia mieszanie pikseli i procentów. Z rozmiar pudełka:border-box obramowania i wypełnienie są zamiast tego umieszczane w zdefiniowanej szerokości.
07. Wyśrodkuj w pionie za pomocą CSS
Trent Walton, założyciel Paravel
Historycznie ciężko było wyśrodkować coś w pionie za pomocą CSS, na przykład jeśli masz obraz z tekstem, który chcesz wyrównać w pionie. Zamiast tupać i przeklinać, użyj Flexbox, aby poradzić sobie z problemami związanymi z wyrównaniem. Zobacz demo.
08. Skieruj na bank powiązanych obiektów
Jonathan Smiley, partner Zurb i główny projektant
Zmniejsz grubość linii CSS, używając przybliżonych selektorów atrybutów w nazwach klas, aby kierować reklamy na duży bank powiązanych obiektów, zamiast dołączać wspólne atrybuty do każdej pojedynczej klasy. Na przykład ... [class * = "- block-grid-"] {} ... będzie kierować reklamy na: .small-block-grid-3 .large-block-grid-5
09. Kontrola dzielenia wyrazów
Savid Storey, rzecznik otwartej sieci
Dzielenie wyrazów jest czymś oczywistym w druku, a niektórzy programiści używają rozszerzenia Myślniki właściwości online, ale niewielu zdaje sobie sprawę z innych właściwości, które zapewniają lepszą kontrolę. Jeśli nie jesteś ostrożny, otrzymasz drabiny dzielenia wyrazów, w których łączniki są używane w wielu wierszach. Ogólna praktyczna zasada to nie więcej niż dwa z rzędu, którymi można sterować za pomocą dzielenie-limit-wiersze. Również, dzielenie-limit-znaków umożliwia określenie minimalnej długości słowa, które zostanie podzielone, wraz z minimalną liczbą znaków przed i po podziale.
10. Skorzystaj z trybów pisania
David Storey, rzecznik otwartej sieci
Tryby pisania umożliwiają zdefiniowanie kierunku, w którym przepływa tekst. Niektóre teksty wschodnioazjatyckie są pisane pionowo, linie rosnące od prawej do lewej, określone za pomocą tryb-pisania: vertical-rl (tb-rl w IE). Tekst pionowy nie jest tak naprawdę używany w europejskich systemach pisma, ale może być przydatny w nagłówkach tabel, gdy masz ograniczoną przestrzeń w poziomie.
11. Używaj gradientów w nietypowy sposób
Ruth John, projektantka
Gradienty tła mogą wyglądać wspaniale, gdy są używane z obramowaniem i punktorami. Używam zarówno na swoim blogu, jak iz preprocesorem mogę wywołać mixin z ponownie wykorzystanym kodem, aby nie powtarzać go ręcznie. Nie idź za super-szaleństwo, ponieważ gradienty mogą obciążać procesor. Mieszanka SCSS dla punktorów listy:
@mixin gradedBullet ($ color) {background-image: linear-gradient (left, lighten ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color , 15%) 30px, przezroczysty 31px); }
12. Użyj dopasowywania ciągów w linkach
Ruth John, projektantka
Na moim blogu użyłem selektorów atrybutów CSS z dopasowywaniem ciągów, aby nadać styl ikonom społecznościowym. Pojawiają się one na moim blogu, czasem z tekstem, a czasem bez, ale zawsze z ikoną. Aby stylizować odpowiedni link za pomocą odpowiedniej ikony społecznościowej, używam dopasowania ciągu w href atrybut elementu kotwicy. używam *= więc href na elemencie kotwicy musi zawierać tylko określony przeze mnie ciąg.
/ * dla wszystkich linków społecznościowych * / .social a: przed {display: inline-block; padding-right: 30px; font-family: 'FontAwesome';} / * Każdy konkretny link * / .social a [href * = "twitter"]: before {content: " f099"; color: # 52ae9f;} .social a [href * = "github"]: before {content: " f09b"; color: # 5f2e44;} .social a [href * = "feed"]: before {content: " f09e"; kolor: # b47742;}
13. Spraw, aby FOUT działał dla Ciebie
Jason Pamental, dyrektor działu projektowania H + W
Sieć jest zbudowana w oparciu o założenie, że powinna dostarczać treści, nawet jeśli przeglądarka nie może wyrenderować blinga. Powolne ładowanie czcionek internetowych może być frustrujące, FOUT (Flash Of Unstyled Text) przeszkadza podczas nawigacji, a tekst przepływa podczas pobierania czcionek. Google i Typekit dostarczają odpowiedzi: program ładujący czcionki internetowe. Umieszczając na stronie klasy na podstawie stanu wczytywania czcionek, możesz określić styl awaryjny za pomocą tych klas, aby ograniczyć przepływ do minimum, a także wyeliminować syndrom „niewidocznej treści” WebKit. Zobacz demo.
14. Przeglądaj SVG w tle
Emil Björklund, programista internetowy inUse
Jedynymi przeglądarkami bez obsługi SVG są IE8 i starsze oraz Android 2 WebKit, więc użycie SVG dla tła w CSS jest możliwe, szczególnie w połączeniu z rozwiązaniem awaryjnym PNG, takim jak Grunticon. SVG może być stylizowany przez CSS i istnieje interesujące przenikanie właściwości CSS (filtrów!) Z SVG, którymi możemy się bawić w przypadku zastosowania do HTML.
15. Skup się na użytkownikach z przejściami 3D
Emil Björklund, programista internetowy inUse
Korzystanie z przekształceń 3D i wykorzystanie formatu wymiar z w interfejsach użytkownika może być naprawdę przydatne, zwłaszcza do ukrywania / pokazywania lub zwijania / rozwijania treści. W takich sytuacjach dość łatwo jest też cofnąć się do przejścia 2D lub w ogóle go nie mieć. Jest to obszar, w którym niewielkie stopniowe ulepszanie może zdziałać wiele.
16. Twórz okrągłe menu z CSS i matematyką
Sara Soueidan, programistka frontendu
Okrągłe menu są popularne w aplikacjach mobilnych, a za pomocą przekształceń i przejść CSS można utworzyć proste okrągłe menu. To menu można modyfikować i dostosowywać, aby utworzyć również menu otwierane w górę lub w dół. W CSS nie ma bezpośredniego sposobu na przetłumaczenie elementu po przekątnej, ale możesz użyć wartości promienia okręgu, na którym chcesz umieścić elementy, i zastosować prostą regułę matematyczną, aby obliczyć poziome i pionowe wartości translacji, które zostaną przekazane do translateX () i translateY () Funkcje. W ten sposób otrzymasz plik przekątna tłumaczenie, aby przenieść elementy menu na właściwe pozycje w okręgu. Zdarzenie kliknięcia, które zamyka / otwiera menu, można obsłużyć za pomocą JavaScript lub możesz pójść o krok dalej i mieć menu tylko dla CSS, używając hackowania CSS. W moim demo używam JavaScript i interfejsu API classList HTML5, który nie jest obsługiwany we wszystkich przeglądarkach, więc musisz wyświetlić demo w nowoczesnej przeglądarce, aby działało, lub odkomentować kod jQuery zamiast korzystać z interfejsu API classList kod.
Zobacz demo i pełny samouczek. Przykład hackowania CSS Checkbox.
17. Animuj linki po najechaniu kursorem
Paul Lloyd, projektant interakcji The Guardian
Nie należy polegać na stanach najechania, aby wykonać działanie lub dostarczyć ważnych informacji, ale nadal można ulepszyć interfejsy dla użytkowników korzystających z myszy. Na 24ways.org ujawniamy tytuły artykułów, gdy najedziesz kursorem na linki w poprzedniej / następnej nawigacji. Osiągnięto to, tworząc plik ::po pseudoelement zawierający wygenerowaną zawartość pochodzącą z wartości a dane- atrybut, z zastosowanym przejściem CSS, aby był widoczny po najechaniu kursorem. Zobacz demo.
18. Twórz proste animacje klatek kluczowych
Paul Lloyd, projektant interakcji The Guardian
Na 24ways.org dodaliśmy animowane klapki narożne do podsumowań, które otwierały się po najechaniu kursorem. Dokonano tego poprzez połączenie @keyframes reguły z właściwością animation, zmieniając położenie obrazu tła w celu uzyskania animacji opartej na sprite'ach. Sztuczka polega na tym, aby zadeklarować liczbę klatek w swoim duszku animacji za pomocą rozszerzenia kroki() wartość. Zobacz demo.
19. Twórz pływające efekty 3D z cieniami
Catherine Farman, programistka Happy Cog
Ostatni projekt wymagał unoszącego się zdjęcia produktu z okrągłym cieniem pod spodem, tworząc efekt 3D wyskakiwania z ekranu. Shadow korzysta z kilku funkcji CSS3: border-radius przezroczystość alfa i box-shadow. Sprawdza się dobrze w przypadku siatek produktów, prezentacji zdjęć bohatera na stronie głównej lub dowolnego dziwacznego projektu z wygięciem skeuomorficznym. Zobacz demo.
20. Zaktualizuj elementy strony za pomocą „: target”
Simon Madine, starszy programista internetowy HeRe
CSS nie jest językiem programowania w zwykłym tego słowa znaczeniu, ale nadal możesz robić sprytne rzeczy bez wracania do JavaScript. Na przykład :cel pseudoklasa jest stosowana do elementów będących celem klikniętego linku.
Możesz użyć tego do zdefiniowania stanu strony, wskazania na rodzica zawierającego wiele elementów, a twoje linki staną się środkiem do kontrolowania wyglądu i układu wszystkich dzieci za pomocą jednego kliknięcia. Zobacz demo.
21. Przekazuj informacje zwrotne za pomocą subtelnych animacji
Neil Renicker, projektant i programista
Pseudoelementy CSS ::przed i ::po wraz z przejściami CSS umożliwia tworzenie wspaniałych animacji, które zapewniają subtelne informacje zwrotne użytkownikom myszy. Na przykład, zbuduj strzałkę CSS wewnątrz pseudoelementu, zastosuj przejście do pseudoelementu (przejście: wszystkie odprężenie-wyjście .15s;), a następnie dodaj prostą zmianę układu do pliku :unosić się pseudoklasa (np margin-top). Zobacz demo.
22. Przygotuj się na „wolę ożywienia”
Paul Lewis, programista i członek zespołu ds. Relacji z programistami Chrome
Jeśli użyłeś -webkit-transform: translateZ (0) aby magicznie przyspieszyć strony, hack, który w wielu przeglądarkach po prostu tworzy nową warstwę kompozytora, jest zastępowany przez będzie ożywiony. Wkrótce będziesz mógł powiedzieć przeglądarce, co planujesz zmienić w elemencie (jego położenie, rozmiar, zawartość lub pozycja przewijania), a przeglądarka zastosuje odpowiednią optymalizację pod maską. Więcej informacji.
23. Pola wprowadzania humanizowania
Yaron Schoen, założyciel Made For Humans
Dodanie szybkich animacji do elementów, z którymi użytkownicy wchodzą w interakcję, sprawia, że interfejs wydaje się mniej komputerowy. W przypadku pól wejściowych spróbuj umieścić plik wezwanie do przejścia wewnątrz, więc za każdym razem, gdy się na nim skupisz lub rozmyjesz, następuje płynne przejście.
wejście, obszar tekstu {-moz-przejście: wszystkie 0,2 sekundy luz; -o-przejście: wszystkie wygaszenia 0,2 s; -webkit-przejście: wszystkie 0,2 s wygasają; -ms-przejście: wszystkie wygaszenia 0,2 s; przejście: całe opóźnienie 0,2 s;
24. Wstrzymaj i odtwarzaj animacje CSS
Val Head, projektant i konsultant
Możesz „wstrzymać” i „odtworzyć” animację CSS, zmieniając jej stan odtwarzania animacji własność. Ustawienie tej opcji na „wstrzymane” zatrzymuje animację w miejscu, dopóki nie zmienisz stan odtwarzania animacji do bieganie, na przykład po najechaniu kursorem.
.animating_thing {animacja: spin 10s liniowa nieskończoność; stan odtwarzania animacji: wstrzymana; }. animating_thing: hover {stan-odtwarzania-animacji: uruchomiona; }
25. Nie używaj zmiennych CSS
Dave Shea, projektant i autor
W końcu otrzymujemy zmienne CSS, na przykład, aby raz zapisać wartość szesnastkową koloru i odwołać się do niej za pomocą arkusza stylów. Ale oficjalna specyfikacja jest szczegółowa, zwiększa złożoność składni, oferuje niezadowalającą funkcjonalność i jest w dużej mierze niewspierana przez większość przeglądarek. W erze, w której Sass jest bardzo popularny i wykracza poza zmienne z potężną logiką programowania, taką jak funkcje niestandardowe i instrukcje if / else, oficjalna specyfikacja jest znacznie krótsza.
Mamy nadzieję, że te najważniejsze wskazówki odnowiły Twój pogląd na CSS i możliwości, jakie on reprezentuje w tworzeniu i projektowaniu stron internetowych. Nie zapomnij dokładnie przetestować żadnej z tych technik, aby sprawdzić obsługę przeglądarki, zanim uruchomisz jakąkolwiek pracę.
Słowa: Craig Grannell Ilustracja: Mike Chipperfield
Ten artykuł ukazał się pierwotnie w numerze 253 magazynu sieciowego.
