Mainos
CSS3 (yhdistettynä HTML5: n tehoon) tuetaan nopeasti kaikissa tärkeimmissä selaimissa (lue - kaikki paitsi Internet Explorer), joten minä ajattelin, että nyt olisi hyvä aika nähdä joitakin hienoja CSS-efektejä, jotka voimme saavuttaa käyttämällä selaimesi voimaa ja vähän CSS-koodia. Sinun pitäisi voida nähdä kaikki tässä artikkelissa esitetyt tehosteet, jos käytät uusinta Chrome-, Safari- tai Firefox-selainta.
Ensimmäinen - Mikä on CSS?
Jos luet tätä artikkelia, koska olet kiinnostunut, mutta et tiedä mitä CSS tarkoittaa, selitän se nopeasti. CSS on verkkosivujen sisustamiseen käytettävä koodauskieli. Se tarkoittaa Cascading Style Sheet, ja lisää vain tyyliä ja hohtoa sivustoon. Verkkosivustot ovat varmasti luettavissa ilman CSS: ää, mutta ne ovat kauheita, kuten kaikki sivustot olivat vuonna 1995. Vaikka HTML-tiedostot kuvaavat sivun rakennetta ja tekstisisältöä, CSS saa ne näkymään suunnittelijan tapaan suunniteltu, ja määrittele kaikki sivun asettelusta, tekstin koosta ja väreistä sekä nyt joukosta hienoja tehosteita johdannolla CSS3: sta.
Aikaisemmin tässä artikkelissa kuvattujen samantyyppisten tehosteiden saavuttaminen olisi tarkoittanut suurten CSS-tiedostojen tai jopa isomman grafiikan lataamista. Nyt CSS voi vain kuvailla selaimellesi, kuinka se haluaa sivun näyttävän, ja selain käsittelee käsittelyä. Se on kuin minä toimittaisin sinulle suunnitelman rakentaa oma talosi sen sijaan, että myisit sinulle koko taloa - se on huomattavasti halvempaa!
Pyöristetyt kulmat
Internet on vähitellen muuttunut ”pyöreämmäksi”, mutta nyt tämä on vahvistunut CSS3: ssa. Katso tätä kohtaa ympäröivä laatikko. Se ei ole kuva - kokeile napsauttamalla hiiren oikealla painikkeella nähdäksesi sen. Puhdas CSS!
Pyöristettyjen kulmien koodi on todella helppo:
.box_round {-moz-border-säde: 20px; / * FF1 + * / -verkkosivun raja-säde: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / raja-säde: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /}
Tekstin varjo
Teksti voi joskus näyttää todella ankaralta, mutta yksinkertainen pieni varjo todella auttaa asioita. Katso varjo, jonka olen soveltanut tähän kappaleeseen.
Tässä on joidenkin tekstivarjojen koodi:
.box_textshadow {text-shadow: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / }
liukuvärit
Ei enää tasaisia värejä tai taustagradienttikuvia, nyt voit luoda viileän gradientin vain CSS: llä. Valitettavasti tarvitset muutama rivi selainten nykyisten yhteensopimattomuudesta johtuvien ongelmien takia, mutta voit käyttää työkalua, jota kuvaan myöhemmin, näiden luomiseen automaattisesti.
Tässä on CSS-kaltevuuksien koodi:
.box_gradient {taustaväri: # 3f9fe3; taustakuva: -moz-linear-gradient (yläosa, # 3f9fe3, #white); / * FF3.6 * / tausta: -moz-lineaarinen gradientti (yläosa, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / taustakuva: -ms-lineaarinen-kaltevuus (yläosa, # 3f9fe3, #valkoinen); / * IE10 * / taustakuva: -o-lineaarinen-kaltevuus (yläosa, # 3f9fe3, #valkoinen); / * Opera 11.10+ * / taustakuva: -webkit-kaltevuus (lineaarinen, vasen yläosa, vasen alaosa, (# 3f9fe3) - (#valkoinen)); / * Saf4 +, Chrome * / taustakuva: -webkit-lineaarinen-kaltevuus (yläosa, # 3f9fe3, #valkoinen); / * Chrome 10+, Saf5.1 + * / taustakuva: lineaarinen gradientti (yläosa, # 3f9fe3, #valkoinen); suodatin: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# valkoinen'); / * IE6 – IE9 * / }
Kierto
Tämän käyttöä on vaikea kuvitella tekstin suhteen, mutta se voi lisätä hienoja muotoiluelementtejä esimerkiksi kuvia käytettäessä. Huomaa jälleen, että vaikka tätä kappaletta on käännetty, voit silti valita sen ja toimia sen kanssa, koska se pysyy tavallisena tekstinä.
Tässä koodi kääntää jotain:
.box_rotate {-moz-transformaatio: kierrä (7,5deg); / * FF3.5 + * / -o-muunnos: kierrä (7,5 astetta); / * Opera 10,5 * / -webkit-muunnos: kierrä (7,5 astetta); / * Saf3.1 +, Chrome * / -ms-muunnos: kierrä (7,5 astetta); / * IE9 * / muunnos: kierrä (7,5 astetta); suodatin: progid: DXImageTransform. Microsoft. Matriisi (/ * IE6 – IE9 * / M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, mitoitusMetodi = 'automaattinen laajennus'); zoom: 1; }
animaatio
Voi kyllä, pelasin parhaan viimeiseen asti. CSS3 esittelee erilaisia animaatiomuotoja mille tahansa määrälle kuvattuja CSS-tehosteita. Tässä kappaleessa olen määritellyt alla olevan luettelon siirtymäominaisuuden sekä yksinkertaisen taustavärin ja -kierron, kun viet hiiren osoittimen päälle. Jos et vielä ole, siirrä hiiren osoitin tämän kappaleen päälle nyt nähdäksesi vaikutuksen toiminnassa. Voit animoida melkein mitä tahansa!
Tarvitset tämän tyyppisen siirtymäkoodin mihin tahansa elementtiin, jota haluat muuttaa. Sinun on käytettävä myös joitain näennäis CSS-luokkia (kuten: vie hiiri muuttamaan animoitavia ominaisuuksia, kuten väriä, kokoa tai kiertoa)
.box_transition {-moz-siirtyminen: kaikki 0.5s helpottuu; / * FF4 + * / -o-siirtyminen: kaikki 0.5s helpottuu; / * Opera 10.5+ * / -webkit-siirtymä: kaikki 0.5s helpottuu; / * Saf3.2 +, Chrome * / -ms-siirtyminen: kaikki 0.5-sekunnit helpottuvat; / * IE10? * / siirtymä: kaikki 0.5 sekuntia helpottuvat; }
Risti selaimen yhteensopimattomuudet
Vaikka useimmat nykyaikaiset selaimet tukevat jollain tavoin kaikkea CSS3: ta, jotkut vaativat silti jonkin verran erilaista koodia tai hakkerointia, jotta se toimisi standardin erityisen toteutuksen yhteydessä. Esimerkiksi yllä olevassa koodissa näet monia -moz- tai -webkit-esiintymiä, jotka estävät joitain CSS-ominaisuuksia, jotka liittyvät joko Mozilla- tai Webkit-pohjaisiin selaimiin. Näiden ylimääräisten rivien kirjoittaminen voi kuitenkin olla tuskaa, joten tutustu css3-generaattori kirjoittaa ne sinulle.
johtopäätös
Verkosta tulee paljon mielenkiintoisempaa uusien CSS3- ja HTML5-laajennusten avulla. Myönnetään, että tulemme näkemään uuden vilkkuvan tekstin spurtin ja suuren vilkkuvuodon suhteen todelliseen sisältöön (aivan kuten teimme kun animoidut GIF-tiedostot ensin ”löydettiin”), mutta pitkällä tähtäimellä opimme käyttämään CSS3: n työkaluja mielenkiintoisempien verkkojen tekemiseen rajapintoja. Ja hei, voit aina sammuttaa sen kaiken!
Jos olet itse suunnittelija tai web-kehittäjä, muista vain, että CSS3: n ei pitäisi koskaan olla ainoa vaihtoehto. Jos sivustosi ei toimi ilman CSS3: ta, et ole käyttänyt sitä oikein. CSS: ää tulisi käyttää kokemuksen parantamiseksi, ei ohjelman toiminnallisuutta.
Jamesilla on teknisen älykunnan kandidaatin tutkinto ja hän on CompTIA A + ja Network + -sertifioitu. Hän on MakeUseOfin johtava kehittäjä ja viettää vapaa-aikansa pelaamalla VR-paintballia ja lautapelejä. Hän on rakennettu tietokoneita lapsuudestaan asti.