Ronde hoeken met 1 afbeelding
Maar 1 afbeelding nodig
Er bestaan verschillende manier om ronde hoeken te krijgen voor een CSS box model, we hebben het al gehad over de methode met 5 afbeeldingen, ook de methode met 4 afbeeldingen is reeds besproken, nu iets geheel nieuws: ronde hoeken met maar 1 afbeelding.
Wat is dan die magische afbeelding?
Zoals je kan zien zijn alle hoeken reeds voorzien in deze ene afbeelding, door slim gebruik van CSS kunnen we deze afbeelding als het ware knippen en op de respectievelijke 4 hoeken zetten.
Is er ook een keerzijde?
Natuurlijk, wat had je gedacht?
Het nadelige hiervan is, als je echt voor 101% semantisch bent aangelegd, zal het gebruik van een2 lege unordend lijsten zijn voor het verwezenlijken van de hoeken.
Maar laten we aannemen dat niet iedereen zo is, of wel willig is eens een oogje toe te knijpen, of het door de vingers te zien, etc…
De voorbeelden
Ik heb 4 voorbeelden gemaakt waarbij je telkens de broncode mag bestuderen en je mag ook de afbeeldingen ’stelen’.
Voorbeeld #1
Hoeken en achtergrond in het bruin#963D27, bekijk het voorbeeld.
Voorbeeld #2
Hoeken en achtergrond in het blauw#369, bekijk het voorbeeld.
Voorbeeld #3
Hoeken en achtergrond in het groen#696, bekijk het voorbeeld.
Voorbeeld #4 speciaal
Bovenste hoeken blauw#369met mogelijk voor een titel, onderste hoeken en achtergrond in het groen#696, bekijk het voorbeeld.
Gelezen: 2840 | Styling, Design, CSS, Tutorials
Op Saturday 18 February 2006
Leuk idee, maar ik hou het toch liever bij ronde hoeken zonder afbeeldingen. Want bij één keer vergroten krijg je al een foute rand te zien (in Fx, Op). Misschien heb je daar een oplossing voor?
Op Saturday 18 February 2006
Dat kan je verhelpen door de radius van je cirkel te verfijnen.
Maar toch zal je ooit bij vergroting altijd voor dit probleem komen te staan, zelf bij andere manieren.
Nu wil ik toch wel weten hoe je ronde hoeken maakt zonder afbeeldingen ?
Op Saturday 18 February 2006
Kijk maar, ik heb het op een CSS testpagina van mij gezet.
Op Saturday 18 February 2006
Ja met Nifty corners, dat is met JavaScript.
Niet dat het een slechte manier is, hier ga ik weer, behavior zou niet mogen worden misbruikt voor opmaak.
Op Sunday 19 February 2006
Mark, als je wat beter had gekeken, maak ik gebruik van de eerste manier, zonder JS
Op Tuesday 21 February 2006
Wat met transparant rond de hoeken (buitenkant)?
Is dit mogelijk m.b.v. deze techniek?
Op Tuesday 21 February 2006
ja natuurlijk, dan zet je het wit om naar transparent
Op Thursday 02 November 2006
Ik heb dit eens gevonden rijdens mijn googletocht naar ronde hoekjes in css:
http://www.html-site.nl/ronde-hoek.php
ronde hoeken zonder images, maar niet liquid.
Greetszzz Dennis
www.re-solutie.nl
www.photo74.com
Op Thursday 29 November 2007
I.p.v. een lijst kun je toch ook gebruiken:
div.header {
}
div.header div {}
div.footer {}
div.footer div {}
Dan ben je wel semantisch bezig
Op Tuesday 14 July 2009
De ronde hoeken zoals geconstureerd op eerder genoemde pagina http://www.html-site.nl/ronde-hoek.php werkt prima, maar bij vergroten of verkleinen van het lettertype gaat het niet goed. Dit is te verhelpen door in plaats van px, em te gebruiken voor je afmetingen. Om de juiste em-waarden te krijgen is het even experimenteren. Begin maar met een factor 0,06 van je px-waarde. (nb: 0,06 is geen absoluut vast te stellen factor). Je kunt werken met meerdere cijfers achter de komma voor de preciese instellingen.