Share
Sigur, toți suntem familiarizați cu frontierele. Există ceva nou care ar putea fi introdus? Pun pariu că în acest articol sunt destul de puține lucruri despre care nu știai niciodată!
Nu numai că CSS3 poate fi folosit pentru a crea colțuri rotunjite, dar și CSS-ul simplu poate fi înfrânt în afișarea unor forme personalizate. Asta e corect; în trecut, înainte ca aceste tehnici să fie descoperite, s-ar fi putut recurge la utilizarea unor imagini de fundal absolut poziționate pentru a afișa cercuri sau săgeți. Din fericire - pe măsură ce luăm încă un pas mai departe de Photoshop - acest lucru nu mai este cazul.
Probabil sunteți familiarizați cu utilizarea cea mai de bază a frontierelor.
frontieră: 1px solid negru;
Codul de mai sus se va aplica a 1px cu un element. Pur si simplu; dar putem modifica și sintaxa un pic.
lățimea latimei: grosime; stilul frontal: solid; frontieră-culoare: negru;
În plus față de trecerea unei anumite valori la lățimea graniței, trei cuvinte cheie pot fi utilizate alternativ: subţire, mediu, și gros.
Deși ar putea părea inițial inutil să se folosească vreodată scriere obişnuită există o multitudine de cazuri când este avantajos, cum ar fi atunci când trebuie să actualizați un aspect al unei frontiere atunci când apare un eveniment desemnat.
Poate că trebuie să modificați culoarea unei margini atunci când utilizatorul se deplasează peste un anumit element. Utilizarea formularului de sintagmă ar necesita repetarea valorilor pixelilor.
.cutie graniță: 1 pix solid roșu; .box: hover border: 1px solid green;
O abordare mai elegantă și mai uscată ar fi să actualizăm în mod specific border-color proprietate.
.cutie graniță: 1 pix solid roșu; .box: hover border-color: verde;
În plus, așa cum veți găsi în curând, asta scriere obişnuită tehnica este utilă atunci când creați forme personalizate cu CSS.
border-radius este copilul de aur al CSS3 - prima proprietate nouă pentru a obține o utilizare pe scară largă în comunitate. Ceea ce se traduce este că, cu excepția Internet Explorer 8 și mai jos, toate browserele pot afișa colțuri rotunjite.
Anterior, a fost necesar să se utilizeze prefixele furnizorilor atât pentru Webkit, cât și pentru Mozilla, pentru ca stilul să fie aplicat corect.
-webkit-border-radius: 10px; -moz-border-radius: 10px; raza de graniță: 10 pixeli;
Aceste zile, cu toate acestea, putem tăia versiuni furnizor fără griji, și pur și simplu stick cu formularul oficial: border-radius.
După cum se poate aștepta, putem specifica și valori personalizate pentru fiecare parte a unei casete.
raza de sus-dreapta-stânga: 20px; raza de sus-dreapta-dreapta: 0; raza de jos-dreapta-dreapta: 30px; raza de la extremitatea stanga-stanga: 0;
În codul de mai sus, setarea border-top-dreapta-rază și border-bottom-stânga-rază la zero ar fi superfluă, cu excepția cazului în care elementul moștenește valori care trebuie să fie resetate.
Mai mult ca margine sau umplutură, aceste setări pot fi condensate într-o singură proprietate, dacă este necesar.
/ * sus stânga, dreapta sus, dreapta jos, partea din stânga jos * / raza de margine: 20px 0 30px 0;
Ca un exemplu (și ca designeri web asa de deseori), forma unei lamai poate fi reprodusa cu CSS si border-radius proprietăți, cum ar fi:
.lămâie lățime: 200px; înălțime: 200px; fundal: # F5F240; frontieră: 1px solid # F0D900; raza de graniță: 10px 150px 30px 150px;
Mulți designeri se bucură ferm de cunoștințele prezentate până acum în acest capitol; totuși, există câteva moduri în care putem să-l împingem mai departe!
Există o varietate de tehnici la care ne putem referi, atunci când avem sarcini de a aplica mai multe frontiere unui element.
In timp ce solid, punctată, și punctat sunt cele mai frecvente valori pentru Stil de frontieră proprietate, există și câteva altele pe care le putem folosi, inclusiv canelură și creastă.
margine: 20px groove # e3e3e3;
Sau, cu forma lungă:
culoarea frontală: # e3e3e3; lățimea frontală: 20px; stil de frontieră: groove;
Deși acest lucru este cu siguranță util, a creastă sau canelură efectul nu este într-adevăr frontiere multiple.
Cea mai populară tehnică pentru crearea a două frontiere este de a profita de contur proprietate.
.cutie frontieră: 5px solid # 292929; contur: 5px solid # e3e3e3;
Această metodă funcționează minunat, însă este limitată la două granițe. Dacă trebuie să creați un efect stratificat, gradient-esque, o abordare diferită va fi necesară.
Cand contur tehnica nu este suficientă, o abordare alternativă este de a profita de :inainte de și :după pseudo elemente și să aplice orice limite suplimentare necesare conținutului generat.
.cutie width: 200px; înălțime: 200px; fundal: # e3e3e3; poziție: relativă; frontieră: verde 10px; / * Creați două cutii cu aceeași lățime a containerului * / .box: după, .box: înainte de content: "; position: absolute; top: 0; left: 0; bottom: 0; right: 0; .box: după border: 5px solid red; contur: 5px galben solid; .box: înainte de border: 10px solid blue;
Probabil aceasta nu este cea mai elegantă abordare, dar cu siguranță își obține slujba. Un avertisment este că este ușor să confundăm ordinea în care vor fi aplicate culorile de frontieră. Un anumit nivel de "ghici și verificare" este adesea necesar pentru a aplica secvența corectă.
copii misto mod de a crea un număr infinit de frontiere este de a profita de răspândire parametru în box-shadow Proprietatea CSS3.
.cutie graniță: 5px roșu solid; box-shadow: 0 0 0 5px verde, 0 0 0 10px galben, 0 0 0 15px portocaliu;
În acest caz, suntem inteligenți și folosim box-shadow într-un mod care nu ar fi fost neapărat intenționat atunci când specificația a fost scrisă inițial.
Prin setarea X, y, și estompa componente pentru 0, putem folosi în schimb răspândire pentru a crea frontiere solide în locațiile dorite. pentru că box-shadows pot fi stivuite, prin utilizarea unei virgule, numărul de nivele posibile este infinit.
Această tehnică se degradează grațios destul de frumos. În browserele mai vechi, care nu recunosc box-shadow proprietate, aceasta va face pur și simplu roșu unic 5px frontieră.
Rețineți: desenele nu trebuie să fie identice în toate browserele. Scrieți CSS-ul pentru cele mai moderne browsere și apoi puneți la dispoziție opțiuni adecvate, în consecință.
În plus față de trecerea unei singure valori la border-radius, putem oferi alternativ două - separate de a / - pentru a specifica valori unice pentru razele orizontale și verticale.
De exemplu…
raza de graniță: 50px / 100px; / * raza orizontală, raza verticală * /
… este echivalent cu:
raza de sus-dreapta-stânga: 50px 100px; raza de sus-dreapta-dreapta: 50px 100px; raza de jos-dreapta-dreapta: 50px 100px; raza de fund - fund - stânga: 50px 100px;
Această tehnică este utilă în special atunci când trebuie să imitați o curbă subtilă, de lungă durată, mai degrabă decât un colț rotund generic. De exemplu, următorul cod ne permite să ne despărțim ușor de o formă pătrată, rezultând mai mult un efect curbat, similar hârtiei.
.cutie width: 200px; înălțime: 200px; fundal: # 666; raza de pe raza de sus-stanga: 15m 1em; raza de jos-dreapta-dreapta: 15m 1em;
Poate că utilizarea cea mai neatestată a granițelor este atunci când acestea sunt aplicate inteligent elementelor care au o lățime și o înălțime zero. Confuză, nu? Să vedem o demonstrație.
Pentru următoarele câteva exemple, presupuneți următorul marcaj ...
... și următoarele baza Coafura:
.cutie width: 200px; înălțime: 200px; fundal: negru;
Exemplul cel mai frecvent menționat, atunci când se demonstrează modul în care formele CSS pot fi utilizate într-un proiect, este să creați săgeata obligatorie.
Cheia pentru a înțelege modul în care o săgeată ar putea fi formată cu CSS este de a stabili un unic border-color la fiecare parte, apoi reduceți ambele lăţime și înălţime valori pentru containerul 0.
Presupunând a div cu o clasă de săgeată ca recipient:
.săgeată lățime: 0; înălțime: 0; vârf frontal: 100 de culori roșii solide; frontieră-dreapta: verde 100px; margine de fund: fundal albastru de 100 pixeli; frontieră-stânga: 100px galben solid;
După cum sa demonstrat la începutul acestui capitol, ar fi o sintaxă mai curată nu utilizați versiunea completă cu mână scurtă:
.săgeată lățime: 0; înălțime: 0; frontieră: 100px solid; frontieră-top-culoare: roșu; frontieră-dreapta-culoare: verde; marginea de jos a culorii: albastru; frontieră-stânga-culoare: galben;
Putem chiar reduce acest lucru, grupând valorile culorii.
.săgeată lățime: 0; înălțime: 0; frontieră: 100px solid; frontieră-culoare: roșu verde albastru galben;
Interesant, nu? Cu toate acestea, are sens perfect atunci când facem un pas înapoi. Aceasta este singura modalitate posibilă de aliniere a culorilor, presupunând a lăţime și înălţime de zero pentru container. Acum, dacă am seta toate culorile de frontieră la transparente, cu excepția laturii albastre?
.săgeată lățime: 0; înălțime: 0; frontieră: 100px solid; marginea de jos a culorii: albastru;
Excelent! Dar nu pare prea semantic să creezi un .săgeată div, toate în scopul de a adăuga o săgeată la pagină. În schimb, pseudo-elementele pot fi folosite pentru a aplica săgeata după sau înainte de elementul asociat.
Pentru a crea o bubble de vorbire de 100% CSS, începem cu marcarea.
bună!
Apoi, unii baza stilul ar trebui aplicat.
.vorbă-balon poziție: relativă; fundal-culoare: # 292929; lățime: 200px; înălțime: 150px; linia-înălțime: 150px; / * centru vertical * / culoare: alb; text-align: centru;
Săgeata va fi aplicată folosind după psuedo element.
.vorbă-bubble: după conținut: ";
:inainte deși:dupăelementele psuedo pot fi folosite pentru a introduce conținutul generat înainte sau după conținutul unui element.
În acest moment, este pur și simplu o chestiune de reproducere a săgeții și poziționarea ei în poziția corectă. Începem prin poziționarea absolută a conținutului, resetarea acestuia lăţime și înălţime, și aplicarea culorilor de frontieră.
.balon de vorbire: după conținut: "; poziția: absolută; lățimea: 0; înălțimea: 0; granița: 10px solid; culoarea frontală: roșu verde albastru galben;
Pentru că știm că vrem ca săgeata să fie îndreptată în jos, imaginea de mai sus demonstrează că orice altceva decât marginea roșie (sau de sus) ar trebui fie omisă, fie setată la transparență.
.balon de difuzare: după conținut: "; poziția: absolută; lățimea: 0; înălțimea: 0; granița: 10px solid;
La crearea formelor CSS, pentru că nu putem folosi lăţime proprietate pentru a specifica cât de largă ar trebui să fie săgeata, lățimea graniței proprietate ar trebui să fie folosit în loc. În acest caz, săgeata ar trebui să fie puțin mai mare; asa ca lățimea graniței poate fi mărită la 15px. De asemenea, vom poziționa săgeata în partea de jos și în centrul containerului, utilizând butonul top și stânga proprietăți, respectiv.
.balon de vorbire: după conținut: "; poziția: absolută; lățimea: 0; înălțimea: 0; granița: 15px solid;
Aproape acolo; ultimul pas este să actualizați culoarea săgeții pentru a fi la fel ca fundalul containerului. De asemenea, poziționarea trebuie modificată pentru a ține cont de lățimea granițelor (15px). În timp ce suntem aici, vom aplica și o subtilă border-radius pentru a face containerul să pară mai degrabă asemănător bulelor.
.vorbă-bubble / * ... alte stiluri * / border-radius: 10px; .speech-bubble: după conținut: "; poziția: absolută; lățimea: 0; înălțimea: 0; frontiera: 15px solid; stânga: -15px; / * ajustați lățimea marginii * /
Nu-i rău, ah? Rezumați acest cod departe de câteva clase reutilizabile și sunteți bine să mergeți pentru toate proiectele viitoare.
/ * Utilizarea bulelor de vorbire: Aplicați o clasă de .speech-bubble și .speech-bubble-DIRECTIONbună* / .speech-bubble poziție: relativă; fundal-culoare: # 292929; lățime: 200px; înălțime: 150px; linia-înălțime: 150px; / * centru vertical * / culoare: alb; text-align: centru; raza de graniță: 10 pixeli; font-family: sans-serif; .popescu-bubble: după content: "; position: absolute; width: 0; height: 0; border; 15px solid; / culoare: # 292929; stânga: 50%; partea de jos: 100%; margin-stânga: -15px; .speech-bubble-right: ; margin-top: -15px; .speech-bubble-bottom: după border-top-color: # 292929; top: 100%; stânga: după border-right-color: # 292929; partea superioară: 50%; dreapta: 100%; margin-top: -15px;
Un dezavantaj pentru utilizare inaltimea liniei pentru a centra pe verticală textul este că ești limitat la o singură linie. În cazul în care textul necesită două sau mai multe linii, fiecare înălțime a liniei va fi mult prea mare. O soluție inteligentă este de a stabili a afişa de masa la balonul de vorbire și a afişa de masă de celule la paragraful care înfășoară textul. Aceasta ne permite apoi să aliniem textul la mijloc, în consecință.
Textul vine aici.
Apoi, CSS modificat.
.vorbă-bubble / * alte stiluri * / display: table; .speech-bubble p display: table-cell; vertical-aliniere: mijloc;
Dacă se face referire la
afișare: tabeladu-ți înapoi amintirile teribile ale modelelor de modă veche, de masă, nu-ți face griji. Aceste proprietăți se referă doar la stilul în care ar trebui să fie afișat un element.
Nu ne limităm la triunghiuri; CSS este capabil să producă tot felul de forme - chiar inimile și semnele biohazard!
.biohazard lățime: 0; înălțime: 0; frontieră: 60px solid; raza de graniță: 50%; frontieră-top-culoare: negru; frontieră-fund color: negru; frontieră-stânga-culoare: galben; frontal-dreapta-culoare: galben;
Deși este adevărat că simplul frontieră: 1px solid negru sintaxa merge un drum lung, dacă suntem inteligenți, putem crea o varietate de efecte utile, icoane și forme. Cine ar fi crezut că granițele ar putea fi atât de puternice? Cheia este să ne amintim că stilul pentru forme comune sau bule de vorbire ar trebui să fie creat doar o singură dată și apoi abstractizat la clasele de utilități pentru utilizare ulterioară.
Accentsconagua