Oglas

cool učinki cssCSS3 (v kombinaciji z močjo HTML5) hitro podpirajo vsi večji brskalniki (beri - vse razen Internet Explorerja), zato sem zdaj bi bil pravi čas, da si ogledate nekaj odličnih učinkov CSS, ki jih lahko dosežemo z močjo brskalnika in malo kode CSS. Če uporabljate najnovejši brskalnik Chrome, Safari ali Firefox, bi morali videti vse učinke, prikazane v tem članku.

Prvič - Kaj je CSS?

Če berete ta članek, ker ste spletki, a nimate pojma, kaj pomeni CSS, naj na kratko pojasnim. CSS je kodni jezik, ki se uporablja za okrasitev spletnih strani. To pomeni Cascading Stil Sheet, in v bistvu samo spletnemu mestu doda slog in voh. Spletna mesta so zagotovo berljiva brez svojega CSS-ja, vendar so grozna, tako kot so bila leta 1995 vsa spletna mesta. Medtem ko datoteke HTML opisujejo strukturo in besedilno vsebino strani, jih CSS prikaže tako, kot je oblikovalec načrtovali in določili vse, od postavitve strani, velikosti besedila in barv ter zdaj z uvajanjem številne domišljijske učinke CSS3.

V preteklosti bi doseganje enakih učinkov kot tisti, opisani v tem članku, pomenilo nalaganje obsežnega CSS-ja ali celo večje grafike. Zdaj lahko CSS v vašem brskalniku samo opiše, kako bi želela stran izgledati, in brskalnik bo kos obdelavi. Všeč mi je, da vam izročim načrte za gradnjo lastne hiše, namesto da vam prodam celotno hišo - bistveno ceneje je!

instagram viewer

Zaobljeni koti

Internet je postopoma postajal „okrožnejši“, zdaj pa je to v CSS3 še bolj utrjeno. Oglejte si polje, ki obdaja ta odstavek. To ni slika - poskusite z desnim klikom nanjo videti. Čisti CSS!

Koda zaobljenih vogalov je res enostavna:

.box_round {-moz-meja-polmer: 20px; / * FF1 + * / -webkit-meja-polmer: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / robnik: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /}

Senca besedila

Besedilo je včasih lahko videti resno samo po sebi, vendar preprosta senčka resnično pomaga. Oglejte si senco, ki sem jo uporabil v tem odstavku.

Tu je koda za nekatere besedilne sence:

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

Gradienti

Ni več ravnih barv ali slik gradienta ozadja, zdaj lahko ustvarite kul gradient samo s pomočjo CSS. Na žalost potrebujete nekaj vrstic zaradi trenutnih težav z nezdružljivostjo med brskalniki, vendar lahko uporabite orodje, ki ga bom opisal kasneje, da jih samodejno ustvari.

Tu je koda za gradiente CSS:

.box_gradient {ozadje-barva: # 3f9fe3; ozadje-slika: -moz-linearni-gradient (vrh, # 3f9fe3, #white); / * FF3.6 * / ozadje: -moz-linearni gradient (vrh, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / ozadje-slika: -ms-linear-gradient (top, # 3f9fe3, #white); / * IE10 * / ozadje-slika: -o-linearni gradient (vrh, # 3f9fe3, #white); / * Opera 11.10+ * / ozadje-slika: -webkit-gradient (linearni, levi zgornji, levi spodaj, od (# 3f9fe3), do (#white)); / * Saf4 +, Chrome * / ozadje-slika: -webkit-line-gradient (vrh, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / ozadje-slika: linearni gradient (vrh, # 3f9fe3, #white); filter: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# bela'); / * IE6 – IE9 * / }

Rotacija

Težko si je predstavljati uporabo tega v smislu besedila, lahko pa dodate nekaj lepih oblikovalskih elementov, na primer pri uporabi slik. Še enkrat, upoštevajte, da je bil ta odstavek kljub temu zasukan, kljub temu lahko izberete in komunicirate z njim, saj ostaja običajno besedilo.

Tukaj je koda, da nekaj zasukate:

.box_rotate {-moz-transformacija: zavrtite (7,5deg); / * FF3.5 + * / -o-transformacija: zasuk (7.5deg); / * Opera 10.5 * / -webkit-transform: vrti (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: zavrtite (7,5deg); / * IE9 * / preoblikovanje: zasuk (7,5deg); filter: progid: DXImageTransform. Microsoft. Matrika (/ * IE6 – IE9 * / M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, velikostMethod = 'samodejno razširitev'); povečava: 1; }

Animacija

Oh ja, najboljše sem rešil do zadnjega. CSS3 uvaja različne oblike animacije za poljubno število opisanih kul CSS učinkov. V tem odstavku sem določil lastnost prehoda, kot je navedeno spodaj, ter preprosto barvo ozadja in vrtenje, ko se premaknete miškin kazalec nad njim. Če še niste, s kazalcem miške nad tem odstavkom zdaj vidite učinek v akciji. Lahko animirate skoraj vse!

Potrebovali boste takšno prehodno kodo do katerega koli elementa, ki ga želite spremeniti. Uporabiti boste morali tudi nekatere razrede psevdo CSS (na primer: s kazalcem miške spremenite lastnosti, ki jih želite animirati, kot so barva, velikost ali zasuk)

.box_transition {-moz prehod: vsa 0,5-kratna olajšava; / * FF4 + * / -o-prehod: vse 0,5-odstotno olajšanje; / * Opera 10.5+ * / -webkit-tranzicija: vse 0,5s olajšanje; / * Saf3.2 +, Chrome * / -ms-prehod: vsa 0,5-kratna olajšava; / * IE10? * / prehod: vsa 0,5-kratna olajšava; }

Neskladnosti med brskalnikom

Čeprav večina sodobnih brskalnikov na nek način podpira ves CSS3, nekateri še vedno zahtevajo nekoliko drugačno kodo ali kramp, da bi lahko deloval s svojo posebno izvedbo standarda. Na primer, v zgornji kodi boste videli številne primere -moz- ali -webkit - pred nekaterimi lastnostmi CSS, ki se nanašajo na brskalnike, ki temeljijo na Mozilla ali Webkit. Pisanje teh dodatnih vrstic je lahko muka, zato preverite to css3 generator da jih napišem zate.

Zaključek

S spletom bosta z novimi razširitvami CSS3 in HTML5 postali še veliko bolj navdušujoči. Pod pogojem, bomo videli še en utrip utripajočega besedila in visoko razmerje whiz-bang-a v resnično vsebino (tako kot pri animirani GIF-ji so bili najprej "odkriti"), vendar se bomo na dolgi rok naučili uporabljati orodja CSS3 za bolj zanimiv splet vmesniki. In hej, vedno lahko vse izklopite!

Če ste sami oblikovalec ali spletni razvijalec, ne pozabite, da CSS3 nikoli ne bi smel biti edina možnost. Če vaše spletno mesto ne bo delovalo brez CSS3, ga niste pravilno uporabili. Za izboljšanje izkušenj je treba uporabiti CSS, ne pa programske funkcionalnosti.

James ima doktorat iz področja umetne inteligence in ima certifikat CompTIA A + in Network +. Je vodilni razvijalec MakeUseOf in svoj prosti čas preživlja z igranjem VR paintball in družabnih iger. Z računalniki gradi že od malih nog.