Nesumnjivo jedan od najsjajnijih trendovi 2012 je razvoj na CCS3, HTML5. Danas nudimo veliki i vrlo koristan pregled primjera " 20+: kreativne i korisne lekcije o CSS3″ ponuđeno na SpeckyBoy. Svi primjeri su napravljeni na čist bez JavaScripta, predstavljene lekcije sadrže demonstracije i spremni fajlovi CSS3 za preuzimanje.

Sigurni smo da će ove tehnike biti korisne za web programere!

css3 lekcije :

1. CSS3 foto galerije, klizači, efekti sa slikama

1.1.Slider na CSS3

Ne mogu da verujem, ali ovaj klizač sa različitim efektima je napravljen isključivo u CSS3, veoma impresivan.

1.2. Pozadina za web stranicu preko cijelog ekrana s efektom klizača koristeći CSS3

Web dizajneri su već dugo eksperimentisali sa različitim pozadinama za sajt, ali do sada se vrlo malo moglo uraditi sa čistim CSS-om, morali ste da koristite JS. Sada vam CSS3 daje mogućnost da sa pozadinom vašeg sajta radite kako želite - možete imati jednu pozadinu sa velikom fotografijom visokog kvaliteta, možete promeniti nekoliko pozadina sa različitim efektima, a pozadina je skalabilna u zavisnosti od ekrana parametri. Općenito, odlična prilika za kreativne stranice.

1.3. Lightbox na CSS3

Uz ovaj tutorijal možete naučiti kako da kreirate Lightbox sa raznim efektima koristeći čisti CSS.

1.4. Svojstva slike u CSS3

Ovaj vodič demonstrira nove funkcije u CSS3 za svojstva slike, kao što su zaobljeni uglovi, senke i drugi efekti.

1.5. Animirani baner koristeći CSS3

1.6 Panel za učitavanje u CSS3

1.7. 3D traka sa CSS3

Pogledajte demo ili preuzmite datoteke CSS3 koda →

2. CSS3 meniji, navigacija i dugmad

2.1. Apple.com meni u CSS3

Tutorial za kreiranje poznatog Apple.com menija u CSS3.

2.2. Animirani horizontalni meni u CSS3

Jednostavan vodič koji pokazuje kako napraviti animirani meni u CSS3 sa različitim efektima.

2.3. Animirani vertikalni meni sa CSS3

2.4. Animirana dugmad sa CSS3

Sjajan vodič sa 7 primjera animiranih kreativnih dugmadi.

2.5. Kreativni animirani meni sa slikama koristeći CSS3

U ovoj lekciji, 10 predstavljenih primjera jednostavno otvaraju oči. Ovako složeni kreativni meniji nekada su se kreirali isključivo koristeći JS. Impresivno!

2.6. Efekt kružne navigacije sa CSS3

Neobičan efekat kada se lebdi iznad odabrane navigacijske stavke u obliku kruga sa slikom. Imajte na umu!

2.7. Padajući meni u CSS3

Vodič za implementaciju jednostavnog padajućeg menija sa podnivoima u CSS3.

2.8. CSS3 navigacija sa animiranim prijelazima

3. Razni efekti na CSS3

3.1. Animirani opis alata u CSS3 bez jQueryja

Zahvaljujući razvoju web tehnologija i modernih pretraživača, možemo kreirati mnoge efekte bez upotrebe Javascript-a. Ovo je znatno olakšalo život web programerima. Jer sada možemo kreirati efekte koristeći čisti CSS bez upotrebe Javascript-a. Stoga, u ovom članku želim da vam kažem o tome da li je moguće kreirati banere koristeći čisti CSS, šta je za to potrebno, kao i prednosti i nedostatke ovog pristupa.

CSS3 pruža širok spektar mogućnosti, samo ih trebate pravilno koristiti. Kao primjer, želio bih dati linkove do mojih prošlih radova “Likovi u čistom CSS-u”:

Prvo, želim dati primjere mojih CSS banera. Možda ste ih već vidjeli na stranici, ali niste ni znali šta i kako su nastali.

O demou: Svaki primjer (baner) ima trajanje u sekundama na dnu, kao i dugme “Osvježi” koje počinje prikazivati ​​baner od početka.

Baner #1 — "Individualna obuka za izradu web stranica":

Kreirao sam ovaj baner otprilike 2 dana. Zašto tako dugo? Zato što je trebalo neko vrijeme da se baner prilagodi (da bude gumen) prilikom ponovnog izračunavanja koordinata. Trenutno, njegova veličina ovisi o širini roditeljskog bloka (koji sadrži sam CSS baner).

Napravio sam ovaj baner za bukvalno 2-2,5 sata. Jedina stvar koja je usporila proces kreiranja je izbor ikona. Zato što su morali biti odabrani bliski temi banera.

Ovaj baner se također proteže ovisno o širini blok kontejnera u kojem se nalazi. Kreiranje je trajalo otprilike 1,5 sat.

Ovi baneri izgledaju jako lijepo, ali da li je to zaista tako jednostavno? Pogledajmo prednosti i nedostatke ove metode kreiranja banera.

Prednosti i nedostaci CSS banera:

Kako napraviti CSS baner?

1 Ideja

Prvo morate znati kakvu animaciju baner treba da ima (šta, gdje i odakle treba da se kreće i gdje treba da se pojavi). Možete uzeti A4 list i nacrtati gdje će se svaki element kretati i šta bi trebalo biti na baneru.

Uostalom, ne možete početi kreirati baner ako ne znate šta bi trebao biti i kako funkcionira.

2 HTML struktura

Sljedeći korak je kreiranje HTML oznake tako da se elementi mogu pomicati (i kreirati animaciju za njih). Odnosno, ne možete učiniti sve s jednom slikom koja će se pomaknuti s desne ili lijeve strane i tada je animacija gotova.

Obično postoji jedan zajednički blok u kojem se nalaze svi ostali. I u ovom opštem bloku možemo upravljati elementima kako nam je potrebno.

3 CSS animacija

Posljednji korak je kreiranje animacija za blokove, kao i pisanje stilova za njih, jer su neki dijelovi animacije skriveni po defaultu.

Da biste kreirali vlastiti baner, morate dobro razumjeti osnove CSS-a i HTML-a.

Naučite osnovnu CSS animaciju uz ovaj vodič - .

Zaključak

Svi moderni pretraživači podržavaju CSS3 svojstva, što znači da će baneri biti ispravno prikazani u takvim pretraživačima. Ali uz pomoć JS dodataka možete kreirati CSS banere za starije pretraživače. Naučivši osnove CSS animacije, razumjet ćete proces kreiranja banera i uskoro ćete kreirati svoj prvi čisti CSS baner! 😉

Napravimo reklamni baner koristeći CSS3. Trenutno su u potpunosti podržane samo CSS3 animacije Firefox pretraživači i WebKit. Ali dovoljno je lako učiniti da baner radi u drugim pretraživačima. Međutim, ne očekujte sjajne performanse svuda (posebno u IE 7 i starijim) kada eksperimentišete sa najnovijim CSS tehnikama.

Napomena: Da bi se uštedio prostor na stranici, svi prefiksi proizvođača pretraživača su izostavljeni. Pogledajte kod u izvorima.

HTML markup

Prvo, pogledajmo strukturu banera u HTML-u. U ovoj fazi moramo zamisliti kako će animacija funkcionirati:

Za dublje razumijevanje strukture označavanja, fokusirajmo se na brod:

Tri animacije se pojavljuju s brodom:

Čamac klizi lijevo. Primjenjuje se na neuređenu listu (grupu).

Imitacija čamca koji se ljulja na vodi. Odnosi se na stavku liste (čamac).

Pojava znaka pitanja. Primjenjuje se na div element (znak pitanja).

Ako pogledate demo stranicu, možete vidjeti da animacija za stavku liste (čamac) također utječe na element div unutar nje (znak pitanja). Također, animacija "klizanja" za neuređenu listu radi na stavci liste (čamac i upitnik).

Stoga možemo zaključiti da dječji elementi osim vlastitih radnji primaju i animacije od svojih roditelja. Sada sve što ostaje je da navedete strukture roditelj/dijete.

CSS

Prije nego što počnete analizirati stvaranje animacije, morate osigurati kompatibilan unatrag sa starijim pretraživačima.

Kompatibilnost unatrag

Osigurat ćemo kompatibilnost unatrag jednostavnim stiliziranjem oznake kao da CSS animacije uopće ne postoje. Ako neko pogleda stranicu u starom pretraživaču, vidjet će običnu statičnu sliku, a ne prazan prostor.

Na primjer: šta ako koristite CSS? slično kao u nastavku, bit će problema:

/* WRONG! */ @keyframe naša-fade-in-animacija ( 0% (neprozirnost:0;) 100% (prozirnost:1;) ) div ( neprozirnost: 0; /* Ovaj div je skriven po defaultu - ups! */ animacija: naša -fade-in-animacija 1s 1 )

Ako pretraživač ne podržava animacije, element div će ostati nevidljiv za korisnika.

I ovako ćemo osigurati kompatibilnost unatrag sa starijim pretraživačima:

/* TRUE */ @keyframe naša-fade-in-animacija ( 0% (prozirnost:0;) 100% (prozirnost:1;) ) div ( neprozirnost: 1; /* Ovaj div je vidljiv prema zadanim postavkama */ animacija: naša -fade-in-animacija 1s 1 )

Sada će element div biti prikazan čak i ako se animacija ne pokrene. I unutra moderni pretraživači Div će se prvo sakriti tokom animacije.

Warp

Sada znamo kako osigurati kompatibilnost unatrag (što će pomoći da se izbjegnu problemi pri radu sa stvarnim projektima). Vrijeme je da kreiramo bazu našeg CSS koda.

Morate zapamtiti 3 tačke:

Budući da će se baner koristiti na različitim stranicama, daćemo sve od sebe CSS selektori poseban. Svi će početi sa identifikatorom #ad-1. Na ovaj način ćemo pokušati izbjeći preklapanje između našeg koda i koda stranice.

Namjerno ignoriramo kašnjenje animacije u instalacijama. Ako koristite odgodu animacije kada postavljate stilove sa zadanom vidljivošću elemenata, struktura banera će biti poremećena iznenadnim nestankom ili pojavom dijelova slike nakon što se animacija završi. Kašnjenje animacije se simulira trajanjem i postavkom kadrova.

Kad god je to moguće Koristimo jednu animaciju za nekoliko elemenata. Na ovaj način štedimo vrijeme i smanjujemo veličinu koda.

Dakle, napravimo osnovu za naš baner. Postavimo za njega relativnu poziciju tako da se unutrašnji elementi mogu pravilno postaviti. Također će sakriti sve što je izvan opsega elementa:

#ad-1 ( širina: 720px; visina: 300px; float: lijevo; margina: 40px auto 0; background-image: url(../images/ad-1/background.png); background-position: center; background -repeat: no-repeat overflow: hidden relativno box-shadow: 0px 0px 6px #000;

Zatim postavljamo stilove za tekst i polja za unos. Pozovite odgovarajuće animacije. Također morate osigurati da sadržaj ima najveći z-indeks za pokretne dijelove kako se ne bi preklapali:

#ad-1 #content ( širina: 325px; float: desno; margina: 40px; text-align: centar; z-index: 4; pozicija: relativna; overflow: vidljivo; ) #ad-1 h2 ( font-family: "Alfa Slab One", boja: #137dd5: text-shadow: 0px 0px animacija: odloženo-fade-animacija 1 ease-in-out; kašnjenje */ ) #ad-1 h3 ( font-family: "Boogaloo", cursive; boja: #202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; animacija: odloženo -fade-animation 10s 1 ease-in-out /* Izgled h3 sa simuliranim kašnjenjem */ ) #ad-1 form (margina: 30px 0 0 6px; position: relative; animacija: form-animation 12s 1 ease-in; -out /* Izvlačenje obrasca za unos adrese e-pošte sa simuliranim kašnjenjem */ ) #ad-1 #email (širina: 158px; visina: 48px; float: lijevo; padding: 0 20px; font-size: 16px; font-family: "Lucida Grande", sans-serif: 1px 1px 0px #a2917d border-bottom-left-radius: 5px;

border:1px solid #a2917d;

#ad-1 ul#water( /* Ako vam treba još jedna animacija za vodu, možete je dodati ovdje */ ) #ad-1 li#water-back ( širina: 1200px; visina: 84px; background-image: url( .. /images/ad-1/water-back.png: z-indeks: -20px; #ad-1 li#water-front (širina: 1200px; visina: 158px; background-image: url(../images/ad-1/water-front .png); background-repeat: z-index: 3; dno: -70px animacija: beskonačna lakoća ulaska na vodu 2s Animacija će se izvesti malo brže da bi se stvorio perspektivni efekat.

Postavimo stilove za brod i njegove elemente. Odgovarajuće animacije nazivamo i:

#ad-1 ul#boat ( širina: 249px; visina: 215px; z-indeks: 2; pozicija: apsolutna; dno: 25px; lijevo: 20px; prelijevanje: vidljivo; animacija: brod u animaciji 3s 1 olakšanje ; /* Ubacuje grupu kada se oglas pokrene */ ) #ad-1 ul#boat li (širina: 249px; visina: 215px; background-image: url(../images/ad-1/boat.png); position: absolute bottom: 0px animacija: 2s beskonačno pomeranje čamca na vodi - slično kao i na samoj vodi; ad-1 #question-mark (širina: 24px; visina: 50px; background-image: url(../images/ad-1/question-mark.png); pozicija: apsolutna; desno: 34px; gore: -30px animacija: odložena-fade-animacija 1 ease-in-out /* Fade in the upitnik */ )

Sada kreirajmo stilove za oblake. Za njih ćemo koristiti animaciju s efektom beskonačnog kretanja. Ilustracija pokazuje suštinu ideje:

A evo i CSS koda:

#ad-1 #clouds ( pozicija: apsolutna; vrh: 0px; z-indeks: 0; animacija: cloud-animacija 30-ih beskonačno linearno; /* Pomičite oblake ulijevo, resetirajte i ponovite */ ) #ad-1 # cloud-group -1 ( širina:720px; pozicija: apsolutna; lijevo:0px; ) #ad-1 #cloud-group-2 (širina: 720px; pozicija: apsolutna; lijevo: 720px; ) #ad-1 .cloud- 1 ( širina: 172px; visina: 121px; url(../images/ad-1/cloud-1.png); pozicija: apsolutni vrh: 40px; ( širina: 121px; visina: 75px; background-image: url( ../images/ad-1/cloud-2.png položaj: -25px lijevo: 300px (širina: 105px); : url(../images/ad-1/cloud-3.png): apsolutni: -530px;

Animacije

podsjetnik: Od ovog trenutka, ništa zapravo nije animirano. Ako sada pogledate naš baner, vidjet ćete statičnu sliku. Ovdje se kreiraju i pozivaju animacije u kodu iznad.

Sada udahnimo život našoj prekrasnoj statičkoj slici:

/* Simulirana animacija kašnjenja se koristi za prikaz više elemenata. Simulacija kašnjenja se izvodi pokretanjem procesa sa 80% animacije koja se nastavlja (a ne odmah). Na ovaj način možete simulirati bilo koje kašnjenje: */ @keyframes odložena-fade-animacija ( 0% (prozirnost: 0;) 80% (prozirnost: 0;) 100% (prozirnost: 1;) ) /* Animacija za prikaz obrasca sa email adresom i dugmetom. Imitacija kašnjenja se također koristi */ @keyframes form-animacija ( 0% (prozirnost: 0; desno: -400px;) 90% (prozirnost: 0; desno: -400px;) 95% (prozirnost: 0,5; desno: 20px ;) 100% (neprozirnost: 1; desno: 0px;) ) /* Ova animacija se koristi da skine čamac sa ekrana na početku videa: */ @keyframes čamac u animaciji ( 0% (lijevo: -200px;) 100% (lijevo : 20px;) ) /* Animacija za oblake. Prva grupa oblaka počinje da se kreće od centra, a druga - desno od ekrana. Prva grupa se polako uklanja sa ekrana, a druga se pojavljuje na desnoj strani. Kada je lijeva grupa potpuno skrivena, oblaci se vrlo brzo vraćaju u prvobitni položaj: */ @keyframes cloud-animation ( 0% (lijevo: 0px;) 99,9999% (lijevo: -720px;) 100% (lijevo: 0px; ) ) / * Zadnje tri animacije su skoro iste - razlika je u pozicioniranju elemenata. Oni simuliraju prskanje oceanskih valova: */ @keyframes animacija broda ( 0% (dolje: 0px; lijevo: 0px;) 25% (dolje: -2px; lijevo: -2px;) 70% (dolje: 2px; lijevo : - 4px;) 100% (dolje: -1px; lijevo: 0px;) ) @keyframes water-back-animation (0% (dolje: 10px; lijevo: -20px;) 25% (dolje: 8px; lijevo: - 22px ) 70% (dolje: 12px; lijevo: -24px;) 100% (dolje: 9px; lijevo: -20px;) ) @keyframes water-front-animation (0% (dolje: -70px; lijevo: -30px;) ) ;) 25% (dolje: -68px; lijevo: -32px;) 70% (dolje: -72px; lijevo: -34px;) 100% (dolje: -69px; lijevo: -30px;) )

Zaključak

U ovoj lekciji naučili smo nekoliko ključnih pojmova:

1. Elementi naslednici dobijaju i animacije svojih roditelja pored sopstvenih animacija.
2. Kada kreirate baner, trebali biste nastojati koristiti jedinstveni identifikator kako biste izbjegli preklapanje koda s postojećim CSS projektom.
3. Položaj i stil elemenata treba odabrati kao da animacija nije dostupna kako bi se osigurala kompatibilnost unatrag.
4. Ako je moguće, trebate koristiti jednu animaciju za nekoliko elemenata.

Danas ćemo kreirati baner koristeći CSS3 animaciju.

Trenutno samo Firefox i WebKit pretraživači podržavaju CSS animacije, ali ćemo pogledati kako možemo učiniti da ovi baneri funkcionišu i u drugim pretraživačima (koje ja nazivam pretraživačima iz 18. veka). Međutim, ne biste trebali očekivati ​​veliku podršku u svim pretraživačima (posebno IE 7 i starijim) kada eksperimentišete sa modernim CSS tehnologijama.

Zato kreirajmo animirane banere!

Napomena: Radi uštede prostora, svi prefiksi pretraživača su uklonjeni. Cm. izvorne datoteke da vidite sav CSS kod. Ako niste upoznati sa CSS animacijama, toplo preporučujemprije svegapročitaj ovo.

HTML markup

Prvo ćemo kreirati strukturu banera koristeći HTML. U ovom trenutku moramo razmisliti o tome kako želimo da naša animacija funkcionira – kako će utjecati na podređene i nadređene elemente u strukturi našeg označavanja (to ću objasniti u nastavku):