Share
CSS este un limbaj bine-cunoscut, utilizat pe scară largă pentru a modela site-urile web. Cu versiunea a treia în fabrică, vor fi implementate multe caracteristici de economisire a timpului. Deși numai cele mai moderne browsere susțin în prezent aceste efecte, este încă distractiv să vedem ce este la colț! În acest tutorial vă voi arăta cinci tehnici.
Înainte de a începe cu acest tutorial, să creăm marcajul de bază cu care vom lucra în tutorial.
Pentru xHTML, vom avea nevoie de următoarele elemente div:
Pentru aceasta, xHTML-ul nostru va fi:
O introducere în CSS3; Un Tutorial Nettuts 
În documentul HTML, am creat câteva elemente div, cu codurile de mai sus.
Să creăm rapid un fișier de bază CSS.
corp fundal-culoare: #fff; #wrapper lățime: 100%; înălțime: 100%; div lățime: 300px; înălțime: 300px; margine: 10 pixeli; plutește la stânga; / * restul codului va veni aici, mai târziu * /
După cum puteți vedea, am dat toate tag-urile div o lățime și o înălțime de 300px fiecare. Le-am forțat, de asemenea, să plutească la stânga, lăsându-ne o pagină plină de div.
Poate fi un hassle pentru a crea colțuri rotunjite. În primul rând, trebuie să creați imaginile. Apoi, trebuie să creați mai multe elemente pentru a avea colturi rotunjite setate ca fundaluri. Știți exercițiul.
Această problemă poate fi rezolvată cu ușurință cu CSS3, cu proprietatea numită "border-radius".
Mai întâi vom crea un element div div și vom da o margine neagră.
Granița este acolo pentru că trebuie să "executăm" frontieră-radius proprietate.
Facem acest lucru așa:
#round background-color: # 000; frontieră: 1px solid # 000;
Odată ce ați creat div, actualizați pagina. Ar trebui să vedeți acum o divizie neagră, pătratică, cu o lățime și înălțime de aproximativ 300 de pixeli. Acum, haideți să lucrăm pe colțurile rotunjite. Acest lucru poate fi realizat doar cu două linii de cod.
#round background-color: # 000; frontieră: 1px solid # 000; -moz-border-radius: 10px; -webkit-border-radius: 10px;
După cum puteți vedea, am adăugat două linii aproape identice, singura diferență fiind "-moz" și "-webkit". -moz se referă la Mozilla Firefox, iar Safari / Google Chrome utilizează prefixul -webkit.
Actualizați documentul HTML și veți vedea o imagine rotunjită divizată și netedă. Ei bine, neted ... În Firefox și Safari, da, dar Chrome face o margine ușor pixelată.
Înapoi la codul nostru, "de frontieră-rază"are nevoie de o valoare.Aceasta valoare determină claritatea colțului, cu atât valoarea este mai mare, colțul este mai mare în colț - la fel ca în Photoshop.Din ceea ce știu, nu există o valoare maximă pentru acest element.
Crearea colțurilor tradiționale rotunjite vă poate scurge ziua. Din fericire, CSS3 o rezolvă!
Această proprietate este destul de similară celei anterioare. De asemenea, folosește "raza de graniță", totuși ne vom modifica puțin codul.
O facem astfel:
#indie background-color: # 000; frontieră: 1px solid # 000; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px;
Am adăugat "topright" și "bottomright" în codul nostru; acest lucru se referă la colțul din dreapta sus și jos al elementului div. Cu aceste proprietăți noi, puteți implementa cu ușurință o caracteristică "asemănătoare tab-ului".
Adăugările care trebuie utilizate sunt "topright", "bottomright", "bottomleft" și "topleft".
În prezent, trebuie să scrieți câteva linii de CSS pentru a ajusta opacitatea elementelor (hacks). Încă o dată, CSS 3 simplifică procesul.
Această linie este ușor de reținut, este doar "opacitate: valoare;". Ușurel drept?
Codul nostru va fi:
#opacity background-color: # 000; opacitate: 0,3;
În Photoshop, este o sarcină banală de a crea umbre de picătură. Cu toate acestea, atunci când le implementați în aplicațiile web, probabil că ar trebui să salvați umbra ca o imagine și apoi să o utilizați ca fundal. Nu mai! (Cel puțin pentru browserele moderne.) Din păcate, numai Safari și Chrome suportă această funcție în acest moment.
Codul necesită doar o singură linie, dar este destul de lung și are 4 valori diferite!
-webkit-box-shadow: 3px 5px 10px #ccc;
Pentru prima valoare, am folosit 3px. Aceasta determină orizontală distanța dintre umbra picăturii și elementul div. Mutarea de-a lungul, a doua valoare, 5px, determină vertical distanța dintre umbra și cutie.
Cu toate acestea, există o altă valoare px, 10 pixeli. Aceasta este raza umbrei - care în limbajul englezesc simplu înseamnă estomparea umbrei sau cât de "largă" este gradientul.
În cele din urmă, ultima valoare determină culoarea umbrei. Aceasta înseamnă că umbra nu se limitează doar la tonuri de gri; putem folosi, de asemenea, roșu (# f00) ca valoare, ceea ce face o umbră luminată, roșie.
Pentru codul nostru final, se ajunge la următoarele:
#shadow background-color: #fff; frontieră: 1px solid # 000; -webkit-box-shadow: 3px 5px 10px #ccc;
După cum puteți vedea, am dat divului un fundal alb, o margine neagră și o umbra gri deschis.
Cu cea mai recentă versiune de CSS, este posibilă redimensionarea elementelor. (În prezent funcționează numai în Safari.)
Cu acest cod, este posibil să apară un triunghi mic în colțul din dreapta jos al unui element. Puteți să-l trageți apoi pentru redimensionare. Codul de urmat este încă o dată foarte ușor și necesită doar o singură linie și este susținut de unele elemente mai vechi pe care le-ați putea ști deja. Acestea sunt valori "max-width", "max-height", "min-width" și "min-height".
Codul este după cum urmează:
#resize background-color: #fff; frontieră: 1px solid # 000; redimensionare: ambele; overflow: auto;
În codul în care am folosit două linii suplimentare pentru CSS-ul nostru normal, redimensionați: ambele; și "overflow: auto;". Linia cu depășire este necesară pentru a face lucrul la redimensionare, poate fi orice fel de valoare de "overflow", atâta timp cât este acolo.
Cealaltă linie am folosit este "redimensionare: ambele;". Această linie specifică faptul că elementul poate fi redimensionat în ambele orizontală și vertical directii.
Ce ar trebui să luați din acest articol? În următorii câțiva ani, slujba ta va deveni mai ușoară, paginile web se vor încărca mai repede și vei avea mai mult timp pentru familia ta! Deși nu puteți să vă bazați pe aceste efecte pentru a funcționa în toate browserele încă - nu este absolut nimic în neregulă cu aplicarea unui colț rotunjit la un div într-un browser, și nu celălalt. Luați în considerare un upgrade!
Pentru mai multe informații despre CSS3, puteți vizita http://www.css3.info.
Accentsconagua