5 cool CSS3 efekata koje ćete više vidjeti

CSS3 (u kombinaciji sa snagom HTML5) brzo podržavaju svi glavni preglednici (čitaj - bilo što osim Internet Explorera), pa sam sad mislio da je dobro vrijeme da se pogledaju neki od najboljih CSS efekata koje možemo postići pomoću snage 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 CSS-a, ali su odvratne kao i sve web stranice koje su bile 1995. godine. Dok HTML datoteke opisuju strukturu i tekstualni sadržaj stranice, CSS ih prikazuje na način na koji je dizajner zamislio, i određuju sve iz izgled stranice, veličinu teksta i boje, a sada i niz fantastičnih efekata s uvođenjem CSS3-a.

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

Internet je postepeno postajao „okrugliji“, ali sada je to učvršćeno u CSS3. Pogledajte okvir koji sadrži ovaj odlomak. To nije slika - pokušajte desnim klikom na nju da biste je vidjeli. Čisti CSS!

Kôd zaobljenih uglova je stvarno jednostavan:

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

Sjena teksta

Tekst ponekad može izgledati vrlo oštro, ali jednostavna sjenka zaista pomaže stvarima. Pogledajte sjenu koju sam primijenio na ovaj odlomak.

Evo koda za neke tekstne sjene:

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

gradijenti

Nema više ravnih boja ili slika gradijenta pozadine, sada možete kreirati cool gradijent samo pomoću CSS-a. Nažalost, potrebno vam je nekoliko redaka zbog trenutnih problema s nekompatibilnošću preglednika, ali možete upotrijebiti alat koji ću opisati kasnije da biste ih automatski generirali..

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 * / background-image: -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

Teško je zamisliti uporabu za ovo u smislu teksta, ali može dodati neke lijepe elemente dizajna, primjerice, kad koristite slike. Opet primijetite da iako je ovaj odlomak zakrenut, i dalje ga možete odabrati i komunicirati s njim jer on ostaje običan tekst.

Ovdje je kôd za zakretanje nečega:

 .box_rotate -moz-transformacija: rotirati (7,5deg); / * FF3.5 + * / -o-pretvaranje: rotirati (7.5deg); / * Opera 10.5 * / -webkit-transformacija: rotirati (7.5deg); / * Saf3.1 +, Chrome * / -ms-transformacija: zakretanje (7.5deg); / * IE9 * / pretvorba: rotirati (7,5deg); filter: progid: DXImageTransform.Microsoft.Matrix (/ * IE6-IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, dimenzija proširivanje) " zum: 1;  

Animacija

O da, najbolje sam spasio do zadnjeg. CSS3 uvodi različite oblike animacije za bilo koji broj opisanih cool CSS efekata. Na ovom odlomku definirao sam svojstvo prijelaza kako je dolje navedeno, kao i jednostavnu boju pozadine i rotaciju kada miša iznad nje. Ako već niste, zadržite pokazivač iznad ovog odlomka teksta da biste vidjeli učinak u akciji. Možete animirati gotovo sve!

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: sva 0,5s 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: sve 0,5-tak olakšanje;  

Nekompatibilnosti pretraživača

Iako većina modernih preglednika na neki način podržava čitav CSS3, neki i dalje zahtijevaju malo drugačiji kôd ili hakere kako bi to djelovalo s njihovom posebnom implementacijom standarda. Na primjer, u gornjem kôdu, vidjet ćete mnoge slučajeve -moz- ili -webkit- koji prethode nekim CSS svojstvima, a odnose se na preglednike koji se temelje na Mozilla ili Webkit. Pisanje ovih dodatnih redaka može predstavljati bol, pa provjerite css3 generator da biste ih napisali za vas.

Zaključak

Internet će dobiti puno uzbudljivije s novim CSS3 i HTML5 proširenjima. Odobreno, vidjet ćemo još jedan bljesak teksta i visoki omjer whiz-bang-a u stvarnom sadržaju (kao što smo to radili kada su prvi bili animirani GIF-ovi “otkriven”), ali dugoročno ćemo naučiti kako koristiti alate CSS3 za izradu zanimljivijih web sučelja. I hej, uvijek to možete isključiti!

Ako ste i sami dizajner ili web programer, sjetite se 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.