5 nuostabūs CSS3 efektai, kuriuos pamatysite daugiau

Skelbimas

CSS3 (kartu su HTML5 galia) greitai palaiko visos pagrindinės naršyklės (skaityti - viskas, išskyrus „Internet Explorer“), todėl aš maniau, kad dabar būtų tinkamas laikas pamatyti keletą nuostabių CSS efektų, kuriuos galime pasiekti naudodamiesi naršyklės galia ir trupučiu CSS kodo. Turėtumėte pamatyti visus šiame straipsnyje parodytus efektus, jei naudojate naujausią „Chrome“, „Safari“ ar „Firefox“ naršyklę.

Pirma - kas yra CSS?

Jei skaitote šį straipsnį, nes esate suintriguoti, bet net neįsivaizduojate, ką reiškia CSS, leiskite man paaiškinti greitai. CSS yra kodavimo kalba, naudojama tinklalapiams dekoruoti. Tai reiškia Ckylant STyle Sir iš esmės tiesiog prideda svetainės stilių ir nuojautą. Tinklalapius tikrai galima perskaityti be jų CSS, tačiau jie yra apgaulingi, kaip ir visos svetainės buvo dar 1995 m. Nors HTML failai apibūdina puslapio struktūrą ir tekstinį turinį, CSS verčia juos rodyti taip, kaip dizaineris numatytą ir nustatykite viską, pradedant puslapio išdėstymu, teksto dydžiu ir spalvomis, o dabar įžangoje - daugybę išgalvotų efektų CSS3.

Anksčiau pasiekti tokio paties tipo efektus, kaip aprašyti šiame straipsnyje, būtų reiškę didelių gabaritų CSS ar dar didesnės grafikos atsisiuntimą. Dabar CSS gali tik apibūdinti jūsų naršyklei, kaip jis norėtų, kad puslapis atrodytų, o naršyklė tvarkys tvarkymą. Man patinka, kai perduodau jums planus pastatyti savo namą, o ne parduoti jums visą namą - tai žymiai pigiau!

Apvalūs kampai

Suapvalintų kampų kodas yra tikrai paprastas:

.box_round {-moz-border-radius: 20px; / * FF1 + * / -webkit-border-rādius: 20px; / * „Saf3-4“, „iOS 1+“, „1.5“ ar naujesnės versijos „Android“ * / kraštinės spindulys: 20 taškų; / * „Opera 10.5“, „IE9“, „Saf5“, „Chrome“, FF4 * /}

Teksto šešėlis

Štai kai kurių teksto šešėlių kodas:

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

Gradientai

Štai CSS nuolydžių kodas:

.box_gradient {fono spalva: # 3f9fe3; fono paveikslėlis: -moz-linear-gradient (top, # 3f9fe3, #white); / * FF3.6 * / fonas: -moz-linijinis-gradientas (viršuje, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * „Firefox“ * / fono vaizdas: -ms-linear-gradient (top, # 3f9fe3, #white); / * IE10 * / fono vaizdas: -o-linijinis-gradientas (viršuje, # 3f9fe3, #balta); / * „Opera 11.10+“ * / fono vaizdas: -webkit-gradientas (linijinis, kairė viršuje, kairėje apačioje, nuo (# 3f9fe3), iki (# balta)); / * „Saf4 +“, „Chrome“ * / fono vaizdas: -webkit-linear-gradient (top, # 3f9fe3, #white); / * „Chrome 10+“, „Saf5.1 +“ * / fono vaizdas: linijinis gradientas (viršuje, # 3f9fe3, # balta); filtras: progid: DXImageTransform. „Microsoft.gradient“ (startColorStr = '# 3f9fe3', EndColorStr = '# white'); / * IE6 – IE9 * / }

Rotacija

Kodas ką nors pasukti:

.box_rotate {-moz-transformuoti: pasukti (7,5 laipsnio); / * FF3.5 + * / -o-transformacija: pasukti (7,5 laipsnio); / * Opera 10,5 * / -webkit-transformuoti: pasukti (7,5 laipsnio); / * „Saf3.1 +“, „Chrome“ * / -ms-transformuoti: pasukti (7,5 laipsnio); / * IE9 * / transformuoti: pasukti (7,5 laipsnio); filtras: progid: DXImageTransform. „Microsoft“. Matrica (/ * IE6 – IE9 * / M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, sizingMetodas = 'automatinis išplėtimas'); priartinimas: 1; }

Animacija

Jums reikės tokio pereinamojo kodo į bet kurį elementą, kurį norite pakeisti. Taip pat turėsite naudoti kai kurias pseudo CSS klases (pvz.: užveskite pelės žymeklį, kad pakeistumėte visas savybes, kurias norite animuoti, pvz., Spalvą, dydį ar pasukimą)

.box_transition {-moz-üleminek: visi 0.5s palengvina; / * FF4 + * / -o-perėjimas: visi 0.5s palengvina; / * Opera 10.5 ir naujesnės versijos * / -Webkit-perėjimas: visi 0.5s palengvina; / * „Saf3.2 +“, „Chrome“ * / „-ms“ perėjimas: visi 0,5 sek. / * IE10? * / perėjimas: visi 0.5s palengvina; } 

Kryžminių naršyklių nesuderinamumas

Nors dauguma šiuolaikinių naršyklių tam tikru būdu palaiko visą CSS3, kai kurioms vis tiek reikia šiek tiek kitokio kodo ar įsilaužimų, kad ji veiktų kartu su konkrečiu standarto įgyvendinimu. Pvz., Aukščiau esančiame kode matysite daug „moz-“ arba „webkit“ egzempliorių, einančių prieš kai kurias CSS ypatybes, susijusias arba su „Mozilla“, arba su „Webkit“ naršyklėmis. Parašyti šias papildomas eilutes gali būti skausmas, todėl patikrinkite css3 generatorius kad parašytum juos tau.

Išvada

Žiniatinklis taps dar daug įdomesnis naudojant naujus CSS3 ir HTML5 plėtinius. Suprantama, pamatysime dar vieną mirksinčio teksto šuolį ir aukštą užgaidų santykį su realiu turiniu (kaip tai darėme tada, kai Animuoti GIF pirmiausia buvo „surasti“), tačiau ilgainiui išmoksime naudoti CSS3 įrankius įdomesniam žiniatinkliui kurti. sąsajos. Ei, visada galite viską išjungti!

Jei pats esate dizaineris ar žiniatinklio kūrėjas, atminkite, kad CSS3 niekada neturėtų būti vienintelė galimybė. Jei jūsų svetainė neveiks be CSS3, neteisingai naudojote ją. CSS turėtų būti naudojama siekiant pagerinti patirtį, o ne programos funkcionalumą.