Alles für die Homepage... Scripte, Templates, Workshops und Support
Startseite | Forum | Webtemplates | PHP Scripte | CGI Scripte | CGI-Perl Workshop | Selfhtml & PHP | Linkdatenbank | Downloadbereich

Startseite Artikel / Artikel lesen

Kategorie: CSS 31.08.2008 19:55 / (Artikel mit 9 Seiten)

Rahmeneffekte mit positionierten DIV-Boxen

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

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.

Drucken | Artikel wurde 4498 mal aufgerufen

 
Impressum - Kontakt - Datenschutzerklärung