Rahmen für Bilder und Text erstellen (Tutorial)

[Bildschirmfoto] Rahmen für Bilder und Text erstellen

Die CSS-border Eigenschaft legt den kompletten Rahmen eines Elementes fest.
Fehlt ein Rahmen an einem Bild oder um einen Text? So schnell und einfach fügen Sie einen hinzu.

Beispiele

<img src="bild.gif"
 style="border-style: solid; border-width: 7px; border-color: #99CCFF;">

<img src="bild.gif" style="border-style: dotted;
 border-width: 7px; border-color: #99CCFF;">

<img src="bild.gif" style="border-style: outset;
 border-width: 7px; border-color: gold;">

<img src="bild.gif" style="border-style: inset;
 border-width: 7px; border-color: gold;">

<img src="bild.gif" style="border-style: groove;
 border-width: 7px; border-color: gold;">

CSS-Anweisung abkürzen

Um einen Rahmen hinzuzufügen reicht auch eine kürzere CSS-Anweisung aus.

<img src="bild.gif" style="border: double 5px deeppink">

<img src="bild.gif" style="border: dashed 2px #FF4500">
Rahmengenerator

    



<img src=bild.gif" style="border: ridge 15px #FFFF42;">

Rahmen für den Text

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien ...
<div style="border: dotted 2px #FFD700">
Weit hinten, hinter den Wortbergen, ...</div>
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien ...
<div style="border: dotted 5px #FFD700"; padding: 10px;>
Weit hinten, hinter den Wortbergen, ...</div>
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien ...
<div style="border: dotted 5px #FFD700"; padding: 10px; background-color: #FFFDF0;>
Weit hinten, hinter den Wortbergen, ...</div>

Eigene Rahmen für Bilder

<style>
div#rahmen {
   border: 35px solid transparent;
   border-image: url("rahmen.webp") 22 30 repeat;
   background-color: #FFFFFF;
   width: 300px;
   height: 300px;
}
</style>

<div id="rahmen"><img src="frau.png"></div>

Verwendeter Rahmen:

rahmen.webp - 259 x 374 Pixel - 30.4 KB

Weiter Möglichkeiten mit Bildern, benutze den Bilderrahmen Generator

Rahmen für Text

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.
<style>
div.rahmen {
 border: 20px solid transparent;
 border-image: url("border2.png") 30 30 repeat;
 background-color: #7B91AC;
 color: #FFFFFF;
 width: 500px;
}
</style>

<div class="rahmen">Weit hinten, hinter den Wortbergen, ...</div>

Verwendeter Rahmen:

border2.png
102 x 102 Pixel
890 Byte
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.
<style>
div.rahmen {
 border: 20px solid transparent;
 border-image: url("border3.png") 30 30 repeat;
 width: 350px;
}
</style>

<div class="rahmen">Weit hinten, hinter den Wortbergen, ...</div>

Verwendeter Rahmen:

border3.png - 183 x 183 Pixel - 1.7 KB
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.
<style>
div.rahmen {
 border: 35px solid transparent;
 border-image: url("monitor.png") 25 12 repeat;
 background-color: #FFFFFF;
 width: 350px;
}
</style>

<div class="rahmen">Weit hinten, hinter den Wortbergen, ...</div>

Verwendeter Rahmen:

monitor.png - 265 x 210 Pixel - 6.1 KB

Rahmen mit Farbverlauf

Siehe auch: Farbverlauf mit CSS

<style>
img.rahmen {
 border: 10px solid transparent;
 background: linear-gradient(#3DB7FF, #FF00E9);
}
</style>

<img src="image.jpg" class="rahmen">

<style>
img.rahmen {
 border: 25px solid transparent;
 background-color: silver; background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px),
 linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px); background-size: 58px 58px;
 background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
</style>

<img src="image.jpg" class="rahmen">

<style>
img.rahmen {
 border: 25px solid transparent;
 background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0), linear-gradient(135deg, transparent 37%,
 #a85 0, #a85 63%, transparent 0), linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753; background-size: 25px 25px;
}
</style>

<img src="image.jpg" class="rahmen">

<style>
img.rahmen {
 border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
 border-image-slice: 1;
 border-width: 10px;
 border-style: solid;
}
</style>

<img src="image.jpg" class="rahmen">

<style>
img.rahmen {
 border: 25px solid transparent;
 border-radius: 20px;
 background: repeating-conic-gradient(red, orange, yellow, green, blue, indigo, violet 15deg);
 background-size: 500% 500%;
 animation: borderAnimation 12s ease infinite;
}

@keyframes borderAnimation {
 0%{
  background-position:90% 0%
 }
 50%{
  background-position:15% 100%
 }
 100%{
 background-position:90% 0%
 }
}

</style>

<img src="image.jpg" class="rahmen">

<style>
img.rahmen {
   border: 15px solid transparent;
   border-radius: 0px;
   background: repeating-linear-gradient(190deg, rgba(253,170,227, 0.5) 40px, rgba(156,230,35, 0.5) 80px, rgba(31,92,84, 0.5) 120px, rgba(103,129,104, 0.5) 160px, rgba(85,203,209, 0.5) 200px, rgba(56,174,8, 0.5) 240px, rgba(80,42,223, 0.5) 280px, rgba(253,170,227, 0.5) 300px), repeating-linear-gradient(-190deg, rgba(156,230,35, 0.5) 30px, rgba(31,92,84, 0.5) 60px, rgba(103,129,104, 0.5) 90px, rgba(85,203,209, 0.5) 120px, rgba(56,174,8, 0.5) 150px, rgba(80,42,223, 0.5) 180px, rgba(253,170,227, 0.5) 210px, rgba(156,230,35, 0.5) 230px), repeating-linear-gradient(23deg, rgb(253,170,227) 50px, rgb(156,230,35) 100px, rgb(31,92,84) 150px, rgb(103,129,104) 200px, rgb(85,203,209) 250px, rgb(56,174,8) 300px, rgb(80,42,223) 350px, rgb(253,170,227) 370px);
   background-size: 50% 50%;
   animation: borderAnimation 15s alternate infinite;
  }

@keyframes borderAnimation {
  0% {
    filter: hue-rotate(0);
    background-position:100% 0%;
    background-size: 100% 100%;
    border-radius: 0px;
  }
  50% {
    filter: hue-rotate(180deg);
     background-position:0% 100%;
     background-size: 300% 300%;
     border-radius: 100px;
  }
  100% {
    filter: hue-rotate(360deg);
     background-position:100% 0%;
     background-size: 500% 500%;
     border-radius: 200px;
  }
 }

</style>

<img src="image.jpg" class="rahmen">