Jednostavna izrada bannera pomoću css3. Animirani banner s CSS3

Napravimo reklamni banner koristeći CSS3. Trenutno su u potpunosti podržane samo CSS3 animacije Firefox preglednici i WebKit. Ali dovoljno je jednostavno učiniti da banner radi u drugim preglednicima. Međutim, ne očekujte izvrsnu izvedbu posvuda (osobito u IE 7 i starijim) kada eksperimentirate s najnovijim CSS tehnikama.

Bilješka: Radi uštede prostora na stranici, izostavljeni su svi prefiksi proizvođača preglednika. Vidi kod u izvorima.

HTML označavanje

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

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

S brodom se pojavljuju tri animacije:

Klizanje broda s lijeve strane. Primjenjuje se na neuređeni popis (grupu).

Imitacija čamca koji se ljulja na vodi. Primjenjuje se na stavku popisa (čamac).

Izgled upitnika. Primjenjuje se na element div (upitnik).

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

Stoga možemo zaključiti da dječji elementi osim vlastitih radnji dobivaju animacije od svojih roditelja. Sada preostaje samo navesti strukture roditelj/dijete.

CSS

Prije nego počnete analizirati stvaranje animacije, morate se uvjeriti unatrag kompatibilan sa starijim preglednicima.

kompatibilnost unatrag

Osigurat ćemo kompatibilnost s prethodnim verzijama jednostavnim oblikovanjem oznaka kao da CSS animacije uopće ne postoje. Ako netko pogleda stranicu u starom pregledniku, vidjet će običnu statičnu sliku, a ne prazan bijeli prostor.

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

/* POGREŠNO! */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div (opacity: 0; /* Ovaj div je skriven prema zadanim postavkama - ups! */ animacija: naša -fade-in-animacija 1s 1; )

Ako preglednik ne podržava animacije, element div ostat će nevidljiv korisniku.

I ovako ćemo osigurati kompatibilnost sa starijim preglednicima:

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

Sada će se element div prikazati čak i ako se animacija ne uspije pokrenuti. A u modernim preglednicima, div će prvo biti skriven tijekom animacije.

Osnova

Sada znamo kako osigurati kompatibilnost s prethodnim verzijama (što će pomoći u izbjegavanju problema pri radu sa stvarnim projektima). Vrijeme je da stvorimo bazu našeg CSS koda.

Morate zapamtiti 3 točke:

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

Namjerno ignoriramo kašnjenje animacije u instalacijama. Ako koristite odgodu animacije prilikom postavljanja stilova sa zadanom vidljivošću elemenata, struktura bannera će biti poremećena iznenadnim nestankom ili pojavljivanjem dijelova slike nakon završetka animacije. Kašnjenje animacije simulira se trajanjem i postavkom okvira.

Kad je moguće Koristimo jednu animaciju za više elemenata. Na taj način štedimo vrijeme i smanjujemo veličinu koda.

Dakle, stvorimo osnovu za naš banner. Postavimo relativno pozicioniranje za njega tako da se unutarnji elementi mogu ispravno postaviti. Također će sakriti sve izvan opsega elementa:

#ad-1 (width: 720px; height: 300px; float: left; margin: 40px auto 0; background-image: url(../images/ad-1/background.png); background-position: center; background -ponavljanje: bez ponavljanja; preljev: skriven; položaj: relativan; sjena okvira: 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 ( width: 325px; float: right; margin: 40px; text-align: center; z-index: 4; position: relative; overflow: visible; ) #ad-1 h2 (font-family: "Alfa Slab One", kurziv; boja: #137dd5; veličina fonta: 50px; visina linije: 50px; sjena teksta: 0px 0px 4px #fff; animacija: delayed-fade-animation 7s 1 ease-in-out; /* Pojavljuje se h2 sa simuliranim kašnjenjem */ ) #ad-1 h3 (obitelj-fontova: "Boogaloo", kurziv; boja: #202224; veličina fonta: 31px; visina retka: 31px; sjena teksta: 0px 0px 4px #fff; animacija: animacija s odgođenim blijedim 10s 1 lagano ulaženje; /* Pojavljuje se h3 sa simuliranom odgodom */ ) #ad-1 obrazac ( margina: 30px 0 0 6px; pozicija: relativna; animacija: animacija obrasca 12s 1 ease-in-out; /* Izvlačenje obrasca za unos adrese e-pošte sa simuliranim kašnjenjem */ ) #ad-1 #email ( width: 158px; height: 48px; float: lijevo; padding: 0 20px; font -veličina: 16px; obitelj-fontova: "Lucida Grande", sans-serif; boja: #fff; sjena teksta: 1px 1px 0px #a2917d; border-top-left-radius: 5px; border-bottom-left-radius : 5 px; border:1px solid #a2917d; obris: nema; box-shadow: -1px -1px 1px #fff; boja pozadine: #c7b29b; pozadinska slika: linearni gradijent (dno, rgb(216,201,185) 0%, rgb(199,178,155) 100%); ) #ad-1 #email:focus ( background-image: linearni gradijent(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%); ) #ad-1 #submit ( height: 50px; float: lijevo ; pokazivač: pokazivač; ispuna: 0 20px; veličina fonta: 20px; obitelj-fonta: "Boogaloo", kurziv; boja: #137dd5; sjena teksta: 1px 1px 0px #fff; radijus-border-top-right: 5px ; border-bottom-right-radius: 5px; border:1px solid #bcc0c4; border-left: none; background-color: #fff; background-image: linearni gradijent(dno, rgb(245,247,249) 0%, rgb( 255,255,255) 100%); ) #ad-1 #submit:hover ( pozadinska slika: linearni gradijent(dno, rgb(255,255,255) 0%, rgb(255,255,255) 100%); )

Postavimo sada stilove za vodu i pozovimo odgovarajuću animaciju:

#ad-1 ul#water( /* Ako trebate drugu animaciju za vodu, možete je dodati ovdje */ ) #ad-1 li#water-back ( width: 1200px; height: 84px; background-image: url( .. /images/ad-1/water-back.png); background-repeat: repeat-x; z-index: 1; position: absolute; bottom: 10px; left: -20px; animacija: water-back-animation 3s infinite ease-in-out; /* Imitacija prskanja valova */ ) #ad-1 li#water-front ( width: 1200px; height: 158px; background-image: url(../images/ad-1/ water-front .png); background-repeat: repeat-x; z-index: 3; position: absolute; bottom: -70px; left:-30px; animacija: water-front-animation 2s beskonačno lagano uvlačenje; /* Ostalo Simulira prskanje valova. Animacija će se izvoditi malo brže kako bi se stvorio efekt perspektive. */ )

Postavimo stilove za brod i njegove elemente. Također nazivamo odgovarajuće animacije:

#ad-1 ul#čamac ( širina: 249 px; visina: 215 px; z-indeks: 2; pozicija: apsolutna; dno: 25 px; lijevo: 20 px; preljev: vidljiv; animacija: animacija broda u 3 s 1 popuštanje ; /* Uvlači grupu kada oglas počne */ ) #ad-1 ul#boat li ( width: 249px; height: 215px; background-image: url(../images/ad-1/boat.png); pozicija: apsolutna; dno: 0px; lijevo: 0px; preljev: vidljiv; animacija: animacija čamca 2s beskonačno lagano ulaženje; /* Simulirajte ljuljanje čamca na vodi - slično animaciji koja se već koristi na samoj vodi. */ ) #ad-1 #upitnik ( širina: 24px; visina: 50px; pozadinska slika: url(../images/ad-1/question-mark.png); pozicija: apsolutna; desno: 34px; vrh: -30px; animacija: odgođena-fade-animacija 4s 1 ease-in-out; /* Izbljeđivanje u upitniku */ )

Kreirajmo sada 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 (position: absolute; top: 0px; z-index: 0; animacija: cloud-animation 30s infinite linear; /* Pomičite oblake ulijevo, resetirajte i ponovite */) #ad-1 # cloud-group -1 ( width:720px; position: absolute; left:0px; ) #ad-1 #cloud-group-2 ( width: 720px; position: absolute; left: 720px; ) #ad-1 .cloud- 1 (širina: 172 px; visina: 121 px; pozadinska slika: url(../images/ad-1/cloud-1.png); položaj: apsolutni; vrh: 10 px; lijevo: 40 px; ) #ad-1. oblak-2 ( širina: 121px; visina: 75px; pozadinska slika: url(../images/ad-1/cloud-2.png); pozicija: apsolutna; vrh: -25px; lijevo: 300px; ) #ad -1 . oblak-3 ( širina: 132px; visina: 105px; pozadinska slika: url(../images/ad-1/cloud-3.png); pozicija: apsolutna; vrh: -5px; lijevo: 530px; )

Animacije

Podsjetnik: Od ove točke nadalje ništa zapravo nije animirano. Ako sada pogledate naš banner, vidjet ćete statičnu sliku. Ovo je mjesto gdje se animacije stvaraju i pozivaju u gornjem kodu.

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

/* Simulirana animacija kašnjenja koristi se za prikaz više elemenata. Simulacija odgode provodi se pokretanjem procesa s nastavkom 80% animacije (i to ne odmah). Na ovaj način možete simulirati bilo koje kašnjenje: */ @keyframes delayed-fade-animation ( 0% (opacity: 0;) 80% (opacity: 0;) 100% (opacity: 1;) ) /* Animacija za prikaz obrasca s email adresa i gumb. Također se koristi imitacija odgode */ @keyframes form-animation ( 0% (neprozirnost: 0; desno: -400px;) 90% (neprozirnost: 0; desno: -400px;) 95% (neprozirnost: 0,5; desno: 20px ;) 100% (neprozirnost: 1; desno: 0px;) ) /* Ova se animacija koristi za uklanjanje čamca sa zaslona na početku videa: */ @keyframes animacija čamca ( 0% (lijevo: -200px;) 100% (lijevo: 20px;) ) /* Animacija za oblake. Prva skupina oblaka počinje se kretati od središta, a druga - s desne strane zaslona. Prva grupa se polako uklanja sa ekrana, a druga se pojavljuje s desne strane. Nakon što je lijeva grupa potpuno skrivena, oblaci se vrlo brzo vraćaju na svoj izvorni položaj: */ @keyframes cloud-animation ( 0% (lijevo: 0px;) 99,9999% (lijevo: -720px;) 100% (lijevo: 0px; ) ) / * Zadnje tri animacije gotovo su iste - razlika je u pozicioniranju elemenata. Oni simuliraju zapljuskivanje oceanskih valova: */ @keyframes boat-animation ( 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% (dno: 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 nasljednici dobivaju animacije svojih roditelja uz vlastite animacije.
2. Prilikom izrade bannera, 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.

Bez sumnje jedan od najsjajnijih trendovi 2012 je razvoj na CCS3, HTML5. Danas nudimo veliki i vrlo korisna recenzija primjeri " 20+: kreativne i korisne lekcije o CSS3″ ponuđeno na SpeckyBoy. Svi primjeri su napravljeni na čisto bez JavaScripta, predstavljene lekcije uključuju demonstracije i gotove CSS3 datoteke za preuzimanje.

Sigurni smo da će ove tehnike biti korisne web programerima!

css3 lekcije :

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

1.1.Klizač na CSS3

Ne mogu vjerovati, ali ovaj klizač s različitim efektima napravljen je isključivo u CSS3, vrlo impresivno.

1.2. Pozadina za web stranicu preko cijelog zaslona s efektom klizača pomoću CSS3

Web dizajneri već dugo eksperimentiraju s različitim pozadinama web stranice, ali do sada čisti CSS Bilo je vrlo malo toga što se moglo učiniti; morali smo koristiti JS. Sada vam CSS3 daje mogućnost da s pozadinom svoje web stranice radite kako želite - možete imati jednu pozadinu s velikom, visokokvalitetnom fotografijom, možete promijeniti nekoliko pozadina s različitim efektima i skalabilnošću pozadine ovisno o parametrima ekrana. Općenito, nevjerojatna prilika za kreativne stranice.

1.3. Lightbox na CSS3

Uz ovaj vodič možete naučiti kako izraditi Lightbox s različitim efektima koristeći čisti CSS.

1.4. Svojstva slike u CSS3

Ovaj vodič demonstrira nove značajke u CSS3 za svojstva slike, kao što su zaobljeni kutovi, sjene i drugi efekti.

1.5. Animirani banner s CSS3

1.6. Ploča učitavanja u CSS3

1.7. 3D vrpca s CSS3

Pogledajte demo ili preuzmite datoteke CSS3 koda →

2. CSS3 izbornici, navigacija i gumbi

2.1. Apple.com izbornik u CSS3

Vodič za stvaranje poznatog Apple.com izbornika u CSS3.

2.2. Animirani horizontalni izbornik u CSS3

Jednostavan vodič koji pokazuje kako napraviti animirani izbornik u CSS3 s različitim efektima.

2.3. Animirani okomiti izbornik s CSS3

2.4. Animirani gumbi s CSS3

Sjajan vodič sa 7 primjera animiranih kreativnih gumba.

2.5. Kreativni animirani izbornik sa slikama pomoću CSS3

U ovoj lekciji 10 predstavljenih primjera jednostavno otvaraju oči. Ovako složeni kreativni jelovnici nekada su se izrađivali isključivo pomoću JS-a. Impresivan!

2.6. Kružni navigacijski učinak s CSS3

Neobičan učinak kada lebdite iznad odabrane navigacijske stavke u obliku kruga sa slikom. Uzeti na znanje!

2.7. Padajući izbornik u CSS3

Vodič za implementaciju jednostavnog padajućeg izbornika s podrazinama u CSS3.

2.8. CSS3 navigacija s animiranim prijelazima

3. Razni učinci na CSS3

3.1. Animirani opis alata u CSS3 bez jQueryja

Prijatelji, pozdrav svima. Danas nastavljamo s izradom bannera u Google program Web dizajner u HTML5 formatu, s 3D efektom.

I to je razumljivo, banneri izrađeni u html5 i css3 prikazuju se na bilo kojem ekranu, kako na računalima, tako i na televizorima i mobilnim uređajima. Isto se ne može reći za flash bannere.

Osim toga, ovi banneri mogu se jednostavno koristiti i banner će izgledati sjajno na bilo kojem zaslonu.

A s obzirom na činjenicu da Mobilni uredaji sve više koriste za pregled internetskih izvora, to je vrlo važno.

Već sam opisao glavni i njegov položaj na mjestu u prethodnom članku. Dakle, danas ću obratiti pozornost na stvaranje 3D efekta i cikličkih (ponavljajućih) postavki. Također ćemo pogledati nekoliko postavki za "događaje".

Prilično je teško detaljno opisati cijeli ovaj proces, stoga vam nudim video tutorial. To će znatno olakšati svladavanje gradiva. Također preuzmite arhivu s mojim banner projektom kao vizualnim primjerom.

Priprema za izradu bannera s 3D efektom.

Konačni izgled bannera u konačnici ovisi o pripremi. Uređivač Google Web Designer omogućuje stvaranje realističnih 3D efekata i sve će to biti zapisano html kod, samo trebate sve ispravno sastaviti u vizualnom uređivaču.

Da biste stvorili visokokvalitetni 3D efekt, prvo morate izrezati praznine u Photoshopu, koje ćete kasnije morati spojiti u Google Web Designer.

Kao primjer, pripremio sam sljedeće praznine:

Napravio sam ove praznine u Photoshopu, ali na internetu ima mnogo sličnih slika. Ne morate se naprezati, već uzmite gotove opcije.

Napomena: Ako ste zainteresirani za proces stvaranja takvih praznina, pišite o tome u komentarima.

Također je važno razmisliti o cjelokupnoj kompoziciji bannera i scenariju. To određuje kako će banner biti percipiran kao cjelina.

Izrada 3D objekta u Google Web Designeru.

Dakle, analogno prethodnom članku, pokrenite uređivač i izradite novi projekt.

3D efekt podrazumijeva kompozitnu sliku, odnosno sliku koja se sastoji od više dijelova koji se nalaze u željenoj projekciji.

Ove više slika treba kombinirati ili u grupu ili smjestiti u DIV blok. I tako i tako će biti točno. Ali meni je prikladnije raditi s DIV stranom.

Korak 1: Stvorite DIV blok.

Dakle, da biste stvorili DIV blok, na lijevoj ploči odaberite "Alat za označavanje (D)".

Obavezno dodijelite ID. I prilagodite veličine pomoću odjeljka "Svojstva" na desnoj ploči.

Sada morate odabrati blok. Da biste to učinili, na lijevoj ploči odaberite "alat za odabir (V)" I dvostruki klik kliknite lijevom tipkom miša na okvir DIV bloka. Promijenit će boju u crvenu.

Korak 2. Raspored slika.

A sada počinje najmukotrpniji proces. Morate izložiti sve elemente jedne slike.

Na raspolaganju imam sljedeće stvari:

- Gornja strana.

— Strana (sastoji se od tri odvojena dijela).

Najprije postavite stražnju (zadnju) stranu slike i poravnajte je sa središtem i gornjim rubom bannera.

Na isti način dodajte prednju stranu. Poravnajte i pomaknite duž Z osi.

Budući da je širina stranice 4px (piksela), pomaknuo sam prednju i stražnju stranu duž Z osi za 2px i -2px. To će osigurati razmak između slika.

Napomena: pogledajte snimke zaslona za točne brojeve pomaka.

Zatim dodajte stranu, sve dijelove zasebno. Za jednostavno postavljanje upotrijebite alate "3D rotacija radnog područja" I "Skala". Oni će vam pomoći da točno prilagodite sve detalje.

Za početak predlažem da sve slike poredate s jedne strane, a zatim ih kopirate i postavite u zrcalnu projekciju s druge strane.

Sljedeći korak je poravnati gornji lijevi kut.

Sada središnji dio sa strane.

I donji kut s lijeve strane.

Obavezno poravnajte sve bočne elemente na 90 0 duž Y osi.

Sada trebate kopirati željeni sloj i ponovno ga zalijepiti, preimenovati ga i promijeniti parametre lokacije, tako da dobijemo elemente za desnu stranu.

Da biste to učinili, odaberite sliku na donjoj ploči - pritisnite kombinaciju tipki CTRL + C (kopiraj) i zalijepite duplikat CTRL + V.

Počnimo na isti način kao i strana polja od vrha prema dolje, ali samo za desnu.

Gornji desni poklopac.

Donji dio nisam radila jer se ne vidi na slici.

Najteži posao je prošao. Sada možete početi postavljati animaciju. Kao vizualnu demonstraciju, zarotirajmo sliku.

Stvaranje efekta rotacije u Google Web Designeru.

Prvi korak je izlazak iz DIV bloka koji sadrži sve elemente slike. Odnosno, radili smo unutar bloka s određenim slikama, a sada ćemo morati raditi sa svim slikama istovremeno, upravljajući blokom DIV.

Za početak kliknite gumb DIV na donjoj ploči.

Dakle, na planini vremena klika desni gumb mišem, stvorite dva ključna okvira. Trebalo bi izgledati ovako:

Položaj izvornog okvira na Y skali postavljen je na -90 0 .

Postavili smo prvi ključni okvir (drugi) na Y ljestvici na 0 0 .

Postavite drugi ključni okvir (treći po redu) na 90 0 na Y skali.

Možete provjeriti rezultate. Da biste to učinili, kliknite na gumb igra.

Istina, naš imidž će napraviti samo jednu revoluciju. Kako bi se slika stalno okretala ili napravila nekoliko okretaja, morate konfigurirati parametre ciklusa.

Postavljanje bicikliranja u Google Web Designeru.

Program vam omogućuje da konfigurirate nekoliko opcija cikličnosti (ponavljanja). Na ovaj način možete postaviti ponavljanje za sve elemente bannera ili za svaki element posebno.

Također, cikličnost se može ograničiti brojem ponavljanja ili učiniti beskonačnom.

Na donjoj ploči pored svakog elementa nalaze se simboli "Dvorac", "Oko", "Strelica unazad".

Dakle, za konfiguraciju cikličnosti morate kliknuti na simbol "Strelica unatrag". Odaberite ograničeni broj ponavljanja ili beskrajnu opciju.

Odlučio sam beskrajno ponavljati animaciju. Jer u budućnosti želim konfigurirati "Događaji" tako da će se rotacija zaustaviti kada se miš zadrži i nastavit će se nakon uklanjanja kursora.

Zaustavlja rotaciju kada prijeđete mišem iznad natpisa.

Prije svega, postavljamo prečac na prvi ključni okvir (drugi po redu). Da biste to učinili, desnom tipkom miša kliknite iznad okvira i odaberite stavku izbornika "Dodaj prečac". Unesite naziv prečaca i pritisnite tipku Enter.

A u sljedećem koraku odabirete kao prijemnika « Stranica 1". Tamo neće biti drugih opcija.

I posljednji korak, odaberite prečac koji ste stvorili u početnoj fazi.

Spremite događaje i provjerite. Rotacija natpisa će se zaustaviti kada prijeđete mišem preko okvira gdje je napravljen prečac.

Nastavak rotacije nakon pomicanja pokazivača miša.

Kako biste osigurali nastavak rotacije nakon pomicanja pokazivača u stranu, postavite drugi događaj.

Konfiguriran je slično kao i prethodni, sa samo dvije razlike.

Događaj je odabran "Miš"— « miš van".

Događaj - povlačenje miša

I kao akciju "Vremenska Crta" — « uključi reprodukciju".

Akcija - Nastavi

Sada je naš banner s 3D efektom spreman. I možete smisliti onoliko različitih učinaka koliko želite.

Samo ne zaboravite postaviti događaj za klik mišem i otvaranje linka. Banner ipak nije nastao zbog ljepote.

U početku se ovaj proces može činiti kompliciranim, ali nakon nekoliko bannera više nećete tako misliti.

To je sve za mene danas, prijatelji. Želim vam uspjeh, veselim se vašim komentarima i vidimo se u novim člancima i video tutorijalima.

Srdačan pozdrav, Maxim Zaitsev.

Zahvaljujući razvoju web tehnologija i modernih preglednika, možemo stvoriti mnoge efekte bez koristeći Javascript. Ovo je znatno olakšalo život web programerima. Zato što sada možemo stvarati efekte koristeći čisti CSS bez korištenja Javascripta. Stoga vam u ovom članku želim reći je li moguće izraditi bannere koristeći čisti CSS, što je za to potrebno, kao i prednosti i mane ovog pristupa.

CSS3 pruža širok raspon mogućnosti, samo ih trebate pravilno koristiti. Kao primjer, želio bih dati poveznice na moje prošle radove “Likovi u čistom CSS-u”:

Prvo, želim dati primjere svojih CSS bannera. Možda ste ih već vidjeli na stranici, ali niste ni znali što i kako su nastale.

O demo verziji: Svaki primjer (banner) na dnu ima trajanje u sekundama, kao i gumb “Osvježi” koji pokreće prikazivanje bannera od početka.

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

Ovaj banner sam stvarao oko 2 dana. Zašto tako dugo? Zato što je trebalo neko vrijeme da se banner prilagodi (da postane gumeni) prilikom preračunavanja koordinata. Trenutno njegova veličina ovisi o širini nadređenog bloka (koji sadrži sam CSS banner).

Ovaj banner napravio sam doslovno za 2-2,5 sata. Jedino što je ovdje usporavalo proces stvaranja je izbor ikona. Zato što su morali biti odabrani bliski temi bannera.

Ovaj banner se također rasteže ovisno o širini blok kontejnera u kojem se nalazi. Izrada je trajala otprilike 1,5 sat.

Ovi banneri izgledaju jako lijepo, ali je li stvarno tako jednostavno? Pogledajmo prednosti i nedostatke ove metode izrade bannera.

Prednosti i nedostaci CSS bannera:

Kako napraviti CSS banner?

1 Ideja

Prvo morate točno znati kakvu animaciju banner treba imati (što, gdje i odakle se treba kretati i gdje se treba pojaviti). Možete uzeti list A4 i nacrtati gdje će se svaki element kretati i što bi trebalo biti na banneru.

Uostalom, ne možete krenuti u izradu bannera ako ne znate što bi on trebao biti i kako funkcionirati.

2 HTML struktura

Sljedeći korak je stvaranje HTML markupa tako da se elementi mogu premještati (i animirati za njih). Odnosno, ne možete učiniti sve s jednom slikom koja će se pomaknuti udesno ili ulijevo i tada je animacija gotova.

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

3 CSS animacija

Posljednji korak je stvaranje animacija za blokove, kao i pisanje stilova za njih, jer su neki dijelovi animacije skriveni prema zadanim postavkama.

Da biste izradili vlastiti banner, morate dobro poznavati osnove CSS-a i HTML-a.

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

Zaključak

svi moderni preglednici podržavaju CSS3 svojstva, što znači da će banneri biti ispravno prikazani u takvim preglednicima. Ali uz pomoć JS dodataka možete kreirati CSS bannere za starije preglednike. Učenjem osnova CSS animacije, razumjet ćete proces stvaranja bannera i uskoro ćete stvarati svoj prvi čisti CSS banner! 😉

Danas ćemo izraditi banner pomoću CSS3 animacije.

Trenutačno samo preglednici Firefox i WebKit podržavaju CSS animacije, ali ćemo pogledati kako možemo učiniti da ti banneri rade i u drugim preglednicima (koje ja nazivam preglednicima iz 18. stoljeća). Međutim, ne biste trebali očekivati ​​veliku podršku u svim preglednicima (osobito IE 7 i nižim verzijama) kada eksperimentirate s modernim CSS tehnologijama.

Kreirajmo dakle animirane bannere!

Imajte na umu: radi uštede prostora, svi prefiksi preglednika su uklonjeni. Pogledajte izvorne datoteke da vidite sav CSS kod. Ako niste upoznati s CSS animacijama, toplo preporučujemPrvoPročitaj ovo.

HTML označavanje

Prvo ćemo izraditi strukturu bannera na Pomoć za HTML. U ovom trenutku moramo razmisliti o tome kako želimo da naša animacija radi - kako će utjecati na podređene i nadređene elemente u strukturi našeg označavanja (ovo ću objasniti u nastavku):