diedVIPs

html knowhow

Grafischer Rahmen um Elemente











Das



Wenn Sie eine Website mit vielen Seiten haben, möchten Sie möglicherweise jeder Seite eine Art Nummerierung hinzufügen.
So sieht´s aus

Das ist ein Borderbild

Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
#grad1 {height: 150px;background-image: linear-gradient(to bottom right, green, yellow);font-size: 1.5em;color: white;text-align: center;padding-top:20px;}
#grad2 {height: 150px;background-image: linear-gradient(to right, blue, red);font-size: 1.5em;color: white;text-align: center;padding-top:20px;}
#grad3 {height: 150px;width:auto;background-image: radial-gradient(white, grey, green);font-size: 1.5em;color: white;text-align: center;padding-top:20px;}
</style>
<head>

<body >
<div id="grad1">Linearer Verlauf - links oben nach rechts unten</div><br/><br/>
<div id="grad2">Linearer Verlauf - rechts mit Übergängen nach rechts</div><br/><br/>
<div id="grad3">Radialer Verlauf - innen mit Übergängen nach außen</div>
</body>

</html>



Ein Umriss ist eine Linie, die außerhalb der Grenzen um Elemente gezogen wird, um das Element hervorzuheben.
Hinweis: Umrisse (outline=BLAU) unterscheiden sich von Rändern (border=ROT) Im Gegensatz zum Rahmen wird der Umriss außerhalb des Rahmens des Elements gezeichnet und kann andere Inhalte überlappen. Außerdem ist der Umriss NICHT Teil der Abmessungen des Elements. Die Gesamtbreite und -höhe des Elements wird von der Breite des Umrisses nicht beeinflusst.
So sieht´s aus

Das ist eine h3-Überschrift. Mit 5 Pixels starker, roter Border und mit 10 Pixels starker, blau gepunkteter Outline-Linie

Das ist ein div-Element. Mit 5 Pixels starker, roter Border und mit 3 Pixels starker, blau gestrichelter Outline-Linie
Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
h3 {border: 5px solid red;outline: 10px dotted blue;font-size:1.5em;font-weight:normal}
div.a {border: 5px solid red;outline: 3px dashed blue;font-size:1.5em;}
</style>
<head>

<body >
<h3>Das ist eine h3-Überschrift. Mit 5 Pixels starker, roter Border und mit 10 Pixels starker, blau gepunkteter Outline-Linie</h3>
<div class="a">Das ist ein div-Element. Mit 5 Pixels starker, roter Border und mit 3 Pixels starker, blau gestrichelter Outline-Linie</div>
</body>

</html>









Kontakt    Datenschutz   Impressum