5 efecte cool CSS3 veti vedea mai multe

CSS3 (combinat cu puterea HTML5) este susținut rapid de toate browserele majore (citiți - orice altceva decât Internet Explorer), așa că am crezut că acum ar fi un moment bun pentru a vedea unele dintre efectele CSS cool pe care le putem obține folosind puterea a browserului și un mic cod CSS. Ar trebui să puteți vedea toate efectele demonstrate în acest articol dacă utilizați cel mai recent browser Chrome, Safari sau Firefox.

Prima - Ce este CSS?

Dacă citiți acest articol pentru că sunteți intrigat, dar nu aveți nicio idee despre ce înseamnă CSS, să vă explic rapid. CSS este limbajul de codare folosit pentru a decora paginile web. Inseamna Cascading Style Shee, și de fapt doar adaugă stil și fler la un site. Site-urile web sunt cu siguranță citibile fără CSS-ul lor, dar sunt hideous la fel cum toate site-urile au fost înapoi în 1995. În timp ce fișierele HTML descriu structura și conținutul textual al unei pagini, CSS le face afișate în modul în care designerul intenționează și determină totul de la aspectul paginii, mărimea textului și culorile, iar acum există o serie de efecte fanteziste cu introducerea CSS3.

În trecut, realizarea acelorași efecte ca cele descrise în acest articol ar fi însemnat descărcarea de grafice CSS voluminoase sau chiar mai mari. Acum, CSS poate descrie în browser-ul dvs. modul în care ar dori ca pagina să arate și browserul va ocupa procesarea. Îmi place să-ți dau planurile de a-ți construi propria casă, în loc să îți vând întreaga casă - este semnificativ mai ieftină!

Colturi rotunjite

Internetul a devenit treptat "roundier", dar acum acest lucru este solidificat în CSS3. Aruncați o privire la cutia din jurul acestui paragraf. Nu este o imagine - încercați să faceți clic dreapta pe ea pentru a vedea. CSS pur!

Codul pentru colțurile rotunjite este foarte ușor:

.box_round -moz-border-radius: 20px; / * FF1 + * / -webkit-border-radius: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / raza de graniță: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /

Text Shadow

Textul poate uneori să arate foarte dur, dar o mică umbră chiar ajută lucrurile. Verificați umbra pe care am aplicat-o la acest paragraf.

Iată codul pentru unele umbre de text:

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

gradienţii

Nu mai aveți culori plane sau imagini gradient de fundal, acum puteți crea un gradient rece folosind doar CSS. Din păcate, aveți nevoie de câteva linii din cauza problemelor curente de incompatibilitate dintre browsere, dar puteți utiliza instrumentul pe care îl voi descrie mai târziu pentru a le genera automat.

Iată codul pentru gradientele CSS:

.box_gradient fundal-culoare: # 3f9fe3; fundal-imagine: -moz-linear-gradient (top, # 3f9fe3, #white); / * FF3.6 * / fundal: -moz-linear-gradient (top, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / background-image: -ms-gradient linear (top, # 3f9fe3, #white); / * IE10 * / fundal-imagine: -o-linear-gradient (top, # 3f9fe3, #white); / * Opera 11.10+ * / background-image: -webkit-gradient (liniar, stânga sus, stânga jos, de la (# 3f9fe3), la (# alb)); / * Saf4 +, Chrome * / fundal-imagine: -webkit-gradient linear (top, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / fundal-imagine: gradient liniar (top, # 3f9fe3, #white); filtru: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = "# alb"); / * IE6-IE9 * /

Rotație

Este greu să-ți imaginezi o utilizare în acest sens din punct de vedere al textului, dar poate adăuga câteva elemente de design drăguțe atunci când folosești imagini, de exemplu. Din nou, observați că, deși acest paragraf a fost rotit, puteți selecta și interacționa cu acesta, deoarece acesta rămâne un text obișnuit.

Aici codul de rotire ceva:

 .box_rotate -moz-transform: rotire (7,5deg); / * FF3.5 + * / -o-transform: rotiți (7.5deg); / * Opera 10.5 * / -webkit-transform: rotiți (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: rotire (7.5deg); / * IE9 * / transforma: roti (7,5deg); filtru: progid: DXImageTransform.Microsoft.Matrix (/ * IE6-IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.9914448613738104, sizingMethod = "extindere automată"); zoom: 1;  

Animaţie

Oh da, l-am salvat pe cel mai bun "până la urmă. CSS3 introduce diferite forme de animație pentru orice număr de efecte CSS cool descrise. În acest paragraf, am definit proprietatea de tranziție așa cum este prezentată mai jos, precum și o culoare simplă de fundal și o rotație când plasați cursorul peste ea. Dacă nu sunteți deja, plasați cursorul peste acest paragraf de text pentru a vedea efectul în acțiune. Puteți anima ceva în totalitate!

Veți avea nevoie de codul de tranziție ca acesta pentru orice element pe care doriți să îl modificați. De asemenea, va trebui să utilizați câteva clase pseudo CSS (cum ar fi: mutați mouse-ul pentru a schimba orice proprietăți pe care doriți să le animați, cum ar fi culoarea, mărimea sau rotația)

 .box_transition -moz-tranziție: toate 0.5s ușurință-out; / * FF4 + * / -o-tranziție: toate 0.5s ușurință-out; / * Opera 10.5+ * / -webkit-tranziție: toate 0.5s ușurință-out; / * Saf3.2 +, Chrome * / -ms-transition: toate 0.5s ușurință-out; / * IE10? * / tranziție: toate 0.5s ușurință-out;  

Incompatibilități încrucișate în browser

Deși cele mai moderne browsere suportă toate CSS3 în unele moduri, unele necesită încă un cod sau hacks ușor diferite pentru a face să funcționeze cu implementarea lor specifică a standardului. În codul de mai sus, de exemplu, veți vedea multe exemple de -moz- sau -webkit- înaintea unor proprietăți CSS care se referă fie la browserele bazate pe Mozilla, fie la browserele bazate pe Webkit. Scrierea acestor linii suplimentare poate fi o durere deși, deci verificați generatorul css3 pentru a le scrie pentru dvs..

Concluzie

Web-ul va deveni mult mai interesant cu noile extensii CSS3 și HTML5. Acordat, vom vedea o altă mișcare a textului intermitent și o rată mare de whiz-bang la conținut real (la fel cum am făcut când au fost primele animate GIF-uri “descoperit”), dar pe termen lung vom învăța cum să folosim instrumentele CSS3 pentru a face interfețe web mai interesante. Și, hei, poți oricând să o dezactivezi!

Dacă dvs. sunteți un designer sau un dezvoltator web, amintiți-vă că CSS3 nu ar trebui să fie singura opțiune. Dacă site-ul dvs. nu va funcționa fără CSS3, nu l-ați utilizat corect. CSS ar trebui să fie utilizat pentru a îmbunătăți experiența, nu funcționalitatea programului.

Explorați mai multe despre: HTML, HTML5, Programare, Dezvoltare Web.