[CSS] Rounded corners
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.
Gesponsorde koppelingen:
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.
Gewijzigd op 01/01/1970 01:00:00 door Tamara
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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;
}
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
Code (php)
1
2
3
4
5
2
3
4
5
<div class="wrapper">
<div class="headerLeft"></div>
<div class="headerMiddle"></div>
<div class="headerRight"></div>
</div>
<div class="headerLeft"></div>
<div class="headerMiddle"></div>
<div class="headerRight"></div>
</div>
Om veel werk te besparen met plaatjes etc. kun je heel erg makkelijk het volgende gebruiken:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<!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>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$(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);
});
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);
});
Op een computer krijg je nooit ronde hoeken, je zit altijd aan vierkante pixels gebonden.
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.
Op een computer krijg je nooit ronde hoeken, je zit altijd aan vierkante pixels gebonden.
Als javascript uitstaat heb je niet veel keus..
http://paradox-productions.net/projects/rounded%20corners%20links/
Als je enkel met css rounded corners wil is het sowieso geen valid css.
Daar is al een tijdje een simpel cross browser oplosing voor, een htc bestandje werkt in elke bekende browser en OOK in IE!
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Als je de link van Paradox bedoeld dan denk ik dat hij de hover van het menu bedoeld.
probeer anders dit!
joey schreef op 04.02.2010 18:40:
Wat doet iedereen tog moeilijk?
Daar is al een tijdje een simpel cross browser oplosing voor, een htc bestandje werkt in elke bekende browser en OOK in IE!
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Daar is al een tijdje een simpel cross browser oplosing voor, een htc bestandje werkt in elke bekende browser en OOK in IE!
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
joey schreef op 04.02.2010 18:40:
MAAR IS NIET VALID ZOALS IK AL ZEIWat doet iedereen tog moeilijk?
Daar is al een tijdje een simpel cross browser oplosing voor, een htc bestandje werkt in elke bekende browser en OOK in IE!
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Daar is al een tijdje een simpel cross browser oplosing voor, een htc bestandje werkt in elke bekende browser en OOK in IE!
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
In geval dat je het voor een klant maakt wel tenzij die het ook niet erg vind.
Maar het is maar wat je zelf wilt?
Gewijzigd op 01/01/1970 01:00:00 door Joey Drieling
