Realizarea unor linii interesante pe paginile web cu etichete HR
Dacă aveți nevoie să adăugați linii orizontale, de tip separator în site-urile dvs., aveți câteva opțiuni. Puteți adăuga fișiere imagine reale ale acelor linii pe pagina dvs., dar acest lucru ar necesita ca browserul dvs. să recupereze și să încarce aceste fișiere, ceea ce ar putea avea un impact negativ asupra performanței site-ului.
Ați putea folosi proprietatea de frontieră CSS pentru a adăuga margini care acționează ca linii fie în partea de sus, fie în partea de jos a unui element, creând efectiv linia de separare.
În cele din urmă, puteți utiliza elementul HTML pentru regula orizontală -
Elementul de regulă orizontală
Dacă ați pus vreodată un element pe o pagină web, probabil că ați descoperit că modul implicit de afișare a acestor linii nu este ideal. Aceasta înseamnă că trebuie să vă întoarceți la CSS pentru a ajusta aspectul vizual al acestor elemente pentru a fi în concordanță cu modul în care doriți ca site-ul dvs. să arate.
O etichetă HR de bază este afișată în modul în care browserul dorește să o afișeze. Browserele moderne prezintă în mod obișnuit etichete HR neprotejate cu o lățime de 100%, o înălțime de 2px și o margine 3D în negru pentru a crea linia.
Iată un exemplu de element HR standard sau puteți vedea în această imagine modul în care un HR unstyled arată în browserele moderne.
Lățimea și înălțimea sunt consistente între browsere
Singurele stiluri care sunt compatibile între browserele web sunt lățimea și stilurile. Acestea definesc cât de mare va fi linia. Dacă nu definiți lățimea și înălțimea, lățimea implicită este 100%, iar înălțimea implicită este 2px.
În acest exemplu, lățimea este de 50% din elementul părinte (notați aceste exemple de mai jos includ toate stilurile inline. Într-un set de producție, aceste stiluri ar fi de fapt scrise într-o foaie de stil externă pentru a fi ușor de gestionat în toate paginile dvs.):
style = "width: 50%;">
Și în acest exemplu, înălțimea este 2EM:
style = "înălțime: 2em;">
Schimbarea frontierelor poate fi provocatoare
În browserele moderne, browserul construiește linia prin ajustarea marginii. Deci, dacă eliminați marginea cu proprietatea stilului, linia va dispărea pe pagină. După cum puteți vedea (bine, nu veți vedea nimic, deoarece liniile vor fi invizibile) în acest exemplu:
style = "border: none;">
Ajustarea dimensiunii marginii, a culorii și a stilului va face ca linia să arate diferit și are același efect în toate browserele moderne. De exemplu, în această demonstrație, granița este roșie, întreruptă și lățime 1px:
style = "border: 1px dashed # 000;">
Dar dacă schimbați marginea și înălțimea, stilurile arată puțin diferit în browserele învechite decât în browserele moderne. După cum puteți vedea în acest exemplu, dacă îl vedeți în IE7 și mai jos (un browser care este în mod nemaipomenit de depășit și nu mai este suportat de Microsoft), există o linie internă înclinată care nu se afișează în celelalte browsere (inclusiv IE8 și în sus) :
stil = "înălțime: 1.5cm; lățime: 25cm; margine: 1px solid # 000;">
Aceste browsere antichitate nu sunt cu adevărat o preocupare în designul web astăzi, deoarece au fost în mare parte înlocuite cu opțiuni mai moderne.
Faceți o linie decorativă cu o imagine de fundal
În locul unei culori, puteți defini o imagine de fundal pentru HR astfel încât să pară exact așa cum doriți, dar să fie afișată în mod semantic în marcajul dvs.
În acest exemplu am folosit o imagine care are trei linii ondulate. Setând-o ca imagine de fundal fără a se repeta, creează o pauză în conținutul care arată aproape asemănător cu cel prezentat în cărți:
style = "height: 20px; background: #fff url (aa010307.gif) centru de defilare fără repetiție; border: none;">
Transformarea elementelor HR
Cu CSS3, puteți face și liniile dvs. mai interesante. Elementul HR este în mod tradițional o linie orizontală , dar cu proprietatea de transformare CSS, puteți schimba modul în care arată. O transformare preferată a elementului HR este de a schimba rotația.
Puteți roti elementul HR astfel încât acesta să fie doar puțin diagonal:
HR {
-moz-transform: rotiți (10deg);
-webkit-transform: rotire (10deg);
-o-transform: roti (10deg);
-ms-transform: rotire (10deg);
transforma: roti (10deg);
}
Sau puteți roti astfel încât să fie complet vertical:
HR {
-moz-transform: rotire (90deg);
-webkit-transform: rotire (90deg);
-o-transform: rotiți (90deg);
-ms-transform: rotire (90deg);
transformă: rotiți (90deg);
}
Amintiți-vă că acest lucru rotește resursele umane pe baza locației curente din document, astfel încât este posibil să fie necesar să ajustați poziționarea pentru ao obține acolo unde doriți. Nu este recomandat să utilizați acest lucru pentru a adăuga linii verticale la un design, dar este o modalitate de a obține un efect interesant.
Un alt mod de a obține linii pe paginile dvs.
Un lucru pe care o fac unii în loc să folosească elementul HR este să se bazeze pe granițele altor elemente. Dar uneori un HR este mult mai convenabil și mai ușor de utilizat decât încercarea de a înființa granițe. Probele modelului de cutie al anumitor browsere pot face chiar și mai dificilă înființarea unei frontiere.