Actief
Topic: Afgeronde hoeken aan vlakken geven
# Gepost op 05-08-2009 01:04
Bewerkt door Erwin op 30-08-2009 22:02
Bewerkt door Erwin op 30-08-2009 22:02
De opties
Er zijn een aantal opties bij ronde hoeken toepassen op een vlak. Je kan kiezen voor een vlak met een solide kleur, of een vlak met meerdere kleuren. Als je een vlak met meerdere kleuren ronde hoeken wilt geven, loop je al snel tegen het probleem aan, dat je niet weet welke kleur je de hoeken moet geven. Je kan dat oplossen door juist de buitenkant van de afronding af te dekken. Je moet dan helaas wel een vaste achtergrond hebben.
Een eenkleurig vlak
Allereerst maken we twee nieuwe documenten, een html en een CSS document. Open je favoriete html/css verwerker en plaats alvast de standaard code (doctype, head, body etc.). De html en css documenten hebben we nu alvast klaar. Nu openen we een grafish programma (Photoshop, The Gimp, MSpaint …). Maak een nieuw bestand aan, en stel een werkveld in. Je werkveld hangt af van de grote van de afrondingen. Als je afrondingen wilt van 10 pixels hoog en 10 pixels breed, dan krijg je een werkgebied van 20 x 20. Omdat je twee keer de breedte van de hoeken hebt, en twee keer de hoogte. Dus als de afronding in de breedte 20 pixels is, maak je het werkveld 40 pixels breed, het dubbele van wat je afrondings-breedte is.
Teken nu een cirkel in de kleur die je afgeronde hoeken moeten krijgen. Zorg dat de cirkel alle zijden van je werkvlak net raakt. Stel nu ook een achtergrond kleur in, als je achtergrond niet vast staat, moet je transparantie gebruiken. Sla de afbeelding op als afronding met de juiste extensie (jpg/png/gif).
Pak je favoriete html/css verwerker er weer bij, en neem het html document dat we eerder al hadden gemaakt voor je.
We beginnen met het stylesheet wat je hebt gemaakt toe te voegen aan het document.
Nu gaan we beginnen de div’s te plaatsen. Zet je cursor in de <body> sectie. Allereerst maken we de div die de afronding krijgt, maak deze en sluit hem af. Geef deze div de id “content” plaats je cursor in de div. Omdat een vierkant vier hoeken heeft, hebben we vier afrondingen nodig. Plaats dus 4 divs met op de volgende manier:
De spaties zijn om de line-height te laten werken. Dit is om een fout in IE6 tegen te gaan.
Open nu je style.css, plaats alvast het volgende stukje code:
Nu gaan we verder met het plaatsen van de rest van de code.
De line-height is om te voorkomen dat IE6 in de fout gaat.
Een meer kleurig vlak
Een vlak met meerdere kleuren en ronde hoeken is eigenlijk niet veel anders. Naast het plaatje verschilt er eigenlijk niets. Omdat we nu niet de binnenkant van het de hoeken moeten hebben, maken we nu een afbeelding van de buitenkant. De binnenkant laten we dan transparant, dus we hebben .png of .gif nodig. Rechts zie je een voorbeeld van wat we dan krijgen.
LET OP dit is een jpg, slecht om te laten zien hoe de afbeelding eruit ziet.
Er zijn een aantal opties bij ronde hoeken toepassen op een vlak. Je kan kiezen voor een vlak met een solide kleur, of een vlak met meerdere kleuren. Als je een vlak met meerdere kleuren ronde hoeken wilt geven, loop je al snel tegen het probleem aan, dat je niet weet welke kleur je de hoeken moet geven. Je kan dat oplossen door juist de buitenkant van de afronding af te dekken. Je moet dan helaas wel een vaste achtergrond hebben.
Een eenkleurig vlak
Allereerst maken we twee nieuwe documenten, een html en een CSS document. Open je favoriete html/css verwerker en plaats alvast de standaard code (doctype, head, body etc.). De html en css documenten hebben we nu alvast klaar. Nu openen we een grafish programma (Photoshop, The Gimp, MSpaint …). Maak een nieuw bestand aan, en stel een werkveld in. Je werkveld hangt af van de grote van de afrondingen. Als je afrondingen wilt van 10 pixels hoog en 10 pixels breed, dan krijg je een werkgebied van 20 x 20. Omdat je twee keer de breedte van de hoeken hebt, en twee keer de hoogte. Dus als de afronding in de breedte 20 pixels is, maak je het werkveld 40 pixels breed, het dubbele van wat je afrondings-breedte is.
Teken nu een cirkel in de kleur die je afgeronde hoeken moeten krijgen. Zorg dat de cirkel alle zijden van je werkvlak net raakt. Stel nu ook een achtergrond kleur in, als je achtergrond niet vast staat, moet je transparantie gebruiken. Sla de afbeelding op als afronding met de juiste extensie (jpg/png/gif).
Pak je favoriete html/css verwerker er weer bij, en neem het html document dat we eerder al hadden gemaakt voor je.
We beginnen met het stylesheet wat je hebt gemaakt toe te voegen aan het document.
- <link rel="stylesheet" type="text/css" href="/css/style.css">
Nu gaan we beginnen de div’s te plaatsen. Zet je cursor in de <body> sectie. Allereerst maken we de div die de afronding krijgt, maak deze en sluit hem af. Geef deze div de id “content” plaats je cursor in de div. Omdat een vierkant vier hoeken heeft, hebben we vier afrondingen nodig. Plaats dus 4 divs met op de volgende manier:
- <div id="content">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum lorem sed elit rhoncus convallis. Cras sed dolor nisi. Curabitur nisl diam, tempor a rhoncus sit amet, sagittis et nisl. Duis imperdiet neque justo, at commodo neque. Morbi malesuada, orci vel elementum facilisis, lorem lorem pulvinar turpis, at porta arcu eros eget turpis. Suspendisse commodo ante nec tellus dictum at ultricies dui scelerisque. Integer cursus ipsum eget est venenatis at luctus nisi pulvinar. Sed tristique lacinia orci, non euismod eros tincidunt nec. Nulla facilisi. Sed at sem ante, ut malesuada velit. Sed dolor purus, tristique id venenatis eget, vestibulum pretium sapien. Praesent a tellus erat, a dictum dui. Ut a turpis et ligula aliquam pretium. Integer rutrum viverra dolor, vel sollicitudin risus condimentum a. Praesent quis ipsum at ante pulvinar dignissim. Aliquam consequat volutpat ante quis gravida. Sed velit metus, mollis eu venenatis sed, semper vel tortor. Phasellus eget mi luctus massa interdum condimentum. Fusce molestie cursus nunc in porttitor. Donec ante lectus, aliquam sit amet consectetur et, ullamcorper commodo arcu.
- </div>
De spaties zijn om de line-height te laten werken. Dit is om een fout in IE6 tegen te gaan.
Open nu je style.css, plaats alvast het volgende stukje code:
- * {
- margin: 0px;
- padding: 0px;
- }
Nu gaan we verder met het plaatsen van de rest van de code.
- #content {
- width: 700px;
- margin: 0 auto;
- background-color: #909291;
- position: relative;
- padding: 20px;
- }
- /* HOEK AFRONDINGEN */
- .lb {
- background-position: left top;
- top: 0px;
- left: 0px;
- }
- .rb {
- background-position: right top;
- top: 0px;
- right: 0px;
- }
- .lo {
- background-position: left bottom;
- bottom: 0px;
- left: 0px;
- }
- .ro {
- background-position: right bottom;
- bottom: 0px;
- right: 0px;
- }
- .lb, .lo, .rb, .ro {
- background-image: url('rondjevb.jpg');
- background-repeat: no-repeat;
- position: absolute;
- line-height: 10px;
- width: 10px;
- }
De line-height is om te voorkomen dat IE6 in de fout gaat.
Een meer kleurig vlak
Een vlak met meerdere kleuren en ronde hoeken is eigenlijk niet veel anders. Naast het plaatje verschilt er eigenlijk niets. Omdat we nu niet de binnenkant van het de hoeken moeten hebben, maken we nu een afbeelding van de buitenkant. De binnenkant laten we dan transparant, dus we hebben .png of .gif nodig. Rechts zie je een voorbeeld van wat we dan krijgen.
LET OP dit is een jpg, slecht om te laten zien hoe de afbeelding eruit ziet.
DNA is een zeiksnor
