Share
V-ați întrebat vreodată cum a fost realizat un anumit efect într-un design web și, după ce ați făcut mai multe clicuri, ați descoperit că autorul a adăugat mai multe umbre subtile, granițe, înclinări etc? În trecut, acest lucru a fost realizat pur și simplu prin împărțirea unei imagini și stabilirea acesteia ca fundal al unui element. Din fericire, cu CSS3, ne putem oferi mult mai multa flexibilitate. Acum, în timp ce codul pentru un astfel de efect simplu ar putea fi un pic obositor, merită bine, și asta vom analiza în sfatul scris de astăzi!
Mai degrabă urmăriți acest screencast pe Screenr.com?
Este uimitor faptul că ceva simplu acest lucru necesită atât de mult cod, dar nu este prea dur și poate fi cu ușurință abstracționat la un fragment pentru utilizare ulterioară.
Pentru ca proiectul nostru să fie cât se poate de tăiat și lipit, lucrăm doar cu o div divizată. Creați un nou fișier index.html și lipiți în următoarele:
Apoi, vom adăuga un stil de bază pentru elementul corpului. Aceasta este doar pentru prezentare și poate fi ușor eliminată. În etichetele de stil din antetul dvs., adăugați:
/ Nimic special aici. Doar pânza. * / corp lățime: 500px; margine: 60px auto 0; fundal: # 666;
Acum, vom crea caseta noastră, furnizând o lățime și înălțime.
#box / * Doar o cutie * / lățime: 500px; înălțime: 500px;
Ar trebui să știm cu toții despre colțurile rotunjite ale CSS. Să mergem mai departe și să implementăm asta.
/ * Colțuri rotunjite * / -moz-border-radius: 3px; -webkit-border-radius: 3px; raza de graniță: 3 pixeli;
Rețineți că furnizăm și spec. Finală, de "rază de graniță", pe lângă versiunile Mozilla și Webkit.
Mozilla oferă o proprietate la îndemână, numită "-moz-border-* -color". Acest lucru ne permite să setăm un număr infinit de culori pentru o margine. Pentru a obține un efect subtil de "dublu frontieră", să implementăm această proprietate.
/ * Setați o margine de bază și o culoare * / margine: 2 pix solid alb; / * Culori multiple de margine în gecko * / -moz-border-top-colors: # 292929 alb; -moz-border-right-colors: # 292929 alb; -moz-border-bottom-colors: # 292929 alb; -moz-border-left-colors: # 292929 alb;
Rețineți modul în care numărul de culori pe care le furnizăm este același cu lățimea marginii pe care am setat-o la început (2 pixeli). De asemenea, nu introduceți virgule după fiecare valoare hexagonală; Am făcut greșeala asta la început!
Din câte știu, webkit nu acceptă în prezent culorile de frontieră, deși este posibil să greșesc. Dacă sunt, vă rugăm să lăsați un comentariu și să-mi spuneți! Oricum, pentru a imita acest efect cât mai bine în Safari și Chrome, vom folosi umbra de box.
/ * Compensați pentru Webkit. Nu la fel de frumos, dar funcționează. * / -webkit-box-shadow: 0 -1px 2px # 292929;
Rețineți că valorile furnizate se referă la culoarea X offset, Y offset, blur și, respectiv, culoarea umbrelor. Prin trecerea -1px ca Y offset, putem împinge umbra în sus.
Ultimul pas este de a furniza un gradient subtil de fond pentru cutia noastră. Cu toate acestea, trebuie să furnizăm o culoare solidă pentru browserele care nu acceptă gradienți CSS.
/ * Context gradient subtil, cu redresare la culoarea solidă * / fundal: # e3e3e3; fundal: -moz-linear-gradient (sus, # a4a4a4, # e3e3e3); fundal: -webkit-gradient (liniar, partea stângă sus, partea stângă jos, de la (# a4a4a4), la (# e3e3e3));
Din păcate, Mozilla și Webkit nu sunt destul de de acord cu sintaxa pentru gradienti, ceea ce face procesul iritant. Dacă este prea confuz, puteți utiliza un nou serviciu numit CSS3 Vă rugăm să generați automat sintaxa fiecărui browser; este foarte tare!
Este uimitor; Privind peste imaginea noastră finală, e greu de spus ce am făcut! Dar acesta este un lucru bun; subtilitatea este esențială în toate aspectele designului. Vă mulțumim pentru citire / vizionare!
/ Nimic special aici. Doar pânza. * / corp lățime: 500px; margine: 60px auto 0; fundal: # 666; #box / * Doar o cutie * / lățime: 500px; înălțime: 500px; / * Colțuri rotunjite * / -moz-border-radius: 3px; -webkit-border-radius: 3px; raza de graniță: 3 pixeli; margine: 2 pix solid alb; / * Culori multiple de margine în gecko * / -moz-border-top-colors: # 292929 alb; -moz-border-right-colors: # 292929 alb; -moz-border-bottom-colors: # 292929 alb; -moz-border-left-colors: # 292929 alb; / * Compensați pentru Webkit. Nu la fel de frumos, dar funcționează. * / -webkit-box-shadow: 0 -1px 2px # 292929; / * Context gradient subtil, cu redresare la culoarea solidă * / fundal: # e3e3e3; fundal: -moz-linear-gradient (sus, # a4a4a4, # e3e3e3); fundal: -webkit-gradient (liniar, partea stângă sus, partea stângă jos, de la (# a4a4a4), la (# e3e3e3));
Accentsconagua