Bez wątpienia jeden z najjaśniejszych trendy 2012 trwa rozwój CCS3, HTML5. Dziś oferujemy duży i bardzo przydatny przegląd przykładów ” 20+: kreatywne i przydatne lekcje CSS3″ oferowane na SpeckyBoy. Wszystkie przykłady są wykonane na czysty bez JavaScript, prezentowane lekcje zawierają demonstracje i gotowe pliki CSS3 do pobrania.

Jesteśmy pewni, że te techniki przydadzą się twórcom stron internetowych!

lekcje css3 :

1. Galerie zdjęć CSS3, suwaki, efekty z obrazami

1.1.Suwak w CSS3

Nie mogę w to uwierzyć, ale ten suwak z różnymi efektami jest wykonany wyłącznie w CSS3, robi wrażenie.

1.2. Tło dla witryny pełnoekranowej z efektem suwaka przy użyciu CSS3

Projektanci stron internetowych od dawna eksperymentowali z różnymi tłami witryny, ale do tej pory niewiele można było zrobić za pomocą czystego CSS, trzeba było używać JS. Teraz CSS3 daje Ci możliwość zrobienia z tłem swojej witryny, jak chcesz - możesz mieć jedno tło z dużą fotografią wysokiej jakości, możesz zmieniać kilka teł z różnymi efektami i ze skalowalnością tła w zależności od parametry ekranu. Ogólnie rzecz biorąc, niesamowita szansa dla kreatywnych witryn.

1.3. Lightbox w CSS3

Dzięki temu samouczkowi dowiesz się, jak utworzyć Lightbox z różnymi efektami przy użyciu czystego CSS.

1.4. Właściwości obrazu w CSS3

W tym samouczku zaprezentowano nowe funkcje CSS3 dotyczące właściwości obrazu, takie jak zaokrąglone rogi, cienie i inne efekty.

1,5. Animowany baner przy użyciu CSS3

1.6. Ładowanie panelu w CSS3

1.7. Wstążka 3D z CSS3

Obejrzyj wersję demonstracyjną lub pobierz pliki kodu CSS3 →

2. Menu CSS3, nawigacja i przyciski

2.1. Menu Apple.com w CSS3

Poradnik tworzenia słynnego menu Apple.com w CSS3.

2.2. Animowane menu poziome w CSS3

Prosty tutorial pokazujący jak zrobić animowane menu w CSS3 z różnymi efektami.

2.3. Animowane menu pionowe z CSS3

2.4. Animowane przyciski z CSS3

Świetny samouczek z 7 przykładami animowanych kreatywnych przycisków.

2.5. Kreatywne animowane menu z obrazami przy użyciu CSS3

W tej lekcji 10 przykładów przedstawionych po prostu otwiera oczy. Takie złożone kreatywne menu były kiedyś tworzone wyłącznie przy użyciu JS. Imponujący!

2.6. Efekt nawigacji po okręgu z CSS3

Niezwykły efekt po najechaniu myszką na wybrany element nawigacyjny w postaci okręgu z obrazkiem. Uwaga!

2.7. Menu rozwijane w CSS3

Poradnik implementacji prostego menu rozwijanego z podpoziomami w CSS3.

2.8. Nawigacja CSS3 z animowanymi przejściami

3. Różne efekty w CSS3

3.1. Animowana podpowiedź w CSS3 bez jQuery

Dzięki rozwojowi technologii internetowych i nowoczesnych przeglądarek wiele efektów możemy stworzyć bez użycia JavaScript. To znacznie ułatwiło życie twórcom stron internetowych. Ponieważ teraz możemy tworzyć efekty przy użyciu czystego CSS bez użycia JavaScript. Dlatego w tym artykule chcę opowiedzieć Ci o tym, czy można tworzyć banery przy użyciu czystego CSS, czego to wymaga, a także o zaletach i wadach takiego podejścia.

CSS3 daje mnóstwo możliwości, wystarczy je tylko umiejętnie wykorzystać. Jako przykład chciałbym podać linki do moich wcześniejszych prac „Postacie w czystym CSS”:

Najpierw chcę podać przykłady moich banerów CSS. Być może widziałeś je już na stronie, ale nawet nie wiedziałeś, co i jak powstały.

Informacje o wersji demonstracyjnej: Każdy przykład (baner) ma na dole czas trwania w sekundach oraz przycisk „Odśwież”, który rozpoczyna wyświetlanie banera od początku.

Baner nr 1 — „Indywidualne szkolenie z budowy stron internetowych”:

Tworzyłem ten baner przez około 2 dni. Dlaczego tak długo? Ponieważ dostosowanie banera (aby był gumowy) zajęło trochę czasu podczas ponownego obliczania współrzędnych. Obecnie jego rozmiar zależy od szerokości bloku nadrzędnego (który zawiera sam baner CSS).

Ten baner stworzyłem dosłownie w 2-2,5 godziny. Jedyną rzeczą, która spowolniła tutaj proces tworzenia, był wybór ikon. Bo trzeba było je dobrać blisko tematyki banera.

Baner ten rozciąga się również w zależności od szerokości pojemnika blokowego, w którym się znajduje. Tworzenie zajęło około 1,5 godziny.

Te banery wyglądają bardzo ładnie, ale czy to naprawdę takie proste? Przyjrzyjmy się zaletom i wadom tej metody tworzenia banerów.

Zalety i wady banerów CSS:

Jak stworzyć baner CSS?

1 Pomysł

Na początek musisz dokładnie wiedzieć jaką animację powinien posiadać baner (co, gdzie i skąd ma się poruszać oraz gdzie powinien się pojawiać). Możesz wziąć kartkę A4 i narysować, gdzie będzie przesuwał się każdy element i co powinno znaleźć się na banerze.

Nie możesz bowiem zaczynać tworzenia banera, jeśli nie wiesz, jaki powinien być i jak funkcjonować.

2 Struktura HTML

Następnym krokiem jest utworzenie znaczników HTML, dzięki którym elementy będą mogły być przesuwane (i dla nich animowane). Oznacza to, że nie da się zrobić wszystkiego jednym obrazem, który przesunie się w prawo lub w lewo i wtedy animacja się zakończy.

Zazwyczaj istnieje jeden wspólny blok, w którym znajdują się wszystkie pozostałe. I w tym ogólnym bloku możemy zarządzać elementami według potrzeb.

3 Animacja CSS

Ostatnim krokiem jest utworzenie animacji dla bloków, a także napisanie dla nich stylów, ponieważ niektóre fragmenty animacji są domyślnie ukryte.

Aby stworzyć własny baner, musisz dobrze znać podstawy CSS i HTML.

Naucz się podstawowych animacji CSS dzięki temu samouczkowi - .

Wniosek

Wszystkie współczesne przeglądarki obsługują właściwości CSS3, co oznacza, że ​​banery będą w nich poprawnie wyświetlane. Ale za pomocą wtyczek JS możesz tworzyć banery CSS dla starszych przeglądarek. Ucząc się podstaw animacji CSS, zrozumiesz proces tworzenia banera i wkrótce będziesz tworzyć swój pierwszy baner w czystym CSS! 😉

Zróbmy baner reklamowy za pomocą CSS3. Obecnie w pełni obsługuje tylko animacje CSS3 Przeglądarki Firefox i WebKita. Ale łatwo jest sprawić, by baner działał w innych przeglądarkach. Jednak nie oczekuj świetnej wydajności wszędzie (zwłaszcza w IE 7 i starszych), gdy eksperymentujesz z najnowszymi technikami CSS.

Notatka: Aby zaoszczędzić miejsce na stronie, pominięto wszystkie prefiksy producentów przeglądarek. Zobacz kod w źródłach.

znaczniki HTML

Na początek przyjrzyjmy się strukturze banera w formacie HTML. Na tym etapie musimy sobie wyobrazić, jak będzie działać animacja:

Aby lepiej zrozumieć strukturę znaczników, skupmy się na łodzi:

Z łodzią występują trzy animacje:

Łódź ślizga się po lewej stronie. Dotyczy listy nieuporządkowanej (grupy).

Imitacja łódki kołyszącej się na wodzie. Dotyczy elementu listy (łódź).

Pojawienie się znaku zapytania. Dotyczy elementu div (znak zapytania).

Jeśli spojrzysz na stronę demonstracyjną, zobaczysz, że animacja elementu listy (łódź) wpływa również na znajdujący się w nim element div (znak zapytania). Animacja „wysuwania” listy nieuporządkowanej działa także na elemencie listy (łódź i znak zapytania).

Dlatego możemy stwierdzić, że elementy podrzędne oprócz własnych działań otrzymują animacje swoich rodziców. Teraz pozostaje tylko wypisać struktury nadrzędne/podrzędne.

CSS

Zanim zaczniesz analizować tworzenie animacji, musisz się upewnić kompatybilny wstecz ze starszymi przeglądarkami.

Kompatybilność wsteczna

Zapewnimy kompatybilność wsteczną, po prostu stylizując znaczniki tak, jakby animacje CSS w ogóle nie istniały. Jeśli ktoś przegląda stronę w starej przeglądarce, zobaczy zwykły statyczny obraz, a nie puste białe znaki.

Na przykład: co się stanie, jeśli użyjesz CSS? podobnie jak poniżej, wystąpią problemy:

/* ZŁO! */ @keyframe nasza-zanikająca-animacja ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 0; /* Ten div jest domyślnie ukryty - oops! */ animacja: nasza zanikająca animacja 1s 1 )

Jeżeli przeglądarka nie obsługuje animacji, element div pozostanie niewidoczny dla użytkownika.

A tak zapewnimy wsteczną kompatybilność ze starszymi przeglądarkami:

/* PRAWDA */ @keyframe nasza-zanikająca-animacja ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 1; /* Ten div jest widoczny domyślnie */ animacja: nasza zanikająca animacja 1s 1 )

Teraz element div będzie wyświetlany, nawet jeśli animacja się nie uruchomi. i w nowoczesne przeglądarki Element div zostanie ukryty jako pierwszy podczas animacji.

Osnowa

Teraz wiemy, jak zapewnić kompatybilność wsteczną (co pomoże uniknąć problemów podczas pracy z prawdziwymi projektami). Czas stworzyć bazę naszego kodu CSS.

Musisz pamiętać o 3 punktach:

Ponieważ baner będzie używany w różnych witrynach, zrobimy co w naszej mocy Selektory CSS specjalny. Wszystkie zaczną się od identyfikatora #ad-1. W ten sposób postaramy się uniknąć nakładania się naszego kodu i kodu witryny.

Celowo ignorujemy opóźnienie animacji w instalacjach. Jeśli zastosujesz opóźnienie animacji przy ustawianiu stylów z domyślną widocznością elementów, struktura banera zostanie zakłócona przez nagłe zniknięcie lub pojawienie się części obrazu po zakończeniu animacji. Opóźnienie animacji jest symulowane poprzez czas trwania i ustawienie klatek.

Kiedy tylko to możliwe Jedną animację wykorzystujemy dla kilku elementów. W ten sposób oszczędzamy czas i zmniejszamy rozmiar kodu.

Stwórzmy więc podstawę dla naszego banera. Ustalmy dla niego względne pozycjonowanie, aby elementy wewnętrzne mogły zostać prawidłowo umieszczone. Ukryje także wszystko poza zakresem elementu:

#ad-1 ( szerokość: 720 pikseli; wysokość: 300 pikseli; float: lewy; margines: 40 pikseli auto 0; obraz tła: url(../images/ad-1/background.png); pozycja tła: środek; tło -powtórz: brak powtórzeń; przepełnienie: ukryte; względny cień ramki: 0px 0px 6px #000;

Następnie ustalamy style dla pól tekstowych i wejściowych. Wywołaj odpowiednie animacje. Musisz także upewnić się, że zawartość ma najwyższy indeks Z dla ruchomych części, aby nie nakładały się na siebie:

#ad-1 #content ( szerokość: 325 pikseli; float: prawy; margines: 40 pikseli; wyrównanie tekstu: środek; indeks Z: 4; pozycja: względna; przepełnienie: widoczne; ) #ad-1 h2 ( rodzina czcionek: „Alfa Slab One”, kursywa; kolor: #137dd5; wysokość linii: 50px; cień tekstu: 0px 0px 4px #fff; animacja: animacja opóźnionego zanikania 7s 1 łatwość wejścia; opóźnienie */ ) #ad-1 h3 (rodzina czcionek: „Boogaloo”, kursywa; kolor: #202224; rozmiar czcionki: 31px; wysokość linii: 31px; cień tekstowy: 0px 0px 4px #fff; animacja: opóźniona -fade-animation 10s 1 łatwość wejścia; /* Wygląd h3 z symulowanym opóźnieniem */ ) #ad-1 formularz ( margines: 30px 0 0 6px; pozycja: względna; animacja: forma-animacja 12s 1 łatwość wejścia -out; /* Wysunięcie formularza do wpisania adresu e-mail z symulowanym opóźnieniem */ ) #ad-1 #email ( szerokość: 158px; wysokość: 48px; float: left; padding: 0 20px; rozmiar czcionki: 16px; rodzina czcionek: „Lucida Grande”, bezszeryfowy cień tekstu: 1px 1px 0px #a2917d;

obramowanie: 1px solidna #a2917d;

#ad-1 ul#water( /* Jeśli potrzebujesz innej animacji wody, możesz ją dodać tutaj */ ) #ad-1 li#water-back ( szerokość: 1200 pikseli; wysokość: 84 pikseli; obraz tła: url( .. /images/ad-1/water-back.png); powtórzenie tła: indeks Z: 1; pozycja: absolutna; po lewej: -20px animacja: animacja powrotu wody 3s; * Imitacja rozpryskujących się fal */ ) #ad-1 li#water-front ( szerokość: 1200px; wysokość: 158px; obraz tła: url(../images/ad-1/water-front .png); tło- powtórz: indeks Z: 3; dół: -70px; animacja: animacja frontu wodnego 2s nieskończone wysuwanie; symuluj rozpryskiwanie się fal Animacja będzie wykonywana nieco szybciej, aby uzyskać efekt perspektywy */ )

Ustalmy style dla łodzi i jej elementów. Nazywamy również odpowiednie animacje:

#ad-1 ul#boat ( szerokość: 249px; wysokość: 215px; z-index: 2; pozycja: bezwzględna; dół: 25px; lewy: 20px; przepełnienie: widoczny; animacja: animacja łodzi w-animacji 3s 1 zwolnienie ; /* Wsuwa grupę po uruchomieniu reklamy */ ) #ad-1 ul#boat li ( szerokość: 249 pikseli; wysokość: 215 pikseli; obraz tła: url(../images/ad-1/boat.png); pozycja: absolutna; dół: 0 pikseli; przepełnienie: widoczne; animacja: animacja łodzi 2s nieskończone wysuwanie; /* Symulacja kołysania się łodzi na wodzie - podobna do animacji użytej już na wodzie */ ) # ad-1 #znak-pytania ( szerokość: 24px; wysokość: 50px; obraz tła: url(../images/ad-1/question-mark.png); pozycja: bezwzględna; prawa: 34px; góra: -30px ; animacja: animacja z opóźnionym zanikaniem 4s 1 wyciszanie; /* Zanikanie znaku zapytania */ )

Teraz stwórzmy style dla chmur. Dla nich wykorzystamy animację z efektem niekończącego się ruchu. Ilustracja pokazuje istotę pomysłu:

A oto kod CSS:

#ad-1 #clouds ( pozycja: absolutna; góra: 0px; z-index: 0; animacja: cloud-animation 30s nieskończona liniowa; /* Przewiń chmury w lewo, zresetuj i powtórz */ ) #ad-1 # grupa chmur -1 ( szerokość: 720 pikseli; pozycja: bezwzględna; po lewej: 0 pikseli; ) #ad-1 #cloud-group-2 ( szerokość: 720 pikseli; pozycja: bezwzględna; po lewej: 720 pikseli; ) #ad-1 .cloud- 1 ( szerokość: 172px; wysokość: 121px; url(../images/ad-1/cloud-1.png); pozycja: absolutna góra: 40px; ( szerokość: 121px; wysokość: 75px; obraz tła: url( ../images/ad-1/cloud-2.png); pozycja: bezwzględna; u góry: -25 pikseli; po lewej: 300 pikseli; ) #ad-1 . cloud-3 (szerokość: 132 piksele; wysokość: 105 pikseli; obraz tła : url(../images/ad-1/cloud-3.png); pozycja: górna: -5px, lewa: 530px;

Animacje

Przypomnienie: Od tego momentu nic nie jest właściwie animowane. Jeśli teraz spojrzysz na nasz baner, zobaczysz statyczny obraz. W tym miejscu tworzone są i wywoływane animacje w powyższym kodzie.

Teraz tchnijmy życie w nasz piękny statyczny obraz:

/* Animacja symulowanego opóźnienia służy do wyświetlania wielu elementów. Symulację opóźnienia przeprowadza się poprzez rozpoczęcie procesu z kontynuacją 80% animacji (i nie natychmiast). W ten sposób możesz symulować dowolne opóźnienie: */ @keyframes opóźniona-zanikanie-animacja ( 0% (opacity: 0;) 80% (opacity: 0;) 100% (opacity: 1;) ) /* Animacja wyświetlania formularza z adresem e-mail i przyciskiem. Używana jest również imitacja opóźnienia */ @keyframes form-animation ( 0% (krycie: 0; prawo: -400px;) 90% (krycie: 0; prawo: -400px;) 95% (krycie: 0,5; prawo: 20px ;) 100% (krycie: 1; po prawej: 0px;) ) /* Ta animacja służy do usunięcia łódki z ekranu na początku filmu: */ @keyframes boat-in-animation ( 0% (po lewej: -200px;) 100% (po lewej: 20px;) ) /* Animacja chmur. Pierwsza grupa chmur zaczyna przesuwać się od środka, a druga – na prawo od ekranu. Pierwsza grupa powoli znika z ekranu, a druga pojawia się po prawej stronie. Gdy lewa grupa zostanie całkowicie ukryta, chmury bardzo szybko powracają do swojej pierwotnej pozycji: */ @keyframes cloud-animation ( 0% (po lewej: 0px;) 99,9999% (po lewej: -720px;) 100% (po lewej: 0px;) ) ) / * Trzy ostatnie animacje są prawie takie same - różnica polega na rozmieszczeniu elementów. Symulują pluskanie fal oceanicznych: */ @keyframes boat-animation ( 0% (dół: 0px; lewy: 0px;) 25% (dół: -2px; lewy: -2px;) 70% (dół: 2px; lewy : - 4px;) 100% (na dole: -1px; po lewej: 0px;) ) @keyframes animacja wody-back ( 0% (na dole: 10px; po lewej: -20px;) 25% (na dole: 8px; po lewej: - 22px; ) 70% (na dole: 12px; po lewej: -24px;) 100% (na dole: 9px; po lewej: -20px;) ) @keyframes animacja frontu wodnego ( 0% (na dole: -70px; po lewej: -30px ;) 25% (dół: -68px; lewa: -32px;) 70% (dół: -72px; lewa: -34px;) 100% (dół: -69px; lewa: -30px;) )

Wniosek

Podczas tej lekcji nauczyliśmy się kilku kluczowych pojęć:

1. Oprócz własnych animacji elementy spadkobierców otrzymują animacje swoich rodziców.
2. Tworząc baner należy dążyć do wykorzystania unikalnego identyfikatora, aby uniknąć nakładania się kodu z istniejącym projektem CSS.
3. Położenie i styl elementów należy wybrać tak, jakby animacja nie była dostępna, aby zapewnić kompatybilność wsteczną.
4. Jeśli to możliwe, warto zastosować jedną animację dla kilku elementów.

Dzisiaj stworzymy baner za pomocą animacji CSS3.

Obecnie tylko przeglądarki Firefox i WebKit obsługują animacje CSS, ale przyjrzymy się, jak możemy sprawić, aby te banery działały również w innych przeglądarkach (które nazywam przeglądarkami XVIII wieku). Jednak nie należy oczekiwać świetnego wsparcia we wszystkich przeglądarkach (szczególnie IE 7 i starszych) podczas eksperymentowania z nowoczesnymi technologiami CSS.

Stwórzmy więc animowane banery!

Uwaga: aby zaoszczędzić miejsce, wszystkie prefiksy przeglądarki zostały usunięte. Cm. pliki źródłowe aby zobaczyć cały kod CSS. Jeśli nie znasz animacji CSS, gorąco polecamPrzede wszystkimprzeczytaj to.

znaczniki HTML

Najpierw utworzymy strukturę banera za pomocą HTML. W tym momencie musimy przemyśleć, jak chcemy, aby nasza animacja działała - jak wpłynie ona na elementy potomne i nadrzędne w strukturze naszych znaczników (wyjaśnię to poniżej):