50+ Niesamowite techniki CSS3 dla lepszych projektów
CSS3 nabiera tempa, mimo że standard nie został jeszcze sfinalizowany.
Istnieją setki samouczków, które uczą projektantów, jak z niego korzystać, ale niestety wiele z nich dotyczy tego samego podłoża.
Niektóre z tutoriali uczą projektantów robić rzeczy, które mogą nie uważać za użyteczne, choć techniki te można zazwyczaj dostosować do projektu idealnie.
Poniżej znajduje się ponad pięćdziesiąt niesamowitych samouczków CSS3. Wiele z nich opiera się wyłącznie na CSS i HTML, podczas gdy inne zawierają również JavaScript.
Jeśli masz ulubioną technikę lub samouczek, których nie ma poniżej, podziel się nimi w komentarzach!
Korzystanie z CSS3 For Imageless Illustration
Różne nowe metody w CSS3 umożliwiają tworzenie bardzo złożonej grafiki przy użyciu czystego CSS i bez obrazów. Oto garść najlepszych przykładów.
Czysta ilustracja CSS na iPhone
Połączenie granic, transformacji i gradientów, aby stworzyć animowany obraz iPhone'a.
Tworzenie logo przeglądarki Opera w CSS3
Czysta ilustracja logo Opery renderowana przy użyciu technik CSS3.
Nasz Układ Słoneczny z CSS3
Sprytnie wyglądające wykonanie układu słonecznego z efektami animacji.
Analogowy efekt zegara
Stwórz fajny zegar analogowy, używając tylko CSS3 i jquery.
Eksperymenty cienia
W tym samouczku pokazano, jak korzystać z cieni CSS, aby stworzyć różnorodne efekty, w tym grafikę Ciemnej Strony Księżyca, zaćmiony okresowy stół, a nawet psychodeliczną "miksturę miłości".
Tworzenie obrazów stylu polaroidów za pomocą tylko CSS
W tym samouczku zastosowano efekty CSS2 i CSS3, aby dodać styl Polaroid do prostej listy obrazów.
CSS3 Tekst, układ i efekty kolorów
CSS3 może być używany do wielu różnych fantazyjnych animacji i grafiki, ale jest także świetny do układu, tekstu i efektów kolorystycznych, do których wcześniej używałeś programu Photoshop.
Używanie kolumn CSS3
Kodowanie czystego wielokolumnowego modułu CSS3.
Ogólna implementacja CSS3
Przegląd zalet CSS3.
Stylizacja Łącza z CSS3
Cztery różne sposoby stylizowania różnych typów łączy za pomocą CSS3
CSS3 Vertical Accordion
Gradienty i przejścia sprawiają, że menu akordeonu pogarsza się do uporządkowanej listy w starszych przeglądarkach.
Super niesamowite przyciski CSS3
Kolorowe, gradientowe przyciski z cieniem, które działają na jasnym lub ciemnym tle i nie wymagają zdjęć!
Przyciski stylu Photoshopa z CSS3
Równoległe porównanie sposobów tworzenia przycisków CSS3 bez obrazów i Photoshopa.
Css Gradient Text Effect
Instrukcje dotyczące tworzenia unikalnego efektu tekstowego poprzez zastosowanie mapy tekstur do tekstu. Możesz używać gradientów lub wzorów, aby naprawdę pop tekstu.
Niektóre alternatywy CSS3 do efektów JavaScript
7 sposobów na zastąpienie powszechnie używanych efektów JavaScript w CSS3, aby strona była gotowa na przyszłość.
Tłoczony efekt tekstowy CSS3
Tworzenie wytłoczonego efektu tekstowego bez hackowania przeglądarki Photoshop.
Zrozumienie wartości kolorów CSS3
Wszystko o nowych opcjach kolorów dostępnych w CSS3.
Tworzenie bogatych efektów za pomocą CSS3
CSS Transitions and Transforms można łączyć w celu uzyskania różnych efektów.
Tworzenie efektu Bokeh CSS3
Możliwość korzystania z gradientów i przejrzystości za pomocą CSS3 umożliwia ten klasyczny efekt.
Kolumny CSS3
Dobry film instruktażowy dotyczący koncepcji używania kolumn CSS3 do układu.
Fancy Lists z CSS3
Fajny styl listy wypunktowanej za pomocą CSS3 do tworzenia fantazyjnych znaczników.
Bardzo śliskie bezosobowe infoboksy z CSS3
Techniki stworzone przez CSS3 sprawiają, że te pudełka naprawdę się pop.
Dymki
Pseudoelementy z promieniem rastra i przekształcenie umożliwiają te kształty.
Efekty przejścia obrazu w stylu Flash
Sprytny sposób na wykorzystanie efektu animacji CSS.
Odtwarzanie ekranu aktualizacji Tumblra za pomocą CSS3
Efekt projektu CSS3, który pogarsza się dobrze w starszych przeglądarkach.
Subtelna typografia CSS3, którą przysięgałeś, została wykonana w Photoshopie
Ten 13-minutowy samouczek wideo pokaże Ci, jak stworzyć piękny, subtelny efekt typograficzny 3D w całości za pomocą CSS3.
Obracanie tekstu za pomocą CSS
Oto nieco starsza technika, która pokazuje, w jaki sposób obrócić tekst zgodny z przeglądarkami, aby dopasować go do osi pionowej.
Stwórz efekt typografii dzięki CSS Text-Shadow
Ten samouczek Line25 pokaże Ci, jak używać cieni tekstowych, aby stworzyć efekt typografii w tekście Twojej witryny.
Wspaniała galeria Lightbox CSS3 z jQuery
Ten kod tworzy galerię obrazów w stylu Polaroid z opcją przeciągania i upuszczania.
Wspaniałe nakładki
W tym samouczku z Zurb pokazano sposób tworzenia nakładek obrazu z wykorzystaniem właściwości obramowania CSS3, które można następnie wykorzystać do wyświetlania dodatkowych informacji o obrazie, gdy są na nim ułożone.
Niesamowite etykiety formularzy inline
Ten samouczek pokazuje, jak tworzyć etykiety formularzy w wierszu, które nie znikają, gdy użytkownicy zaczną pisać.
Efekty 3D CSS3
Animowana kostka CSS3
Unikalny animowany trójwymiarowy sześcian z transformacjami 3D stylizowanymi na CSS. Kostkę można obracać za pomocą klawiszy strzałek, aby wyświetlić informacje wyświetlane na każdej twarzy.
Taśmy 3D CSS3
Daj głębię swojemu projektowi, korzystając z łatwych taśm CSS3 CD.
Animowany 3D Poster Scroller
Wyświetlanie plakatów filmowych z napisami przy użyciu zdumiewającego efektu perspektywy 3D w CSS3.
3D CSS3 Coke Can
Przeciąganie paska przewijania sprawia, że ta wirtualna Coke może obracać się w przód iw tył.
CSS Shadows
Twórcze stylizowanie cieni poprzez oderwanie ich od elementu.
Animacja CSS3
Animowana wersja Twittera Fail Whale z CSS3
Bardzo elegancki użytkownik CSS3, który zaskakująco pogarsza się nieco w starszych przeglądarkach.
Tło Starfield Parallax
Gwiazdy poruszają się od lewej do prawej za Twoimi treściami dzięki temu klasycznemu wyglądowi podróży kosmicznych.
Wyświetlanie i ukrywanie zawartości za pomocą CSS3
Rozwijanie i kontraktowanie tacek i drzewek menu bez javascript.
Pływająca karta Follow with CSS3
Ustawiaj swoje ikony nawigacyjne lub kontaktowe w łatwy sposób dzięki tej przydatnej metodzie.
CSS3 Modell Windows
Kilka popularnych okien modalnych wygenerowanych za pomocą efektów CSS3 i transformacji.
Obrotnice używające tylko CSS3
Tworzenie animacji ładowania za pomocą tylko CSS3 i bez animowanych gifów!
Wyświetlanie ikon społecznościowych za pomocą CSS3
Ciekawy efekt zanikania obrazów społecznościowych za pomocą czystego CSS3.
Animacja rysunkowa CSS3
Tworzenie całej animacji w stylu flash przy użyciu tylko CSS3 i jquery.
Animowany krajobraz za pomocą CSS3
Góry i chmury oraz woda animowane za pomocą CSS3.
Ładne animowane napisy przewijane
CSS3 Transitions pozwala robić niesamowite rzeczy z podpisami tekstowymi. Oto jeden przykład.
Elastyczne menu miniatur
Seria obrazów, które rozszerzają się i chowają, gdy zawisną.
Ułożone, dynamiczne karty indeksowe
Fantastyczny efekt animacji, który można zastosować do wielu projektów.
Kolorowy zegar z CSS i jQuery
W tym samouczku pokazano, jak stworzyć naprawdę niesamowity kolorowy zegar przy użyciu CSS i jQuery, składających się z trzech oddzielnych kółek w stylu ładowania, które pokazują godziny, minuty i sekundy.
Pure CSS3 At-At Walker
To imponujący przykład, który wykorzystuje CSS3 (bez JavaScriptu, bez Flasha) do stworzenia animowanego At-At Walkera z Gwiezdnych wojen. Jedynym minusem jest to, że obecnie jest on dostępny tylko w przeglądarkach Webkit (Safari i Chrome).
Utwórz suwak zawartości jQuery przy użyciu czystego CSS
Naucz się tworzyć suwak w stylu czystego CSS jQuery w tym samouczku.
Menu rozwijane CSS3
Ten samouczek z WebDesignerWall pokazuje, jak utworzyć menu rozwijane CSS3 kompatybilne z przeglądarką, które działa również w przeglądarkach, które nie obsługują CSS3 (choć z ograniczoną stylizacją).
Napisany wyłącznie dla WDD przez Cameron Chapman .
Jeśli znasz inne wysokiej jakości samouczki CSS3, które nie zostały omówione powyżej i chcesz się nimi podzielić, zrób to w komentarzach!