De HTML HR-tag stylen met CSS

Als u horizontale lijnen in de vorm van een scheidingsteken aan uw websites moet toevoegen, zijn uw standaardopties het toevoegen van afbeeldingsbestanden van die lijnen aan uw pagina, maar daarvoor moet uw browser deze bestanden ophalen en laden, wat een negatieve invloed op de site kan hebben prestatie. U kunt ook de eigenschap CSS-rand gebruiken om randen toe te voegen die als lijnen bovenaan of onderaan een element werken, waardoor u effectief uw scheidingslijn maakt.

Of - beter nog - gebruik het HTML-element voor de horizontale regel.

Het element Horizontale regel

Het standaard uiterlijk van horizontale regels is niet ideaal. Om ze er mooier te laten uitzien, voegt u CSS toe om de visuele weergave van deze elementen aan te passen om in overeenstemming te zijn met hoe u wilt dat uw site eruitziet.

Een standaard HR-tag wordt weergegeven zoals de browser het wil weergeven. Moderne browsers tonen meestal onstyling van HR-tags met een breedte van 100 procent, een hoogte van 2 pixels en een 3D-rand in zwart om de lijn te maken.

Breedte en hoogte zijn consistent voor alle browsers

De enige stijlen die consistent zijn in webbrowsers zijn de breedte en stijlen. Deze bepalen hoe groot de lijn zal zijn. Als u de breedte en hoogte niet definieert, is de standaardbreedte 100 procent en is de standaardhoogte 2 pixels.

In dit voorbeeld is de breedte 50 procent van het bovenliggende element (merk op dat deze voorbeelden allemaal inline-stijlen bevatten.) In een productie-instelling worden deze stijlen feitelijk in een externe stijlpagina geschreven voor eenvoudig beheer op al uw pagina's):

style = "width: 50%;">

En in dit voorbeeld is de hoogte 2em:

style = "height: 2em;">

Het veranderen van de randen kan uitdagend zijn

In moderne browsers bouwt de browser de lijn door de rand aan te passen. Dus als u de rand met de stijleigenschap verwijdert, verdwijnt de lijn op de pagina. Zoals je kunt zien (nou, je zult niets zien, omdat de regels onzichtbaar zijn) in dit voorbeeld:

style = "border: none;">

Als u de randgrootte, kleur en stijl aanpast, ziet de lijn er anders uit en heeft deze hetzelfde effect in alle moderne browsers. In deze demonstratie is de rand bijvoorbeeld rood, stippellijn en 1px breed:

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

Maar als u de rand en de hoogte wijzigt, zien de stijlen er enigszins anders uit in zeer verouderde browsers dan in moderne browsers. Zoals je in dit voorbeeld kunt zien, als je het in IE7 en lager bekijkt (een browser die hopeloos verouderd is en niet langer door Microsoft wordt ondersteund), is er een afgeschuind binnenlijn die niet wordt weergegeven in de andere browsers (inclusief IE8 en hoger) :

style = "height: 1.5em; width: 25em; border: 1px solid # 000;">

Die verouderde browsers zijn tegenwoordig niet echt een zorg in webdesign, omdat ze grotendeels zijn vervangen door modernere opties.

Maak een decoratieve lijn met een achtergrondafbeelding

In plaats van een kleur kunt u een achtergrondafbeelding voor uw horizontale regel definiëren, zodat deze er precies uitziet zoals u dat wilt, maar toch semantisch wordt weergegeven in uw opmaak. In dit voorbeeld hebben we een afbeelding gebruikt die uit drie golflijnen bestaat. Door het in te stellen als achtergrondafbeelding zonder herhaling, creëert het een pauze in de inhoud die er bijna uitziet als in boeken:

style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; border: none;">

HR-elementen transformeren

Met CSS3 kun je je regels ook interessanter maken. Het HR-element is van oudsher een horizontaal regel, maar met de eigenschap CSS-transformatie kunt u de weergave ervan wijzigen. Een favoriete transformatie op het HR-element is het veranderen van de rotatie.

U kunt uw HR-element draaien zodat het net iets diagonaal is:

hr {-moz-transformatie: roteren (10 graden);-webkit-transform: roteren (10 graden);-o-transform: roteer (10 graden);-ms-transformatie: roteren (10 graden);transformeren: roteren (10 graden);}

Of je kunt het roteren zodat het volledig verticaal is:

hr {-moz-transform: roteren (90 graden);-webkit-transform: roteren (90 graden);-o-transform: roteren (90 graden);-ms-transformatie: roteren (90 graden);transformeren: roteren (90 graden);}

Onthoud dat deze techniek de HR roteert op basis van de huidige locatie in het document, dus u moet mogelijk de positionering aanpassen om het te krijgen waar u het wilt hebben. Het is niet aan te raden om dit te gebruiken om verticale lijnen aan een ontwerp toe te voegen, maar het is een manier om een ​​interessant effect te krijgen.

Een andere manier om lijnen op uw pagina's te krijgen

Een ding dat sommige mensen doen in plaats van het HR-element te gebruiken, is te vertrouwen op grenzen van andere elementen. Maar soms is een HR veel handiger en gemakkelijker in gebruik dan het proberen om grenzen in te stellen. De doosmodelproblemen van sommige browsers kunnen het instellen van een rand zelfs lastiger maken.