5 lahedat CSS3-efekti, mida näete rohkem

Reklaam

CSS3 (koos HTML5 võimsusega) toetavad kiiresti kõik peamised brauserid (loe - kõike muud kui Internet Explorer), nii et ma arvasin, et nüüd oleks õige aeg näha mõnda lahedat CSS-i efekti, mille saame teie brauseri võimsuse ja vähese CSS-koodi abil saavutada. Kui kasutate uusimat Chrome'i, Safari või Firefoxi brauserit, peaksite olema võimalik näha kõiki selles artiklis demonstreeritud efekte.

Esimene - mis on CSS?

Kui loete seda artiklit seetõttu, et olete huvitatud, kuid teil pole aimugi, mida CSS tähendab, lubage mul selgitada seda kiiresti. CSS on veebilehtede kaunistamiseks kasutatav kodeerimiskeel. See tähistab Cascading Style Sja lisab saidile lihtsalt stiili ja elegantsi. Veebisaidid on kindlasti loetavad ka ilma nende CSSita, kuid need on kohutavad nagu kõik veebisaidid olid 1995. aastal. HTML-failid kirjeldavad küll lehe struktuuri ja teksti sisu, kuid CSS-i abil kuvatakse neid kujundaja viisil ja määrake kõik alates lehe paigutusest, teksti suurusest ja värvidest ning nüüd sissejuhatusest mitu väljamõeldud efekti CSS3-st.

Varem oleks käesolevas artiklis kirjeldatutega samalaadsete efektide saavutamine tähendanud mahuka CSS-i või isegi suurema graafika allalaadimist. Nüüd saab CSS teie brauserile lihtsalt kirjeldada, kuidas leht soovib, ja brauser töötleb seda. Mulle meeldib, kui ma teile kogu maja müümise asemel oma maja ehitamise üle annaksin - see on oluliselt odavam!

Ümardatud nurgad

Ümardatud nurkade kood on tõesti lihtne:

.box_round {-moz-border-raadius: 20px; / * FF1 + * / -veebikomplekti-raadiuse raadius: 20 pikslit; / * Saf3-4, iOS 1+, Android 1.5+ * * / raadiuse raadius: 20 pikslit; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /}

Tekstivari

Siin on mõne teksti varju kood:

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

Gradiendid

Siin on CSS-i kallete kood:

.box_gradient {taustavärv: # 3f9fe3; taustpilt: -moz-linear-gradient (ülemine, # 3f9fe3, #white); / * FF3.6 * / taust: -moz-lineaarne-gradient (ülemine, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / taustpilt: -ms-lineaarne-gradient (ülemine, # 3f9fe3, #valge); / * IE10 * / taustpilt: -o-lineaarne-gradient (ülemine, # 3f9fe3, #valge); / * Opera 11.10+ * / taustpilt: -webkit-gradient (lineaarne, vasak ülemine, vasak vasak, alates (# 3f9fe3), kuni (#valge)); / * Saf4 +, Chrome * / taustpilt: -webkit-linear-gradient (ülemine, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / taustpilt: lineaarne gradient (ülemine, # 3f9fe3, #valge); filter: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# valge'); / * IE6 – IE9 * / }

Pööramine

Siin on kood millegi pööramiseks:

.box_rotate {-moz-teisendus: pööramine (7,5 kraadi); / * FF3.5 + * / -o-teisendus: pöörake (7,5 kraadi); / * Opera 10,5 * / -veebikomplekt-teisendus: pööramine (7,5 kraadi); / * Saf3.1 +, Chrome * / -ms-teisendus: pööramine (7,5 kraadi); / * IE9 * / teisendus: pööramine (7,5 kraadi); filter: progid: DXImageTransform. Microsoft. Maatriks (/ * IE6 – IE9 * / M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, suurusmeetod = 'automaatne laiendamine'); suum: 1; }

Animatsioon

Teil on vaja niimoodi üleminekukoodi igale elemendile, mida soovite muuta. Peate kasutama ka mõnda CSS-i pseudo-klassi (näiteks: hõljutage kursorit animatsiooni soovitud omaduste, näiteks värvi, suuruse või pöörde muutmiseks)

.box_transition {-moz-üleminek: kõik 0.5-d on lihtsad; / * FF4 + * / -o-üleminek: kõik 0,5-sed lihtsustavad väljumist; / * Opera 10.5+ * / -veebikomplekti üleminek: kõik 0.5-sed lihtsustavad; / * Saf3.2 +, Chrome * / -ms-üleminek: kõik 0.5-sed on lihtsustatud; / * IE10? * / üleminek: kõik 0,5-sekundilised kergendavad; } 

Risti brauserite ühildumatus

Ehkki enamus tänapäevaseid brausereid toetavad mõnes mõttes kogu CSS3, vajavad mõned siiski mõnda pisut erinevat koodi või häkke, et see toimiks standardi konkreetse rakendusega. Näiteks ülaltoodud koodis näete palju -moz- või -webkit-juhtumeid, mis eelnevad mõnele CSS-i atribuudile, mis on seotud kas Mozilla- või Webkit-põhiste brauseritega. Nende lisaridade kirjutamine võib küll valu põhjustada, nii et vaadake css3 generaator et need teile kirjutada.

Järeldus

Veebi saab uute CSS3 ja HTML5 laiendite abil palju põnevamaks. Tõsiselt, näeme veel üht vilkuva teksti spurti ja suurt vilistamise-paugu suhet reaalse sisuga (täpselt nagu me tegime siis, kui animeeritud GIF-id avastati esmakordselt), kuid pikas perspektiivis õpime, kuidas kasutada CSS3 tööriistu huvitavama veebi tegemiseks liidesed. Ja hei, saate selle alati välja lülitada!

Kui olete ise disainer või veebiarendaja, pidage meeles, et CSS3 ei tohiks kunagi olla ainus võimalus. Kui teie sait ei toimi ilma CSS3ta, pole te seda õigesti kasutanud. Kogemuste, mitte programmi funktsionaalsuse parandamiseks tuleks kasutada CSS-i.