CSS3 – Border-radius, hoekafronding

uit de cursus Vormgeven met CSS

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Vormgeven met CSS

perm_identity Belinda | video_library 49 video's | query_builder 03:05:49

CSS3 is de nieuwe standaard en is onderverdeeld in modules waaraan apart ontwikkeld wordt.  Samen met HTML5 levert CSS veel voordelen voor webdesigners. De code is schoner, de vormgeving functioneler en de webpagina’s zijn bovendien sneller op diverse (mobiele)apparaten. Het biedt de fun en mooie hippe mogelijkheden voor het vormgeven van webpagina’s. Denk aan teksteffecten, patronen, schaduwrandjes en animaties. Samen met HTML5 levert CSS3 functionele grafische mogelijkheden, het wordt breed ondersteund en is sneller.

Modulaire ontwikkeling

Eigenlijk spreken we na CSS2 niet meer van een versie. De term CSS3 wordt gebruikt om de nieuwe vorm van CSS aan te duiden. CSS werd opgesplitst in aparte Modules. De modules waaraan apart gewerkt en ontwikkeld wordt zijn onder andere:

  • Backgrounds & Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations

Natuurlijk wordt er in deze online cursus aandacht besteed aan de leuke en fancy mogelijkheden, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot de onderwerpen.

In deze video behandel ik de opmaak mogelijkheden voor de randen van een box.

Er zijn op dit moment verschillende border-eigenschappen.

De border-radius, voor hoekafrondingen.

De border-shadow, waarmee je slagschaduwen of een schaduw naar binnen kunt maken.

En de border-image en daarmee kun je een randdecoratie creëren met het gebruik van een illustratie.

We beginnen met de border-radius.

Je kunt een hoekafronding kiezen die voor alle hoeken gelijk is. Maar je kunt dit ook per hoek bepalen en instellen.

Het eerste getal staat voor de linker bovenhoek. De tweede voor de rechter bovenhoek.

Dan de rechter onderhoek en als laatste de linker onderhoek.

Je typt dus de waarden van de hoeken in, met de klok mee.

Als je de kaderrand een dikte, kleur en lijnsoort mee wil geven. gebruik je hiervoor de css-eigenschap 'border'.

En een achtergrondkleur maak je met de css-eigenschap 'background-color'.

Ik doe dit voor in een voorbeeld document.

Open de index.html die behoort bij deze video.

Op deze webpagina staat een omsluitende wrapper.

Deze is pixels breed en staat gecentreerd.

En daar binnen bevindt zich een 'header'. Een 'contentwrapper' die artikelen omsluit. En als laatste een 'footer'.

Ik bekijk eerst een voorbeeld hiervan in de browser.

Dit is een vrij eenvoudige vormgeving.

De 'header' heeft een oranje achtergrondkleur, de 'contentwrapper' een grijze achtergrondkleur.

Binnen de 'contentwrapper' staan artikelen.

En deze hebben allen een witte achtergrondkleur.

En helemaal onderaan de pagina staat een lijst met links naar online css-generators die erg handig kunnen zijn.

Ik ga naar de webpagina van 'CSS Matic'.

Hier kun je onder andere de css-stijl voor een border-radius laten genereren.

Je kunt het venster instellen naar eigen wens.

Ik kan hier boven invoeren dat ik voor alle hoeken pixels wil hebben.

Vervolgens wordt direct de bijbehorende css-stijl gegenereerd in het voorvertonings venster.

Maar ik kan ook één of meerdere hoeken anders instellen.

Bijvoorbeeld de Top Right zet ik op en de Bottom Left zet ik op .

En dat resulteert vervolgens in deze vorm. ik kan ook de border-width instellen, die zet ik bijvoorbeeld op pixels.

Ik kan de border-style bepalen. Ik kan ook kiezen uit een hele lijst. En ik kan de border-color bepalen.

Ondanks dat je in dit venster ook een background kunt definiëren, wordt deze niet beschreven in de css-stijl.

Dus dit zul je alsnog met de hand moeten doen. Maar de 'border', die wordt wel beschreven.

Klik vervolgens in het voorvertonings venster op de knop 'Copy Text'.

En dan keren we terug naar onze broncode en gaan deze css-stijl toepassen.

Ik heb ervoor gezorgd dat ik zowel even mijn css-stijlblad in beeld heb als een voorvertoning van de pagina in de browser.

Je kunt de border-radius toepassen op 'inline-', 'inline-block-' en 'block-elementen'.

Allereerst nemen we een standaard block-element als bijvoorbeeld de h. Deze staat bovenin je stijlblad.

De border-radius code die je zojuist gekopieerd hebt, kun je nu eenvoudig plakken in je stijlblad.

En ik bekijk eerst een voorbeeld hiervan in de browser. En dan is dit het eindresultaat.

De gekozen achtergrondkleur is er inderdaad niet bij,

want daarvoor moet je dan nog zelf een background-color eigenschap maken en dan plaats ik daarvoor de oranje kleur.

Als ik deze stijl ook op een inline-element wil toepassen.

Moet ik in mijn broncode een inline-element maken. Bijvoorbeeld door hier een paar woorden te omsluiten met een 'span'.

En te eindigen. En wil ik deze 'span' kunnen benaderen, dan plaats ik hierin een 'class="borderradius".

Deze class kan ik dan vervolgens toepassen in mijn stijlblad. En ik schrijf hem even direct onder de h '.borderradius'.

En als ik exact dezelfde stijl wil toepassen.

Dan kan ik deze kopiëren en vervolgens nogmaals plakken voor deze css-stijl.

Ik bewaar mijn document en ik bekijk het eindresultaat in de browser.

En ook op een inline-element kun je de border-radius toepassen.

De artikelen op deze pagina staan in een html-element 'article' met de bijbehorende 'class="article".

Dit zijn block-elementen. En die kan ik vervolgens ook dezelfde vormgeving meegeven.

Dan ga ik naar het layout-gedeelte van mijn css-stijl.

Daar bevindt zich de class 'article' en ook deze geef ik een border-radius mee.

En dan bekijk ik opnieuw het eindresultaat in de browser.

En nu zullen alle artikelen op de pagina gebruik maken van deze border-radius.

Dan rest nu nog het toepassen van de border-radius op een inline-block-element.

Een inline-block-element is bijvoorbeeld een afbeelding.

Dus plaats ik in het tweede artikel een afbeelding. Deze heet 'beach.jpg'.

En heeft een breedte van pixels en een hoogte van pixels.

Ik maak een css-stijl aan voor het html-element 'img'.

Dan zullen alle afbeeldingen in de website voorzien worden van deze eigenschap.

En dat kan natuurlijk precies zijn wat je wilt. Ik kopieer de border-radius. En plak deze voor alle afbeeldingen.

Je kunt met de border-radius zelfs cirkels creëren. Ik doe dat voor bij deze afbeelding

Een voorwaarde daarvoor is dat de breedte en de hoogte gelijk moeten zijn.

Dus ik maak van de width pixels en ook van de height pixels.

En vervolgens plaats ik als border-radius ook pixels.

Dit zelfde doe ik dan ook bij de prefixes voor Firefox en voor Safari en Chrome. En zo heb ik dan nu een cirkel gecreëerd.