Nepochybne jeden z najjasnejších trendy 2012 prebieha vývoj CCS3, HTML5. Dnes ponúkame veľký a veľmi užitočný prehľad príkladov " 20+: kreatívne a užitočné lekcie o CSS3″ ponúkané na SpeckyBoy. Všetky príklady sú vyrobené na čisté bez JavaScriptu, prezentované lekcie obsahujú ukážky a pripravené súbory CSS3 na stiahnutie.

Sme si istí, že tieto techniky budú užitočné pre vývojárov webu!

lekcie css3 :

1. CSS3 fotogalérie, slidery, efekty s obrázkami

1.1. Posuvník na CSS3

Nemôžem tomu uveriť, ale tento posúvač s rôznymi efektmi je vyrobený výlučne v CSS3, veľmi pôsobivý.

1.2. Pozadie pre webovú stránku na celú obrazovku s efektom posúvača pomocou CSS3

Webdizajnéri už dlho experimentujú s rôznymi pozadiami stránky, ale doteraz sa s čistým CSS dalo urobiť len veľmi málo, museli ste použiť JS. CSS3 vám teraz dáva možnosť narábať s pozadím vašej stránky podľa vlastného uváženia – môžete mať jedno pozadie s veľkou a kvalitnou fotografiou, môžete zmeniť niekoľko pozadí s rôznymi efektmi a pozadie je škálovateľné v závislosti od obrazovky parametre. Vo všeobecnosti úžasná príležitosť pre kreatívne stránky.

1.3. Lightbox v CSS3

V tomto návode sa môžete naučiť, ako vytvoriť Lightbox s rôznymi efektmi pomocou čistého CSS.

1.4. Vlastnosti obrázka v CSS3

Tento tutoriál demonštruje nové funkcie v CSS3 pre vlastnosti obrázkov, ako sú zaoblené rohy, tiene a iné efekty.

1.5. Animovaný banner pomocou CSS3

1.6 Panel načítania v CSS3

1.7. 3D stuha s CSS3

Pozrite si ukážku alebo si stiahnite súbory kódu CSS3 →

2. CSS3 menu, navigácia a tlačidlá

2.1. Ponuka Apple.com v CSS3

Návod na vytvorenie slávneho Apple.com menu v CSS3.

2.2. Animované horizontálne menu v CSS3

Jednoduchý tutoriál, ktorý ukazuje, ako vytvoriť animované menu v CSS3 s rôznymi efektmi.

2.3. Animované vertikálne menu s CSS3

2.4. Animované tlačidlá s CSS3

Skvelý tutoriál so 7 príkladmi animovaných kreatívnych tlačidiel.

2.5. Kreatívne animované menu s obrázkami pomocou CSS3

V tejto lekcii vám 10 prezentovaných príkladov jednoducho otvorí oči. Takéto komplexné kreatívne menu sa kedysi vytvárali výhradne pomocou JS. Pôsobivé!

2.6. Efekt kruhovej navigácie s CSS3

Nezvyčajný efekt pri prejdení myšou nad vybranú navigačnú položku v podobe kruhu s obrázkom. Berte na vedomie!

2.7. Rozbaľovacia ponuka v CSS3

Návod na implementáciu jednoduchej rozbaľovacej ponuky s podúrovňami v CSS3.

2.8. CSS3 navigácia s animovanými prechodmi

3. Rôzne efekty na CSS3

3.1. Animovaný popis v CSS3 bez jQuery

Vďaka rozvoju webových technológií a moderných prehliadačov dokážeme vytvárať mnohé efekty aj bez použitia Javascriptu. To výrazne uľahčilo život webovým vývojárom. Pretože teraz môžeme vytvárať efekty pomocou čistého CSS bez použitia Javascriptu. Preto vám v tomto článku chcem povedať o tom, či je možné vytvárať bannery pomocou čistého CSS, čo je na to potrebné, ako aj výhody a nevýhody tohto prístupu.

CSS3 poskytuje široké možnosti, len ich treba správne používať. Ako príklad by som rád uviedol odkazy na moje minulé práce „Characters in Pure CSS“:

Najprv chcem uviesť príklady mojich CSS bannerov. Možno ste ich už na stránke videli, no ani ste nevedeli, čo a ako boli vytvorené.

O ukážke: Každý príklad (banner) má v spodnej časti trvanie v sekundách, ako aj tlačidlo „Obnoviť“, ktorým sa banner začne zobrazovať od začiatku.

Banner č. 1 — "Individuálne školenie tvorby webových stránok":

Tento banner som tvoril asi 2 dni. Prečo tak dlho? Pretože prispôsobiť banner (aby bol gumený) pri prepočítavaní súradníc nejaký čas trvalo. V súčasnosti jeho veľkosť závisí od šírky nadradeného bloku (ktorý obsahuje samotný CSS banner).

Tento banner som vytvoril doslova za 2-2,5 hodiny. Jediné, čo tu spomalilo proces tvorby, bol výber ikon. Pretože museli byť vybrané blízko k téme banneru.

Tento banner sa naťahuje aj v závislosti od šírky blokového kontajnera, v ktorom sa nachádza. Vytvorenie trvalo približne 1,5 hodiny.

Tieto bannery vyzerajú veľmi pekne, ale sú naozaj také jednoduché? Pozrime sa na výhody a nevýhody tohto spôsobu tvorby bannerov.

Výhody a nevýhody CSS bannerov:

Ako vytvoriť CSS banner?

1 nápad

Najprv musíte presne vedieť, akú animáciu má banner mať (čo, kam a odkiaľ sa má pohybovať a kde sa má zobraziť). Môžete si vziať hárok A4 a nakresliť, kde sa každý prvok bude pohybovať a čo by malo byť na banneri.

Koniec koncov, nemôžete začať vytvárať banner, ak neviete, čo by mal byť a ako fungovať.

2 Štruktúra HTML

Ďalším krokom je vytvorenie značky HTML, aby bolo možné prvky presúvať (a vytvárať pre ne animáciu). To znamená, že nemôžete robiť všetko s jedným obrázkom, ktorý sa posunie sprava alebo zľava a potom je animácia hotová.

Typicky existuje jeden spoločný blok, v ktorom sú umiestnené všetky ostatné. A v tomto všeobecnom bloku môžeme spravovať prvky tak, ako potrebujeme.

3 CSS animácia

Posledným krokom je vytvorenie animácií pre bloky, ako aj písanie štýlov pre ne, pretože niektoré časti animácie sú predvolene skryté.

Ak chcete vytvoriť svoj vlastný banner, musíte dobre ovládať základy CSS a HTML.

Naučte sa základné CSS animácie s týmto tutoriálom - .

Záver

Všetky moderné prehliadače podporujú vlastnosti CSS3, čo znamená, že bannery sa v takýchto prehliadačoch budú zobrazovať správne. Ale pomocou JS pluginov môžete vytvárať CSS bannery pre staršie prehliadače. Naučením sa základov CSS animácie pochopíte proces vytvárania bannera a čoskoro vytvoríte svoj prvý čistý CSS banner! 😉

Urobme si reklamný banner pomocou CSS3. V súčasnosti sú plne podporované iba animácie CSS3 Prehliadače Firefox a WebKit. Je však dosť jednoduché, aby banner fungoval v iných prehliadačoch. Pri experimentovaní s najnovšími technikami CSS však nečakajte všade veľký výkon (najmä v IE 7 a staršom).

Poznámka: Z dôvodu úspory miesta na stránke boli vynechané všetky predpony výrobcu prehliadača. Pozrite si kód v zdrojoch.

HTML značky

Najprv sa pozrime na štruktúru banneru v HTML. V tejto fáze si musíme predstaviť, ako bude animácia fungovať:

Pre hlbšie pochopenie štruktúry značiek sa zamerajme na loď:

S loďou sa vyskytujú tri animácie:

Loď sa šmýka vľavo. Platí pre neusporiadaný zoznam (skupinu).

Imitácia člna, ktorý sa hojdá na vode. Vzťahuje sa na položku zoznamu (loď).

Vzhľad otáznika. Vzťahuje sa na prvok div (otáznik).

Ak sa pozriete na stránku s ukážkou, môžete vidieť, že animácia položky zoznamu (loď) ovplyvňuje aj prvok div v nej (otáznik). Na položke zoznamu (loď a otáznik) funguje aj animácia „vysúvania“ pre neusporiadaný zoznam.

Preto môžeme konštatovať, že detské prvky dostávajú okrem svojich vlastných akcií animácie od svojich rodičov. Teraz už zostáva len vypísať štruktúry rodič/dieťa.

CSS

Než začnete analyzovať tvorbu animácie, musíte sa uistiť spätne kompatibilné so staršími prehliadačmi.

Spätná kompatibilita

Spätnú kompatibilitu zaistíme jednoduchým štýlom označenia, ako keby animácie CSS vôbec neexistovali. Ak si niekto prezerá stránku v starom prehliadači, zobrazí sa mu obyčajný statický obrázok a nie prázdne miesto.

Napríklad: čo ak používate CSS? podobne ako nižšie, vyskytnú sa problémy:

/* OMYL! */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 0; /* Tento prvok div je predvolene skrytý - hops! */ animácia: naša -fade-in-animation 1s 1 )

Ak prehliadač nepodporuje animácie, prvok div zostane pre používateľa neviditeľný.

A takto zabezpečíme spätnú kompatibilitu so staršími prehliadačmi:

/* TRUE */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 1; /* Tento div je predvolene viditeľný */ animácia: naša -fade-in-animation 1s 1 )

Teraz sa prvok div zobrazí, aj keď sa animácia nespustí. A v moderné prehliadače Div sa počas animácie najskôr skryje.

Warp

Teraz vieme, ako zabezpečiť spätnú kompatibilitu (čo pomôže vyhnúť sa problémom pri práci so skutočnými projektmi). Je čas vytvoriť základ nášho CSS kódu.

Musíte si zapamätať 3 body:

Keďže banner sa bude používať na rôznych stránkach, urobíme maximum Selektor CSSšpeciálne. Všetky budú začínať identifikátorom #ad-1. Týmto spôsobom sa pokúsime vyhnúť prekrývaniu nášho kódu a kódu stránky.

Zámerne ignorujeme oneskorenie animácie v inštaláciách. Ak pri nastavovaní štýlov s predvolenou viditeľnosťou prvkov použijete oneskorenie animácie, naruší sa štruktúra banneru náhlym zmiznutím alebo objavením sa častí obrázka po dokončení animácie. Oneskorenie animácie je simulované trvaním a nastavením snímok.

Kedykoľvek je to možné Používame jednu animáciu pre niekoľko prvkov. Týmto spôsobom ušetríme čas a znížime veľkosť kódu.

Poďme si teda vytvoriť základ pre náš banner. Nastavme mu relatívne umiestnenie, aby bolo možné správne umiestniť vnútorné prvky. Skryje aj čokoľvek mimo rozsahu prvku:

#ad-1 ( šírka: 720px; výška: 300px; plávajúci: vľavo; okraj: 40px automaticky 0; obrázok na pozadí: url(../images/ad-1/background.png); poloha na pozadí: stred; pozadie -repeat: no-repeat: skryté;

Potom nastavíme štýly pre textové a vstupné polia. Vyvolajte príslušné animácie. Musíte sa tiež uistiť, že obsah má najvyšší z-index pre pohyblivé časti, aby sa neprekrývali:

#ad-1 #content ( šírka: 325px; float: right; margin: 40px; text-align: center; z-index: 4; position: relatívne; overflow: viditeľné; ) #ad-1 h2 ( font-family: "Alfa Slab One", farba: #137dd5; výška-textu: 0px 0px 4px #fff animácia: oneskorené vyblednutie 7s 1 nábeh/výstup h2; oneskorenie */ ) #ad-1 h3 ( font-family: "Boogaloo", kurzíva; farba: #202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; animácia: oneskorená -fade-animation 10s 1 easy-in-out /* Vzhľad h3 so simulovaným oneskorením */ ) #ad-1 form ( margin: 30px 0 0 6px; position: relatívne; animation: form-animation 12s 1 easy-in; -out; /* Vysunutie formulára na zadanie e-mailovej adresy so simulovaným oneskorením */ ) #ad-1 #email ( šírka: 158px; výška: 48px; float: left; padding: 0 20px; font-size: 16px; font-family: "Lucida Grande", bezpätkový text: 1px 1px 0px #a2917d border-bottom-left-radius: 5px;

border:1px solid #a2917d;

#ad-1 ul#water( /* Ak potrebujete ďalšiu animáciu pre vodu, môžete ju pridať sem */ ) #ad-1 li#water-back ( šírka: 1200px; výška: 84px; obrázok na pozadí: url( .. /images/ad-1/water-back.png; background-repeat: z-index: 1: absolútny: -20px /* Imitácia špliechajúcich vĺn; #ad-1 li#water-front ( šírka: 1200px; výška: 158px; obrázok na pozadí: url(../images/ad-1/water-front .png); opakovanie na pozadí: z-index: 3; spodná časť: -70px animácia: vodná-predná-animácia 2s nekonečný nábeh vĺn simuluje špliechanie vĺn, aby sa vytvoril perspektívny efekt */ )

Poďme nastaviť štýly pre loď a jej prvky. Zodpovedajúce animácie tiež nazývame:

#ad-1 ul#boat ( šírka: 249px; výška: 215px; z-index: 2; pozícia: absolútna; spodok: 25px; vľavo: 20px; pretečenie: viditeľné; animácia: čln v animácii 3 s 1 uvoľnenie ; /* Zasunie skupinu pri spustení reklamy */ ) #ad-1 ul#boat li ( šírka: 249px; výška: 215px; obrázok na pozadí: url(../images/ad-1/boat.png); poloha: absolútny spodok: 0px: viditeľná animácia 2s infinite easy-in-out; ad-1 #question-mark ( šírka: 24px; výška: 50px; obrázok na pozadí: url(../images/ad-1/question-mark.png); pozícia: absolútna; vpravo: 34px; hore: -30px ; animácia: oneskorená animácia 4s 1 /* Miznutie v otázniku */ )

Teraz vytvoríme štýly pre oblaky. Na ne použijeme animáciu s efektom nekonečného pohybu. Ilustrácia ukazuje podstatu myšlienky:

A tu je kód CSS:

#ad-1 #clouds ( pozícia: absolútna; top: 0px; z-index: 0; animácia: cloud-animation 30s infinite linear; /* Rolujte oblaky doľava, resetujte a opakujte */ ) #ad-1 # cloud-group -1 (šírka:720px; pozícia: absolútna; vľavo:0px; ) #ad-1 #cloud-group-2 (šírka: 720px; pozícia: absolútna; vľavo: 720px; ) #ad-1 .cloud- 1 ( šírka: 172px; výška: 121px; url(../images/ad-1/cloud-1.png); pozícia: úplne hore: 40px; (šírka: 121px; výška: 75px; obrázok na pozadí: url( ../images/ad-1/cloud-2.png); pozícia: absolútna: -25 pixelov; 300 pixelov; #ad-1 : url(../images/ad-1/cloud-3.png pozícia: absolútna hore: -5px vľavo;

Animácie

Pripomienka: Od tohto momentu už vlastne nič nie je animované. Ak sa teraz pozriete na náš banner, uvidíte statický obrázok. Tu sa vytvárajú a volajú animácie v kóde vyššie.

Teraz vdýchnime život nášmu nádhernému statickému obrázku:

/* Simulovaná animácia oneskorenia sa používa na zobrazenie viacerých prvkov. Simulácia oneskorenia sa vykonáva spustením procesu s pokračovaním 80 % animácie (a nie okamžite). Týmto spôsobom môžete simulovať akékoľvek oneskorenie: */ @keyframes delayed-fade-animation ( 0% (nepriehľadnosť: 0;) 80% (nepriehľadnosť: 0;) 100% (nepriehľadnosť: 1;) ) /* Animácia pre zobrazenie formulára s e-mailovou adresou a tlačidlom. Používa sa aj imitácia oneskorenia */ @keyframes form-animation ( 0% (nepriehľadnosť: 0; vpravo: -400px;) 90% (nepriehľadnosť: 0; vpravo: -400px;) 95% (nepriehľadnosť: 0,5; vpravo: 20px ;) 100% (nepriehľadnosť: 1; vpravo: 0px;) ) /* Táto animácia sa používa na spustenie lode z obrazovky na začiatku videa: */ @keyframes animácia člna ( 0% (vľavo: -200px;) 100% (vľavo : 20px;) ) /* Animácia pre mraky. Prvá skupina oblakov sa začína pohybovať od stredu a druhá - napravo od obrazovky. Prvá skupina sa pomaly odstráni z obrazovky a druhá sa zobrazí vpravo. Akonáhle je ľavá skupina úplne skrytá, oblaky sa veľmi rýchlo vrátia do svojej pôvodnej polohy: */ @keyframes cloud-animation ( 0% (vľavo: 0px;) 99,9999% (vľavo: -720px;) 100% (vľavo: 0px; ) ) / * Posledné tri animácie sú takmer rovnaké - rozdiel spočíva v umiestnení prvkov. Simulujú špliechanie morských vĺn: */ @keyframes animácia člna ( 0 % (dole: 0px; vľavo: 0px;) 25 % (dole: -2px; vľavo: -2px;) 70 % (dole: 2px; vľavo : - 4px;) 100% (dole: -1px; vľavo: 0px;) ) @keyframes water-back-animation ( 0% (dole: 10px; vľavo: -20px;) 25% (dole: 8px; vľavo: - 22px; ) 70% (dole: 12px; vľavo: -24px;) 100% (dole: 9px; vľavo: -20px;) ) @keyframes water-front-animation ( 0% (dole: -70px; vľavo: -30px) ;) 25 % (dole: -68px; vľavo: -32px;) 70% (dole: -72px; vľavo: -34px;) 100% (dole: -69px; vľavo: -30px;) )

Záver

V tejto lekcii sme sa naučili niekoľko kľúčových pojmov:

1. Prvky dedičov dostávajú okrem svojich vlastných animácií animácie svojich rodičov.
2. Pri vytváraní bannera by ste sa mali snažiť použiť jedinečný identifikátor, aby ste sa vyhli prekrývaniu kódu s existujúcim projektom CSS.
3. Pozícia a štýl prvkov by sa mali zvoliť tak, ako keby animácia nebola k dispozícii, aby sa zabezpečila spätná kompatibilita.
4. Ak je to možné, mali by ste použiť jednu animáciu pre niekoľko prvkov.

Dnes si vytvoríme banner pomocou CSS3 animácie.

V súčasnosti podporujú animácie CSS iba prehliadače Firefox a WebKit, ale pozrieme sa na to, ako tieto bannery zabezpečiť, aby fungovali aj v iných prehliadačoch (ktoré nazývam prehliadače z 18. storočia). Pri experimentovaní s modernými technológiami CSS by ste však nemali očakávať veľkú podporu vo všetkých prehliadačoch (najmä IE 7 a nižšie).

Poďme teda vytvoriť animované bannery!

Poznámka: Kvôli úspore miesta boli všetky predpony prehliadača odstránené. Cm. zdrojové súbory zobraziť celý kód CSS. Ak nie ste oboznámení s animáciami CSS, vrelo odporúčamv prvom radeprečítaj si toto.

HTML značky

Najprv vytvoríme štruktúru banneru pomocou HTML. V tomto bode si musíme premyslieť, ako chceme, aby naša animácia fungovala – ako to ovplyvní podriadené a rodičovské prvky v štruktúre nášho označenia (vysvetlím to nižšie):