5 Efecte CSS3 cool despre care veți vedea mai multe

Publicitate

CSS3 (combinat cu puterea HTML5) este susținut rapid de toate browserele majore (citiți - orice, cu excepția Internet Explorer), așa că eu M-am gândit acum că ar fi un moment bun pentru a vedea unele dintre efectele CSS mișto pe care le putem obține folosind puterea 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.

În primul rând - Ce este CSS?

Dacă citiți acest articol pentru că sunteți intrigați, dar nu aveți idee ce înseamnă CSS, permiteți-mi să explic rapid. CSS este limbajul de codare folosit pentru decorarea paginilor web. Inseamna Cascading Style Ssalut, și, practic, adaugă stil și fler la un site. Cu siguranță, site-urile web pot fi citite fără CSS, dar sunt hidoase la fel ca toate site-urile web în 1995. În timp ce fișierele HTML descriu structura și conținutul textual al unei pagini, CSS le face să fie afișate în modul de proiectare intenționat și determinați totul de la aspectul paginii, dimensiunea textului și culorile și acum o serie de efecte fanteziste odată cu introducerea de CSS3.

În trecut, obținerea aceluiași tip de efecte ca cele descrise în acest articol ar fi însemnat descărcarea de CSS voluminoase sau chiar grafice mai mari. Acum, CSS poate descrie doar browserului dvs. cum ar dori să arate pagina, iar browserul se va ocupa de procesare. Este ca și cum vă voi oferi planurile de a vă construi propria casă în loc să vă vând întreaga casă - este mult mai ieftin!

Colturi rotunjite

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

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

Umbra textului

Iată codul pentru unele umbre text:

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

gradienţii

Iată codul pentru gradienții CSS:

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

Rotație

Aici codul pentru a roti ceva:

.box_rotate {-moz-transform: rotire (7,5deg); / * FF3.5 + * / -o-transform: rotire (7.5deg); / * Opera 10.5 * / -webkit-transform: rotire (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: rotire (7.5deg); / * IE9 * / transform: rotire (7.5deg); filtru: progid: DXImageTransform. Microsoft. Matrice (/ * IE6 – IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.9914448613738104, sizingMethod = 'auto expand'); zoom: 1; }

Animaţie

Veți avea nevoie de codul de tranziție ca acesta pentru orice element pe care doriți să îl modificați. Va trebui, de asemenea, să utilizați unele clase pseudo CSS (cum ar fi: pentru a schimba orice proprietăți pe care doriți să le animați, cum ar fi culoarea, dimensiunea sau rotirea)

.box_transition {-moz-tranziție: toate 0,5s ușurință; / * FF4 + * / -o-tranziție: toate ușurințele de 0,5 secunde; / * Opera 10.5+ * / -webkit-tranziție: toate ușurințele de 0,5 s; / * Saf3.2 +, Chrome * / -ms-Tranziție: toate ușurințele 0,5 s; / * IE10? * / tranziție: toate ușurințele de 0,5 s; } 

Incompatibilități încărcate în browser

Deși majoritatea browserelor moderne acceptă toate CSS3 în unele moduri, unele necesită încă unele coduri sau hacks ușor diferite pentru ca acesta să funcționeze cu implementarea lor particulară a standardului. De exemplu, în codul de mai sus, veți vedea multe cazuri de -moz- sau -webkit- care urmează unele proprietăți CSS, care se referă la browserele bazate pe Mozilla sau Webkit. Totuși, scrierea acestor linii suplimentare poate fi o durere generator css3 să le scrii pentru tine.

Concluzie

Web-ul va deveni mult mai interesant cu noile extensii CSS3 și HTML5. Acordat, vom vedea un alt impuls de text intermitent și un raport ridicat de whiz-bang la conținut real (la fel cum am făcut atunci când GIF-urile animate au fost „descoperite” pentru prima dată, dar pe termen lung vom învăța cum să folosim instrumentele CSS3 pentru a face un web mai interesant interfețe. Și hei, poți oricând să o dezactivezi!

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