Rahmeneffekte mit positionierten DIV-Boxen

Kategorie(n): css, Programmierung Keine Kommentare

Diese hier vorgestellten CSS Beispiele zeigen wie man mit positionierten DIV-Boxen spezielle Rahmeneffekte realisieren kann.

Beispiel 1, hervorgehobene Rahmenecken

Hier sind die Ecken des mit 4px angelegten Rahmens mit 8 positionierten kleinen DIV-Boxen so überlagert das man meinen könnte es sind Grafiken.

Screenshot:

Komplettes Codebeispiel

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>CSS Beispiel</title>

<style type="text/css">
/* - - - - - - - - - - - - - - - - - - - - */
/* BODY */
/* - - - - - - - - - - - - - - - - - - - - */
body, html {
background-color: #F5F6F8;
font-family: Verdana, Arial, sans-serif;
color: #000000;
margin: 20px;
}

/* - - - - - - - - - - - - - - - - - - - - */
/* DIVBOXCSS  */
/* - - - - - - - - - - - - - - - - - - - - */
#eckenbox {
margin: 0;
padding: 4px;
border: 4px solid #dddddd;
background-color: #ffffff;
font-size: 12px;
position: relative;
top: 0;
left: 0;
}


.titeltext {
background-color: #ffcc00;
padding: 3px;
margin: -2px -2px 4px -2px;
font-weight: bold;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott, .outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
position: absolute;
background-color: #ffcc00;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott {
height: 4px;
width: 26px;
}

.outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
height: 26px;
width: 4px;
}

.outsetleft, .outsetlefttop {
left: -4px;
top: -4px;
}

.outsetrighttop, .outsetright {
right: -4px;
top: -4px;
}

.outsetleftbott, .outsetbottleft {
left: -4px;
bottom: -4px;
}

.outsetrightbott, .outsetbottright {
right: -4px;
bottom: -4px;
}

</style>


</head>
<body>


<!-- CODEBLOCK ANFANG -->
<div id="eckenbox" style="width: 460px;">
<div class="titeltext">Titeltext</div>
<div class="outsetlefttop"></div><div class="outsetrighttop"></div>
<div class="outsetleft"></div><div class="outsetright"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc leo nibh, pellentesque dignissim, rutrum a, 
accumsan vitae, velit. Ut dapibus pharetra mi. Pellentesque convallis malesuada tellus. 
Morbi massa. Phasellus a leo quis turpis dictum blandit. Aliquam bibendum mauris quis libero. 
Nullam vitae nulla 
<br><br>
sed ante auctor blandit. Integer mauris lacus, fermentum vitae, cursus porta, 
accumsan ut, nisl. Cras enim. Curabitur nec velit non nisi consectetuer mattis. Proin in lacus quis 
elit fringilla gravida. Pellentesque sed quam. In sodales nibh quis augue. Nunc ultrices tellus nec augue. 
Quisque dignissim. Donec non sapien non eros dictum euismod. Nam rutrum. Fusce aliquet eros elementum urna. 
Morbi sit amet felis ut orci egestas sagittis. Mauris eget mauris quis leo ultricies lacinia. 


<div class="outsetleftbott"></div><div class="outsetrightbott"></div>
<div class="outsetbottleft"></div><div class="outsetbottright"></div>
</div>
<!-- CODEBLOCK ENDE -->

</body>
</html>

Die #eckenbox hat hier einen 4px breiten Rahmen der durch die positionierten Elemente der outset…. Boxen überlagert wird.

Hinweis: Alle hier gezeigten Codebeispiele können Sie in Ihren Webseiten frei verwenden.

Beispiel 2, Ecken außerhalb des Rahmens positioniert

Hier wurden die „Ecken DIVs“ so positioniert das diese außerhalb des 4px breiten Rahmens liegen

Screenshot:

Komplettes Codebeispiel

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>CSS Beispiel</title>

<style type="text/css">
/* - - - - - - - - - - - - - - - - - - - - */
/* BODY */
/* - - - - - - - - - - - - - - - - - - - - */
body, html {
background-color: #F5F6F8;
font-family: Verdana, Arial, sans-serif;
color: #000000;
margin: 20px;
}

/* - - - - - - - - - - - - - - - - - - - - */
/* DIVBOXCSS  */
/* - - - - - - - - - - - - - - - - - - - - */
#eckenbox {
margin: 0;
padding: 4px;
border: 4px solid #dddddd;
background-color: #ffffff;
font-size: 12px;
position: relative;
top: 0;
left: 0;
}

.titeltext {
background-color: #ffcc00;
padding: 3px;
margin: -2px -2px 4px -2px;
font-weight: bold;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott, .outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
position: absolute;
background-color: #ffcc00;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott {
height: 6px;
width: 26px;
}

.outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
height: 26px;
width: 6px;
}

.outsetleft, .outsetlefttop {
left: -9px;
top: -9px;
}

.outsetrighttop, .outsetright {
right: -9px;
top: -9px;
}

.outsetleftbott, .outsetbottleft {
left: -9px;
bottom: -9px;
}

.outsetrightbott, .outsetbottright {
right: -9px;
bottom: -9px;
}

</style>


</head>
<body>


<!-- CODEBLOCK ANFANG -->
<div id="eckenbox" style="width: 460px;">
<div class="titeltext">Titeltext</div>
<div class="outsetlefttop"></div><div class="outsetrighttop"></div>
<div class="outsetleft"></div><div class="outsetright"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc leo nibh, pellentesque dignissim, rutrum a, 
accumsan vitae, velit. Ut dapibus pharetra mi. Pellentesque convallis malesuada tellus. 
Morbi massa. Phasellus a leo quis turpis dictum blandit. Aliquam bibendum mauris quis libero. 
Nullam vitae nulla 
<br><br>
sed ante auctor blandit. Integer mauris lacus, fermentum vitae, cursus porta, 
accumsan ut, nisl. Cras enim. Curabitur nec velit non nisi consectetuer mattis. Proin in lacus quis 
elit fringilla gravida. Pellentesque sed quam. In sodales nibh quis augue. Nunc ultrices tellus nec augue. 
Quisque dignissim. Donec non sapien non eros dictum euismod. Nam rutrum. Fusce aliquet eros elementum urna. 
Morbi sit amet felis ut orci egestas sagittis. Mauris eget mauris quis leo ultricies lacinia. 


<div class="outsetleftbott"></div><div class="outsetrightbott"></div>
<div class="outsetbottleft"></div><div class="outsetbottright"></div>
</div>
<!-- CODEBLOCK ENDE -->

</body>
</html>

Die Breite und Höhe ist hier mit height: 26px; width: 6px; angegeben, die Position jeweils mit -9px.

Hinweis: Alle hier gezeigten Codebeispiele können Sie in Ihren Webseiten frei verwenden.

Beispiel 3, Ecken oben und unten durchgezogen

Hier wurden die „Ecken DIVs“ so skaliert (width: 100%;) das diese oben und unten durchgezogen erscheinen.

Screenshot:

Komplettes Codebeispiel

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>CSS Beispiel</title>

<style type="text/css">
/* - - - - - - - - - - - - - - - - - - - - */
/* BODY */
/* - - - - - - - - - - - - - - - - - - - - */
body, html {
background-color: #F5F6F8;
font-family: Verdana, Arial, sans-serif;
color: #000000;
margin: 20px;
}

/* - - - - - - - - - - - - - - - - - - - - */
/* DIVBOXCSS  */
/* - - - - - - - - - - - - - - - - - - - - */
#eckenbox {
margin: 0;
padding: 4px;
border: 10px solid #993300;
background-color: #ffffff;
font-size: 12px;
position: relative;
top: 0;
left: 0;
}

.titeltext {
background-color: #ffcc00;
padding: 3px;
margin: -2px -2px 4px -2px;
font-weight: bold;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott, .outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
position: absolute;
background-color: #ffcc00;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott {
height: 4px;
width: 100%;
}

.outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
height: 26px;
width: 4px;
}

.outsetleft, .outsetlefttop {
left: -7px;
top: -7px;
}

.outsetrighttop, .outsetright {
right: -7px;
top: -7px;
}

.outsetleftbott, .outsetbottleft {
left: -7px;
bottom: -7px;
}

.outsetrightbott, .outsetbottright {
right: -7px;
bottom: -7px;
}

</style>

</head>
<body>

<!-- CODEBLOCK ANFANG -->
<div id="eckenbox" style="width: 460px;">
<div class="titeltext">Titeltext</div>
<div class="outsetlefttop"></div><div class="outsetrighttop"></div>
<div class="outsetleft"></div><div class="outsetright"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc leo nibh, pellentesque dignissim, rutrum a, 
accumsan vitae, velit. Ut dapibus pharetra mi. Pellentesque convallis malesuada tellus. 
Morbi massa. Phasellus a leo quis turpis dictum blandit. Aliquam bibendum mauris quis libero. 
Nullam vitae nulla 
<br><br>
sed ante auctor blandit. Integer mauris lacus, fermentum vitae, cursus porta, 
accumsan ut, nisl. Cras enim. Curabitur nec velit non nisi consectetuer mattis. Proin in lacus quis 
elit fringilla gravida. Pellentesque sed quam. In sodales nibh quis augue. Nunc ultrices tellus nec augue. 
Quisque dignissim. Donec non sapien non eros dictum euismod. Nam rutrum. Fusce aliquet eros elementum urna. 
Morbi sit amet felis ut orci egestas sagittis. Mauris eget mauris quis leo ultricies lacinia. 


<div class="outsetleftbott"></div><div class="outsetrightbott"></div>
<div class="outsetbottleft"></div><div class="outsetbottright"></div>
</div>
<!-- CODEBLOCK ENDE -->


</body>
</html>

Hinweis: Alle hier gezeigten Codebeispiele können Sie in Ihren Webseiten frei verwenden.

Beispiel 4, Rahmen komplett überlagert

Hier wurden die „Ecken DIVs“ so skaliert (width: 100%;, height: 100%;) das diese den Rahmen komplett überlagern.

Screenshot:

Komplettes Codebeispiel

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>CSS Beispiel</title>

<style type="text/css">
/* - - - - - - - - - - - - - - - - - - - - */
/* BODY */
/* - - - - - - - - - - - - - - - - - - - - */
body, html {
background-color: #F5F6F8;
font-family: Verdana, Arial, sans-serif;
color: #000000;
margin: 20px;
}

/* - - - - - - - - - - - - - - - - - - - - */
/* DIVBOXCSS  */
/* - - - - - - - - - - - - - - - - - - - - */
#eckenbox {
margin: 0;
padding: 4px;
border: 10px solid #993300;
background-color: #ffffff;
font-size: 12px;
position: relative;
top: 0;
left: 0;
}

.titeltext {
background-color: #ffcc00;
padding: 3px;
margin: -2px -2px 4px -2px;
font-weight: bold;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott, .outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
position: absolute;
background-color: #ffcc00;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott {
height: 4px;
width: 100%;
}

.outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
height: 100%;
width: 4px;
}

.outsetleft, .outsetlefttop {
left: -7px;
top: -7px;
}

.outsetrighttop, .outsetright {
right: -7px;
top: -7px;
}

.outsetleftbott, .outsetbottleft {
left: -7px;
bottom: -7px;
}

.outsetrightbott, .outsetbottright {
right: -7px;
bottom: -7px;
}

</style>


</head>
<body>


<!-- CODEBLOCK ANFANG -->
<div id="eckenbox" style="width: 460px;">
<div class="titeltext">Titeltext</div>
<div class="outsetlefttop"></div><div class="outsetrighttop"></div>
<div class="outsetleft"></div><div class="outsetright"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc leo nibh, pellentesque dignissim, rutrum a, 
accumsan vitae, velit. Ut dapibus pharetra mi. Pellentesque convallis malesuada tellus. 
Morbi massa. Phasellus a leo quis turpis dictum blandit. Aliquam bibendum mauris quis libero. 
Nullam vitae nulla 
<br><br>
sed ante auctor blandit. Integer mauris lacus, fermentum vitae, cursus porta, 
accumsan ut, nisl. Cras enim. Curabitur nec velit non nisi consectetuer mattis. Proin in lacus quis 
elit fringilla gravida. Pellentesque sed quam. In sodales nibh quis augue. Nunc ultrices tellus nec augue. 
Quisque dignissim. Donec non sapien non eros dictum euismod. Nam rutrum. Fusce aliquet eros elementum urna. 
Morbi sit amet felis ut orci egestas sagittis. Mauris eget mauris quis leo ultricies lacinia. 


<div class="outsetleftbott"></div><div class="outsetrightbott"></div>
<div class="outsetbottleft"></div><div class="outsetbottright"></div>
</div>
<!-- CODEBLOCK ENDE -->

</body>
</html>

Hinweis: Alle hier gezeigten Codebeispiele können Sie in Ihren Webseiten frei verwenden.

Beispiel 5, alle 4 Seiten mit Rahmenecken

Hier wurden die „Ecken DIVs“ mit height: 26px; width: 4px; und height: 4px; width: 26px; als Rahmenecken über dem 9px breiten Rahmen von #eckenbox liegen.

Screenshot:

Komplettes Codebeispiel

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>CSS Beispiel</title>

<style type="text/css">
/* - - - - - - - - - - - - - - - - - - - - */
/* BODY */
/* - - - - - - - - - - - - - - - - - - - - */
body, html {
background-color: #F5F6F8;
font-family: Verdana, Arial, sans-serif;
color: #000000;
margin: 20px;
}

/* - - - - - - - - - - - - - - - - - - - - */
/* DIVBOXCSS  */
/* - - - - - - - - - - - - - - - - - - - - */
#eckenbox {
margin: 0;
padding: 4px;
border: 9px solid #993300;
background-color: #ffffff;
font-size: 12px;
position: relative;
top: 0;
left: 0;
}

.titeltext {
background-color: #ffcc00;
padding: 3px;
margin: -2px -2px 4px -2px;
font-weight: bold;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott, .outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
position: absolute;
background-color: #ffcc00;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott {
height: 4px;
width: 26px;
}

.outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
height: 26px;
width: 4px;
}

.outsetleft, .outsetlefttop {
left: -6px;
top: -6px;
}

.outsetrighttop, .outsetright {
right: -6px;
top: -6px;
}

.outsetleftbott, .outsetbottleft {
left: -6px;
bottom: -6px;
}

.outsetrightbott, .outsetbottright {
right: -6px;
bottom: -6px;
}

</style>


</head>
<body>


<!-- CODEBLOCK ANFANG -->
<div id="eckenbox" style="width: 460px;">
<div class="titeltext">Titeltext</div>
<div class="outsetlefttop"></div><div class="outsetrighttop"></div>
<div class="outsetleft"></div><div class="outsetright"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc leo nibh, pellentesque dignissim, rutrum a, 
accumsan vitae, velit. Ut dapibus pharetra mi. Pellentesque convallis malesuada tellus. 
Morbi massa. Phasellus a leo quis turpis dictum blandit. Aliquam bibendum mauris quis libero. 
Nullam vitae nulla 
<br><br>
sed ante auctor blandit. Integer mauris lacus, fermentum vitae, cursus porta, 
accumsan ut, nisl. Cras enim. Curabitur nec velit non nisi consectetuer mattis. Proin in lacus quis 
elit fringilla gravida. Pellentesque sed quam. In sodales nibh quis augue. Nunc ultrices tellus nec augue. 
Quisque dignissim. Donec non sapien non eros dictum euismod. Nam rutrum. Fusce aliquet eros elementum urna. 
Morbi sit amet felis ut orci egestas sagittis. Mauris eget mauris quis leo ultricies lacinia. 


<div class="outsetleftbott"></div><div class="outsetrightbott"></div>
<div class="outsetbottleft"></div><div class="outsetbottright"></div>
</div>
<!-- CODEBLOCK ENDE -->

</body>
</html>

Hinweis: Alle hier gezeigten Codebeispiele können Sie in Ihren Webseiten frei verwenden.

Beispiel 6, dünner Rahmen – überstehende Ecken

Hier wurden über dem 2px breiten Rahmen von #eckenbox jeweils 4 Ecken mit 4 x 28px so positioniert das diese über den Rahmen um 2px übestehen.

Screenshot:

Komplettes Codebeispiel

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>CSS Beispiel</title>

<style type="text/css">
/* - - - - - - - - - - - - - - - - - - - - */
/* BODY */
/* - - - - - - - - - - - - - - - - - - - - */
body, html {
background-color: #F5F6F8;
font-family: Verdana, Arial, sans-serif;
color: #000000;
margin: 20px;
}

/* - - - - - - - - - - - - - - - - - - - - */
/* DIVBOXCSS  */
/* - - - - - - - - - - - - - - - - - - - - */
#eckenbox {
margin: 0;
padding: 4px;
border: 2px solid #ffcc00;
background-color: #ffffff;
font-size: 12px;
position: relative;
top: 0;
left: 0;
}

.titeltext {
background-color: #ffcc00;
padding: 3px;
margin: -2px -2px 4px -2px;
font-weight: bold;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott, .outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
position: absolute;
background-color: #336600;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott {
height: 4px;
width: 28px;
}

.outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
height: 28px;
width: 4px;
}

.outsetleft, .outsetlefttop {
left: -4px;
top: -4px;
}

.outsetrighttop, .outsetright {
right: -4px;
top: -4px;
}

.outsetleftbott, .outsetbottleft {
left: -4px;
bottom: -4px;
}

.outsetrightbott, .outsetbottright {
right: -4px;
bottom: -4px;
}

</style>


</head>
<body>


<!-- CODEBLOCK ANFANG -->
<div id="eckenbox" style="width: 460px;">
<div class="titeltext">Titeltext</div>
<div class="outsetlefttop"></div><div class="outsetrighttop"></div>
<div class="outsetleft"></div><div class="outsetright"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc leo nibh, pellentesque dignissim, rutrum a, 
accumsan vitae, velit. Ut dapibus pharetra mi. Pellentesque convallis malesuada tellus. 
Morbi massa. Phasellus a leo quis turpis dictum blandit. Aliquam bibendum mauris quis libero. 
Nullam vitae nulla 
<br><br>
sed ante auctor blandit. Integer mauris lacus, fermentum vitae, cursus porta, 
accumsan ut, nisl. Cras enim. Curabitur nec velit non nisi consectetuer mattis. Proin in lacus quis 
elit fringilla gravida. Pellentesque sed quam. In sodales nibh quis augue. Nunc ultrices tellus nec augue. 
Quisque dignissim. Donec non sapien non eros dictum euismod. Nam rutrum. Fusce aliquet eros elementum urna. 
Morbi sit amet felis ut orci egestas sagittis. Mauris eget mauris quis leo ultricies lacinia. 


<div class="outsetleftbott"></div><div class="outsetrightbott"></div>
<div class="outsetbottleft"></div><div class="outsetbottright"></div>
</div>
<!-- CODEBLOCK ENDE -->

</body>
</html>

Hinweis: Alle hier gezeigten Codebeispiele können Sie in Ihren Webseiten frei verwenden.

Beispiel 7, Box nur oben und recht-links umrahmt

Hier wurden die unteren Rahmen DIVs entfernt, das obere mit width: 100% skaliert und seitlich eine höhe von 28px verwendet.

Screenshot:

Komplettes Codebeispiel

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>CSS Beispiel</title>

<style type="text/css">
/* - - - - - - - - - - - - - - - - - - - - */
/* BODY */
/* - - - - - - - - - - - - - - - - - - - - */
body, html {
background-color: #F5F6F8;
font-family: Verdana, Arial, sans-serif;
color: #000000;
margin: 20px;
}

/* - - - - - - - - - - - - - - - - - - - - */
/* DIVBOXCSS  */
/* - - - - - - - - - - - - - - - - - - - - */
#eckenbox {
margin: 0;
padding: 4px;
border-top: 4px solid  #336600;
background-color: #ffffff;
font-size: 12px;
position: relative;
top: 0;
left: 0;
}

.titeltext {
background-color: #ffcc00;
padding: 3px;
margin: -2px -2px 4px -2px;
font-weight: bold;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott, .outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
position: absolute;
background-color: #336600;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott {
height: 4px;
width: 28px;
}

.outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
height: 26px;
width: 4px;
}

.outsetleft, .outsetlefttop {
left: -4px;
top: -4px;
}

.outsetrighttop, .outsetright {
right: -4px;
top: -4px;
}

.outsetleftbott, .outsetbottleft {
left: -4px;
bottom: -4px;
}

.outsetrightbott, .outsetbottright {
right: -4px;
bottom: -4px;
}

</style>


</head>
<body>


<!-- CODEBLOCK ANFANG -->
<div id="eckenbox" style="width: 460px;">
<div class="titeltext">Titeltext</div>
<div class="outsetlefttop"></div><div class="outsetrighttop"></div>
<div class="outsetleft"></div><div class="outsetright"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc leo nibh, pellentesque dignissim, rutrum a, 
accumsan vitae, velit. Ut dapibus pharetra mi. Pellentesque convallis malesuada tellus. 
Morbi massa. Phasellus a leo quis turpis dictum blandit. Aliquam bibendum mauris quis libero. 
Nullam vitae nulla 
<br><br>
sed ante auctor blandit. Integer mauris lacus, fermentum vitae, cursus porta, 
accumsan ut, nisl. Cras enim. Curabitur nec velit non nisi consectetuer mattis. Proin in lacus quis 
elit fringilla gravida. Pellentesque sed quam. In sodales nibh quis augue. Nunc ultrices tellus nec augue. 
Quisque dignissim. Donec non sapien non eros dictum euismod. Nam rutrum. Fusce aliquet eros elementum urna. 
Morbi sit amet felis ut orci egestas sagittis. Mauris eget mauris quis leo ultricies lacinia. 
</div>
<!-- CODEBLOCK ENDE -->

</body>
</html>

Hinweis: Alle hier gezeigten Codebeispiele können Sie in Ihren Webseiten frei verwenden.

Beispiel 8, rechts, links breiter Rahmen, oben und unten – dünner Rahmen

Bei diesem Beispiel wurde für die #eckenbox rechts und links eine breiterer Rahmen definiert (border-right: 10px solid #336600; border-left: 10px solid #336600;). Die oberen Rahmenelemente wurden auf 50% skaliert mit einer Höhe von 15px.

Screenshot:

Komplettes Codebeispiel

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>CSS Beispiel</title>

<style type="text/css">
/* - - - - - - - - - - - - - - - - - - - - */
/* BODY */
/* - - - - - - - - - - - - - - - - - - - - */
body, html {
background-color: #F5F6F8;
font-family: Verdana, Arial, sans-serif;
color: #000000;
margin: 20px;
}

/* - - - - - - - - - - - - - - - - - - - - */
/* DIVBOXCSS  */
/* - - - - - - - - - - - - - - - - - - - - */
#eckenbox {
margin: 0;
padding: 4px;
border-right: 10px solid #336600;
border-left: 10px solid #336600;
background-color: #ffffff;
font-size: 12px;
position: relative;
top: 0;
left: 0;
}

.titeltext {
background-color: #ffcc00;
padding: 3px;
margin: -2px -2px 4px -2px;
font-weight: bold;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott, .outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
position: absolute;
background-color: #ffcc00;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott {
height: 4px;
width: 50%;
}

.outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
height: 15px;
width: 4px;
}

.outsetleft, .outsetlefttop {
left: -7px;
top: -7px;
}

.outsetrighttop, .outsetright {
right: -7px;
top: -7px;
}

.outsetleftbott, .outsetbottleft {
left: -7px;
bottom: -7px;
}

.outsetrightbott, .outsetbottright {
right: -7px;
bottom: -7px;
}

</style>


</head>
<body>


<!-- CODEBLOCK ANFANG -->
<div id="eckenbox" style="width: 460px;">
<div class="titeltext">Titeltext</div>
<div class="outsetlefttop"></div><div class="outsetrighttop"></div>
<div class="outsetleft"></div><div class="outsetright"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc leo nibh, pellentesque dignissim, rutrum a, 
accumsan vitae, velit. Ut dapibus pharetra mi. Pellentesque convallis malesuada tellus. 
Morbi massa. Phasellus a leo quis turpis dictum blandit. Aliquam bibendum mauris quis libero. 
Nullam vitae nulla 
<br><br>
sed ante auctor blandit. Integer mauris lacus, fermentum vitae, cursus porta, 
accumsan ut, nisl. Cras enim. Curabitur nec velit non nisi consectetuer mattis. Proin in lacus quis 
elit fringilla gravida. Pellentesque sed quam. In sodales nibh quis augue. Nunc ultrices tellus nec augue. 
Quisque dignissim. Donec non sapien non eros dictum euismod. Nam rutrum. Fusce aliquet eros elementum urna. 
Morbi sit amet felis ut orci egestas sagittis. Mauris eget mauris quis leo ultricies lacinia. 


<div class="outsetleftbott"></div><div class="outsetrightbott"></div>
<div class="outsetbottleft"></div><div class="outsetbottright"></div>
</div>
<!-- CODEBLOCK ENDE -->

</body>
</html>

Hinweis: Alle hier gezeigten Codebeispiele können Sie in Ihren Webseiten frei verwenden.

Beispiel 9, Rahmen für Bilder

Hier wurde nur die DIV Boxen für oben links und unten rechts verwendet. Diese überlagern hier den 10px breiten Rahmen von #eckenbox (border: 10px solid #cc9900;)

Screenshot:

Komplettes Codebeispiel

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>CSS Beispiel</title>

<style type="text/css">
/* - - - - - - - - - - - - - - - - - - - - */
/* BODY */
/* - - - - - - - - - - - - - - - - - - - - */
body, html {
background-color: #F5F6F8;
font-family: Verdana, Arial, sans-serif;
color: #000000;
margin: 20px;
}

/* - - - - - - - - - - - - - - - - - - - - */
/* DIVBOXCSS */
/* - - - - - - - - - - - - - - - - - - - - */
#eckenbox {
margin: 0;
padding: 4px;
border: 10px solid #cc9900;
background-color: #ffffff;
font-size: 12px;
position: relative;
top: 0;
left: 0;
}

.titeltext {
background-color: #f5e9c2;
padding: 3px;
margin: 4px -2px -2px -2px;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott, .outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
position: absolute;
background-color: #ffcc00;
}

.outsetlefttop, .outsetrighttop, .outsetleftbott, .outsetrightbott {
height: 4px;
width: 50%;
}

.outsetleft, .outsetright, .outsetbottleft, .outsetbottright {
height: 28px;
width: 4px;
}

.outsetleft, .outsetlefttop {
left: -7px;
top: -7px;
}

.outsetrighttop, .outsetright {
right: -7px;
top: -7px;
}

.outsetleftbott, .outsetbottleft {
left: -7px;
bottom: -7px;
}

.outsetrightbott, .outsetbottright {
right: -7px;
bottom: -7px;
}

</style>

</head>
<body>


<!-- CODEBLOCK ANFANG -->
<div id="eckenbox" style="width: 170px;">

<div class="outsetlefttop"></div>
<div class="outsetleft"></div>

<img src="Fass.gif" alt="" width="160" height="160" border="0">

<div class="titeltext">Text zum Bild  Text zum Bild Text zum Bild</div>

<div class="outsetrightbott"></div>
<div class="outsetbottright"></div>
</div>
<!-- CODEBLOCK ENDE -->


</body>
</html>

Amazon Prime Deal Days: Top-Rabatte am 7. und 8. Oktober nutzen

Kategorie(n): Internet, Unterhaltung Schlagwörter: Amazon, Angebote, Prime, Prime Deal Days Keine Kommentare

Am 7. und 8. Oktober ist es wieder soweit: Die Amazon Prime Deal Days 2025 laden Prime-Mitglieder zu einer exklusiven Schnäppchenjagd ein. Das Shopping-Event bietet hunderttausende Rabatte auf Produkte aus Kategorien wie Elektronik, Mode, Haushalt und Kosmetik. Bereits jetzt können sich Prime-Nutzer auf spannende Vorab-Deals freuen, die direkt über Amazon verfügbar sind. Natürlich wird es […]

Der neue Kalender 2026 für den Kindle Scribe ist da

Kategorie(n): Unterhaltung Schlagwörter: Kalender 2026, Kindle, Kindle Scribe Keine Kommentare

Noch sind die Temperaturen angenehm, doch das Jahr 2026 steht bereits vor der Tür. Wer seine Pläne für das kommende Jahr effektiv organisieren möchte, sollte sich frühzeitig nach einem geeigneten Kalender umsehen. Für Nutzer des Kindle Scribe gibt es jetzt eine ideale Lösung: den interaktiven Kalender 2026. Dieser digitale Jahresplaner bietet eine Vielzahl von Funktionen, […]

Excel Rechnungsvorlage für Etsy und Amazon – Zeitsparend & komfortabel für Freiberufler und Autoren

Kategorie(n): Internet, Technik Schlagwörter: Excel, Freiberufler, Rechnung, Rechnungsstellung Keine Kommentare

Als Freiberufler oder Autor auf Plattformen wie Etsy und Amazon stehen Sie täglich vor der Herausforderung, professionelle Rechnungen zu erstellen. Mit einer passenden Excel Rechnungsvorlage gestalten Sie diesen Prozess deutlich effizienter und rechtssicher. Die speziell für Kreative, Autoren und Selbstständige entwickelte Excel Rechnungsvorlage für Etsy und Amazon ist sofort einsetzbar und bietet zahlreiche Vorteile.

Amazon Prime Day 2025: Top-Deals für Technik, Büro & Home Office

Kategorie(n): Internet, Technik Schlagwörter: Amazon, Angebot, Prime Day, Rabatt, Schnäppchen Keine Kommentare

Der Amazon Prime Day 2025 ist gestartet und begeistert wieder mit vielen exklusiven Schnäppchen. Als Prime-Mitglied erhalten Sie vor allen anderen Zugriff auf die besten Deals. Besonders Technikfans und Home-Office-Nutzer kommen in diesem Jahr voll auf ihre Kosten. In diesem Artikel stellen wir Ihnen die spannendsten Prime Day Angebote in den Kategorien höhenverstellbare Schreibtische, Router, […]

Keine Kommentare vorhanden

Rahmeneffekte mit positionierten DIV-Boxen

Beispiel 1, hervorgehobene Rahmenecken

Beispiel 2, Ecken außerhalb des Rahmens positioniert

Beispiel 3, Ecken oben und unten durchgezogen

Beispiel 4, Rahmen komplett überlagert

Beispiel 5, alle 4 Seiten mit Rahmenecken

Beispiel 6, dünner Rahmen – überstehende Ecken

Beispiel 7, Box nur oben und recht-links umrahmt

Beispiel 8, rechts, links breiter Rahmen, oben und unten – dünner Rahmen

Beispiel 9, Rahmen für Bilder

Weitere Beiträge

Amazon Prime Deal Days: Top-Rabatte am 7. und 8. Oktober nutzen

Der neue Kalender 2026 für den Kindle Scribe ist da

Excel Rechnungsvorlage für Etsy und Amazon – Zeitsparend & komfortabel für Freiberufler und Autoren

Amazon Prime Day 2025: Top-Deals für Technik, Büro & Home Office

Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns! Antwort abbrechen