Dizajnimi i etiketës HR (Horizontal Rule)

Marrja e linjave interesante në faqet e uebit me HR tags

Nëse keni nevojë të shtoni linja horizontale, ndarëse në faqet e internetit, keni disa mundësi. Ju mund të shtoni fotografi aktuale të imazhit të këtyre rreshtave në faqen tuaj, por kjo do të kërkojë që shfletuesi juaj të rifitojë dhe të ngarkojë ato skedarë, të cilat mund të kenë një ndikim negativ në performancën e faqes.

Ju mund të përdorni pronën kufitare CSS për të shtuar kufijtë që veprojnë si linja ose në krye ose në fund të një elementi, duke krijuar në mënyrë efektive linjën tuaj të ndarësit.

Së fundi, ju mund të përdorni elementin HTML për rregullin horizontal -

Elementi i Rregullave Horizontale

Nëse ndonjëherë keni vënë një element në një faqe interneti, ka gjasa të zbuloni se mënyra e paracaktuar që këto rreshta shfaqen, nuk janë ideale. Kjo do të thotë që ju duhet të ktheheni te CSS për të përshtatur pamjen vizuale të këtyre elementeve për të qenë në përputhje me atë se si dëshironi që faqja juaj të duket.

Një etik bazë HR shfaqet në mënyrën se si shfletuesi dëshiron ta shfaqë atë. Shfletuesit modernë zakonisht shfaqin etiketat HR të palidhura me një gjerësi prej 100%, një lartësi prej 2px dhe një kufi 3D në të zezë për të krijuar linjën.

Këtu është një shembull i një elementi standard HR ose ju mund të shihni në këtë imazh se si një burim i papunësuar i BNJ duket në shfletuesit modernë.

Gjerësia dhe lartësia janë të njëtrajtshme në të gjithë shfletuesit

Stilet e vetme që janë të qëndrueshme në të gjithë shfletuesit web janë gjerësia dhe stilet. Këto përcaktojnë se sa e madhe do të jetë rreshti. Nëse nuk përcaktoni gjerësinë dhe lartësinë, gjerësia e parazgjedhur është 100% dhe lartësia e parazgjedhur është 2px.

Në këtë shembull, gjerësia është 50% e elementit mëmë (vini re se këta shembuj më poshtë përfshijnë të gjitha stilet inline. Në një mjedis prodhimi, këto stile do të shkruheshin në një fletë të jashtme stil për lehtësinë e menaxhimit në të gjitha faqet tuaja):

style = "width: 50%;">

Dhe në këtë shembull lartësia është 2em:

style = "height: 2em;">

Ndryshimi i kufijve mund të jetë sfidues

Në shfletuesit modern, shfletuesi ndërton linjën duke rregulluar kufirin. Pra, nëse e hiqni kufirin me pronën e stilit, vija do të zhduket në faqe. Siç mund ta shihni (mirë, nuk do të shihni asgjë, pasi linjat do të jenë të padukshme) në këtë shembull:

style = "kufiri: asnjë;">

Rregullimi i madhësisë së kufijve, ngjyrës dhe stilit do të bëjë që rreshta të duket ndryshe dhe të ketë efekt të njëjtë në të gjithë shfletuesit modernë. Për shembull, në këtë demonstrim kufiri është i kuq, i thurur dhe 1px i gjerë:

style = "border: 1px thye # 000;">

Por në qoftë se ndryshoni kufirin dhe lartësinë, stilet duken pak më të ndryshëm në shfletues shumë të vjetër sesa ato në shfletuesit modernë. Siç mund ta shihni në këtë shembull, nëse e shihni atë në IE7 dhe më poshtë (një shfletues i cili është tepër i vjetëruar dhe nuk mbështetet më nga Microsoft) ekziston një vijë e brendshme e zbërthyer që nuk shfaqet në shfletuesit e tjerë (përfshirë IE8 dhe lart) :

style = "lartësi: 1.5em; gjerësi: 25em; kufiri: 1px solid # 000;">

Këto shfletues antiqued nuk janë me të vërtetë një shqetësim në web design sot, pasi ata janë zëvendësuar kryesisht me opsione më moderne.

Bëni një linjë dekorative me një imazh të sfondit

Në vend të një ngjyre, mund të përcaktoni një imazh të sfondit për HR tuaj në mënyrë që të duket tamam ashtu siç dëshironi, por ende shfaq semantikë në shënimin tuaj.

Në këtë shembull kemi përdorur një imazh që ka tre rreshta të valëzuara. Duke e cilësuar atë si imazhin e sfondit pa përsëritje, krijon një ndërprerje në përmbajtjen që duket pothuajse si ju shihni në librat:

style = "lartësia: 20px; sfond: #fff url (aa010307.gif) jo-repeat scroll center; kufiri: none;">

Transformimi i Elementeve të Burimeve Njerëzore

Me CSS3, ju gjithashtu mund të bëni linjat tuaja më interesante. Elementi i HR është tradicionalisht një vijë horizontale , por me pronën e transformuar CSS, ju mund të ndryshoni se si duken. Një transformim i preferuar në elementin HR është të ndryshojë rotacionin.

Ju mund të rrotulloni elementin tuaj HR në mënyrë që të jetë vetëm pak diagonale:

hr {
-moz-transform: rrotullohet (10deg);
-webkit-transform: rrotullohet (10deg);
-o-transformohet: rrotullohet (10deg);
-ms-transform: rrotullohet (10deg);
transformo: rrotullohet (10deg);
}

Ose mund ta rrotulloni në mënyrë që të jetë krejtësisht vertikale:

hr {
-moz-transform: rrotullohet (90deg);
-webkit-transform: rrotullohet (90deg);
-o-transformohet: rrotullohet (90deg);
-ms-transform: rrotullohet (90deg);
transformo: rrotullohet (90deg);
}

Mos harroni se kjo rrotullohet HR në bazë të vendndodhjes së saj aktuale në dokument, kështu që mund t'ju duhet të rregulloni pozicionimin për të marrë aty ku ta dëshironi. Nuk rekomandohet të përdoret kjo për të shtuar rreshta vertikale për një dizajn, por është një mënyrë për të marrë një efekt interesant.

Një mënyrë tjetër për të marrë linja në faqet tuaja

Një gjë që disa njerëz bëjnë në vend të përdorimit të elementit të BNJ është të mbështetet në kufijtë e elementeve të tjerë. Por ndonjëherë një HR është shumë më i përshtatshëm dhe më i lehtë për t'u përdorur se sa përpjekja për të vendosur kufij. Çështjet e modelit të kutive të disa shfletuesve mund të bëjnë që kufiri të jetë më i komplikuar.