PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
N

[CSS] Rounded corners

Door Nicoow Unknown op 04-02-2010 15:59
3.805 views
Hallo allen,

Aangezien ik z'n enorme css guru ben *kuch* lukt het mij weer eens niet met rounded corners.
De hoogte staat vast, alleen de breedte niet.
Dus ik heb een linker kant, en een rechter kant,, dat zijn vast afbeeldingen van 6px breed, en 53px hoog.
Voor er tussen in heb ik 1 afbeelding, die 1px breed is. en 53 hoog.
Hoe kan ik dit nu het beste oplossen met CSS?
Ik heb al wel het één en ander gegoogled, maar dat is allemaal met 4 hoeken, of een boven en onderkant.

Alvast bedankt.
T
Tamara
04-02-2010 16:21
CSS3 border-radius: klik hier

edit: border-radius wordt niet door IE ondersteunt. Volgens mij kan je het wel voor elkaar krijgen met een beetje javascript.

Als je gewoon CSS2 wilt gebruiken, dan is dit alleen mogelijk met 2 of 4 plaatjes zoals je zelf al aangaf.
N
Nicoow Unknown
04-02-2010 16:36
Het is me al gelukt,

div.headerLeft {
	min-height: 53px;
	min-width: 6px;
	background-image:url('../images/header_left.jpg');
	background-repeat:no-repeat;
	background-position:top left;
	float: left;
}

div.headerMiddle {
	min-height: 53px;
	min-width: 784px;
	background-image:url('../images/header_middle.jpg');
	background-repeat:repeat-x;
	background-position:top right;
	float: left;
}

div.headerRight {
	min-height: 53px;
	min-width: 6px;
	background-image:url('../images/header_right.jpg');
	background-repeat:no-repeat;
	background-position:top right;
	float: left;
}


En de HTML

<div class="wrapper">
<div class="headerLeft"></div>
<div class="headerMiddle"></div>
<div class="headerRight"></div>
</div>
Yearupie Achternaamloos
04-02-2010 17:35
Met plaatjes zijn het natuurlijk nooit echte afgeronde hoeken!
Om veel werk te besparen met plaatjes etc. kun je heel erg makkelijk het volgende gebruiken:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript" src="js/corner.js"></script>
</head>
<body>
<div id="box"></div>
</body>
</html>


Download ook nog even deze toevoeging (jquery.corner.js): http://code.google.com/p/jquerycurvycorners/downloads/list

corner.js:


$(function(){ 
	settings = {
		tl: { radius: 5 }, // grote hoek top left
		tr: { radius: 5 }, // grote hoek top right
		bl: { radius: 5 }, // grote hoek bottum left
		br: { radius: 5 }, // grote hoek bottum right
		antiAlias: true,
		autoPad: true,
		validTags: ["div"]
	}
	$('#box').corner(settings);
});
N
Nicoow Unknown
04-02-2010 17:42
En toen stond javascript uit.
Op een computer krijg je nooit ronde hoeken, je zit altijd aan vierkante pixels gebonden.
Yearupie Achternaamloos
04-02-2010 17:50
nico schreef op 04.02.2010 17:42
En toen stond javascript uit.
Op een computer krijg je nooit ronde hoeken, je zit altijd aan vierkante pixels gebonden.

Als javascript uitstaat heb je niet veel keus..
N
Nicoow Unknown
04-02-2010 18:40
Ik gebruik ook plaatjes,, maar in jou link zie ik geen rounded corners :)
y
yorick17
04-02-2010 22:24
je kan toch ook gewoon 1 plaatje maken met afgeronde hoeken? is wel het simpelst

Reageren

Inloggen om te reageren