Rahmeneffekte mit positionierten DIV-Boxen
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>
Weitere Beiträge
Amazon-Vergleichstabellen erhöhen die Affiliate-Einnahmen
Amazon-Vergleichstabellen: Wer im Internet kaufen will, vergleicht zunächst Preise und Produkteigenschaften. Hier ist bei vielen Interessenten Amazon die erste Wahl. Gleichzeitig bietet der Branchenriese ein interessantes Partnerprogramm für Empfehlungen an. Wer sich damit ein zusätzliches Einkommen sichern möchte, bietet seinen Besuchern spezielle Amazon-Vergleichstabellen auf seiner Webseite an. So findet der Kunde schneller die relevanten Informationen […]
Amazon startet den 10. Prime Day am 16. und 17. Juli
Prime Day 2024: Vom 16. bis 17. Juli haben Prime-Mitglieder exklusiven Zugang zu einer Vielzahl von Angeboten in verschiedenen Kategorien wie Bekleidung, Elektronik, Küche & Haushalt und Spielzeug. Neue Deals werden während des gesamten Zeitraums veröffentlicht, um Prime-Mitgliedern am zehnten Prime Day stets etwas Neues zu bieten. Die ersten Angebote sind bereits verfügbar. Weitere Produkte […]
Amazon Oster-Angebote – erste Angebote sind verfügbar
Amazon Oster-Angebote: Ostern steht vor der Tür. Eine gute Gelegenheit, um die Wohnung oder den Arbeitsplatz bunter zu gestalten. Auch der Frühjahrsputz steht vor der Tür. Die Amazon Osterangebote vom 20. bis 25. März bieten attraktive Rabatte auf Elektronik, Haus & Garten, Spielwaren und mehr. Schneller Versand inklusive! Die ersten Angebote sind bereits verfügbar – […]
Das neue MacBook Air 2024 mit M3 Chip bei Amazon
MacBook Air 2024. Apple präsentierte überraschend die neuen MacBook Air Modelle mit dem leistungsstarken M3 Chip. Neben der besseren Hardware, die deutlich schneller ist als die Rechner der Konkurrenz, wurde vor allem die Tatsache begrüßt, dass das Macbook endlich mit zwei externen Monitoren funktioniert. Erfreulich ist, dass die neuen MacBooks bereits bei Amazon bestellt werden […]
Keine Kommentare vorhanden