CSS: Maak ronde hoeken in je lay-out d.m.v. afbeeldingen
In sommige website ontwerpen zijn ronde hoeken een mooie manier om de website lay-out mooi vorm te geven. Je kunt ronde hoeken voor de website lay-out gebruiken of gewoon bepaalde elementen binnen de website.
We hebben verschillende technieken om ronde hoeken binnen CSS te maken. De ene techniek maakt gebruik van afbeeldingen en de andere doet dit zonder de afbeeldingen. We zullen vandaag de techniek bespreken die ronde hoeken met afbeeldingen ‘creëert’.
Maak voor jezelf 4 afbeeldingen van 15×15 pixels.
- top-right.gif
- top-left.gif
- bottom-right.gif
- bottom-left.gif
Gebruik vervolgens de onderstaande code om de afbeeldingen juist te positioneren.
<div class="roundcont">
<div class="roundtop">
<img class="corner" src="top-left.gif" alt=""
width="15" height="15" />
</div>
<div class="roundbottom">
<img class="corner" src="bottom-left.gif" alt=""
width="15" height="15" />
</div>
</div>
.roundcont {
width: 250px;
background-color: #666666;
color: #ffffff;
}
.roundtop {
background: url(top-right.gif) no-repeat top right;
}
.roundbottom {
background: url(bottom-right.gif) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
Het resultaat:
Doe mij maar ronde hoekjes met CSS. Al snapt die domme Explorer daar natuurlijk weer niks van…
Je doelt zeker op: border-radius properties? We lijken inderdaad wel gek om apart voor IE te ontwikkelen.
@ Nem
Jazeker, doe mij ook maar tabel-loze ronde hoekjes met css en zonder javascript, en dan liefst met één kleine afbeelding, en met flexibele aanpassing aan de grootte van de box, en met transparantie in de hoekjes , en ook bruikbaar voor zelfgetekende randjes …
@ admin
… en zonder specialiteiten voor IE (nou ja, met een paar kleine snufjes om IE in het gareel te krijgen) …
@ all
Ja, dat bestaat!
Voorbeeldjes: http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-index.htm
Artikel: http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners-nl.htm
… maar ik ben een boon als ik iets van bovenstaande code snap. Ik ben bang dat de css-styles niet toegepast worden, want in de ’s zit geen verwijzing daarnaartoe. En “display: none” betekent: niet laten zien, dus hoe ik het top-left.gif en het bottom-left.gif hoekje zou moeten zien is me een raadsel.
Ik durf de uitdaging aan: wie kan een werkende html-pagina maken met (alleen) bovenstaande codes, die het resultaat van het plaatje oplevert?
Succes voor alle hoekjes-makers!
francky
O, ik schreef “in de ’s zit geen verwijzing daarnaartoe”. Het reactieformulier staat dus geen vishaakjes toe. Bedoeling was: <div>’s (en als ie de html-code niet pakt: div’s).
@francky
Je had helemaal gelijk. Ik heb de verwijzingen naar de div’s inderdaad niet ingezet omdat ik vanuit ging dat mensen dat wel begrepen. Ik heb de code dusdanig aangepast dat het nu een stuken duidelijker is geworden. Bedankt voor je kritiek.