diedVIPs

html knowhow

Grafischer Rahmen um Elemente









Rotierendes Borderbild

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

So sieht´s aus
Meine Botschaft

Viele, die eine Webseite betreiben wollen, greifen auf vorgefertigt Seiten zurück. Die gibt es z.B. bei Ionos, Jamdo, Strato und vielen, vielen mehr. Aber wer etwas Individuelles haben möchte, der macht alles selber. Es lohnt sich garantiert. Ein Styling, das keinem anderen gleicht.

Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
.box .content {height: 100%;display: Flex;align-items: Center;justify-content: Center;background-color: lime;}
.box {width: 300px;height: 300px;box-sizing: Border-Box;padding: 15px;position: Relative;overflow: Hidden;}
.box::before {content: '';position: Absolute;width: 150%;height: 150%;background: repeating-linear-gradient(White 0%, White 7.5px, #ccffcc 7.5px, #ccffcc 15px,
White 15px, White 22.5px, #00BFFF 22.5px, #00BFFF 30px);transform: translateX(-20%) translateY(-20%) rotate(-135deg);animation: animate 20s linear infinite;}
.box .content {position: Relative;background-color: White;flex-direction: Column;box-sizing: Border-Box;padding: 30px;text-align: Center;font-family: Sans-Serif;z-index: 2;}
.box,
.box .content {box-shadow: 0 0 2px #00BFFF, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1);border-radius: 10px;}
.box .content div {color: #00BFFF;}
.box .content p {color: Dimgray;}
@keyframes animate { from { background-position: 0; } to { background-position: 0 450px; }}
</style>
<head>

<body >
<div class="box">
<div class="content">
<div>Meine Botschaft</div>
<p>Viele, die eine Webseite betreiben wollen, greifen auf vorgefertigt Seiten zurück. Die gibt es z.B. bei Ionos, Jamdo, Strato
und vielen, vielen mehr. Aber wer etwas Individuelles haben möchte, der macht alles selber. Es lohnt sich garantiert. Ein Styling, das keinem anderen gleicht.</p>
</div></div>
</body>

</html>





Borderbild

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>



Boderbild

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