5 cool CSS3 efekata koje ćete više vidjeti

Oglas

CSS3 (u kombinaciji sa snagom HTML5) brzo podržavaju svi glavni preglednici (čitaj - sve osim Internet Explorera), pa sam mislio sam da bi sada bio pravi trenutak da vidimo neke od sjajnih CSS efekata koje možemo postići koristeći snagu vašeg preglednika i malo CSS koda. Trebali biste moći vidjeti sve efekte prikazane u ovom članku ako koristite najnoviji preglednik Chrome, Safari ili Firefox.

Prvo - Što je CSS?

Ako čitate ovaj članak jer ste zaintrigirani, ali nemate pojma što znači CSS, objasnite mi brzo. CSS je kodni jezik koji se koristi za ukrašavanje web stranica. Zalaže se Cascading STyle Shet, i u osnovi samo dodaje stilu i njuh mjestu. Web stranice su sigurno čitljive bez svog CSS-a, ali su odvratne baš kao i sve web stranice davne 1995. godine. Dok HTML datoteke opisuju strukturu i tekstualni sadržaj stranice, CSS ih prikazuje na način kao dizajner i odredite sve, od izgleda stranice, veličine teksta i boja, a sada niz uvodnih efekata s uvodom CSS3.

U prošlosti, postizanje istih efekata kao oni opisani u ovom članku značilo bi preuzimanje glomaznog CSS-a ili čak i veće grafike. Sada CSS može samo opisati vaš preglednik kako bi želio da stranica izgleda, a preglednik će obraditi obradu. Kao da vam predajem planove za izgradnju vlastite kuće, a ne da vam prodajem cijelu kuću - to je značajno jeftinije!

Zaobljeni kutovi

Kôd zaobljenih uglova je stvarno jednostavan:

.box_round {-moz-radijus: 20px; / * FF1 + * / -webkit-obrub-radijus: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / granični radijus: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /}

Sjena teksta

Evo koda za neke tekstne sjene:

.box_textshadow {text-shadow: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / }

gradijenti

Evo koda za CSS gradijente:

.box_gradient {pozadina-boja: # 3f9fe3; pozadinska slika: -moz-linearni gradijent (vrh, # 3f9fe3, #white); / * FF3.6 * / pozadina: -moz-linearni gradijent (vrh, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / background-image: -ms-linear-gradijent (vrh, # 3f9fe3, #white); / * IE10 * / pozadina-slika: -o-linearni gradijent (vrh, # 3f9fe3, #white); / * Opera 11.10+ * / background-image: -webkit-gradient (linearni, lijevi gornji, lijevi donji, od (# 3f9fe3), do (#white)); / * Saf4 +, Chrome * / pozadina-slika: -webkit-linear-gradient (top, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / pozadina-slika: linearni gradijent (vrh, # 3f9fe3, #white); filter: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# bijeli'); / * IE6 – IE9 * / }

rotacija

Ovdje je kôd za zakretanje nečega:

.box_rotate {-moz-transformacija: rotirati (7,5deg); / * FF3.5 + * / -o-transformacija: rotirati (7.5deg); / * Opera 10.5 * / -webkit-transformacija: rotirati (7.5deg); / * Saf3.1 +, Chrome * / -ms-transformacija: zakretanje (7.5deg); / * IE9 * / transformacija: rotirati (7,5deg); filter: progid: DXImageTransform. Microsoft. Matrica (/ * IE6 – IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, veličinaMethod = 'automatsko širenje'); zum: 1; }

Animacija

Trebat će vam ovakav prijelazni kôd na bilo koji element koji želite promijeniti. Također ćete trebati koristiti neke pseudo CSS klase (poput: zadržavanje pokazivača za promjenu bilo kojeg svojstva koje želite animirati, kao što su boja, veličina ili rotacija)

.box_transition {-moz-prijelaz: sve 0,5-tak olakšanje; / * FF4 + * / -o-prijelaz: sve 0,5-tak olakšanje; / * Opera 10.5+ * / -webkit-tranzicija: sve 0,5-tak olakšanje; / * Saf3.2 +, Chrome * / -ms-tranzicija: sve 0,5-tak olakšanje; / * IE10? * / prijelaz: svih 0,5 s olakšanjem; } 

Nekompatibilnosti pretraživača

Iako većina modernih preglednika na neki način podržava cijeli CSS3, neki i dalje zahtijevaju malo drugačiji kôd ili hakove kako bi uspjeli s njihovom posebnom implementacijom standarda. Na primjer, u gornjem kôdu, vidjet ćete mnoge instance -moz- ili -webkit - ispred nekih CSS svojstava koja se odnose na preglednike koji se temelje na Mozilla ili Webkit. Pisanje ovih dodatnih redaka može biti bolna, zato pogledajte ovo css3 generator da ih napišem za vas.

Zaključak

Web će dobiti puno uzbudljivije s novim CSS3 i HTML5 proširenjima. Odobreno, vidjet ćemo još jedan bljesak treptavog teksta i visok omjer whiz-bang-a u stvarnom sadržaju (kao što smo to radili kada animirani GIF-ovi prvo su "otkriveni"), ali dugoročno ćemo naučiti kako koristiti alate CSS3 da bi učinili zanimljiviji web sučelja. I hej, uvijek možete sve isključiti!

Ako ste i sami dizajner ili web programer, zapamtite da CSS3 nikada ne bi trebao biti jedina opcija. Ako vaša web lokacija neće funkcionirati bez CSS3, niste je pravilno koristili. CSS bi trebao biti korišten za poboljšanje iskustva, a ne funkcionalnosti programa.