Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

Abgerundete Ecken in DIV Boxen mit CSS erzeugen

Home » Abgerundete Ecken in DIV Boxen mit CSS erzeugen

08 Dez Posted by admin in CSS | Comments
Abgerundete Ecken in DIV Boxen mit CSS erzeugen

Darum geht es:

Some Content in a beautyful rounded box!

Abgerundete Ecken per CSS erstellen ist im Firefox sehr einfach. Hier gibt es den eigens dafür erstellten CSS-Befehl:

-moz-border-radius

Wenn man so einen Effekt aber crossbrowserkompatibel erstellen will, muss man schon ein wenig tricksen:

1. Grafik erstellen und zerschneiden

Zuerst benötigt man eine kreisrunde Grafik die man in 4 einzelne Grafiken zerschneidet:

(tl.jpg – die linke, obere Ecke)

(tr.jpg – die rechte, obere Ecke)

(bl,jpg – die linke, untere Ecke)

(br.jpg – die rechte untere Ecke)

2. das HTML-Grundgerüst:

<div class="content">
    	  <div class="content_top">
    	    <div></div>
    	  </div>
	    <div class="content_inner">
	        <p>Some Content</p>
	    </div>
    	<div class="content_bottom">
    	  <div></div>
    	</div>
 
    	</div>

3. der CSS-Code:

.content{
	background:white;
}
 
.content_top div{
	 background: url(tl.jpg) no-repeat top left;
 
}
 
.content_top {
 background: url(tr.jpg) no-repeat top right;
}
 
.content_bottom div {
 background: url(bl.jpg) no-repeat bottom left;
}
 
.content_bottom {
 background: url(br.jpg) no-repeat bottom right;
}
 
.content_top div, .content_top, .content_bottom div, .content_bottom {
 width: 100%;
 height: 15px;
 font-size: 1px;
}
 
.content_inner{
	margin: 0 14px;
 
}
 
.content{
width: 50%; margin: 1em auto;	
}

Mit diesem kleinen Trick kann man schöne DIV-Boxen mit abgerundeten Ecken und sogar Schatteneffekten erstellen.

Tags:
, ,

 


Leave a comment