CSS3 – Border-shadow, slagschaduw naar binnen of buiten

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 bekijken we de mogelijkheden voor het instellen van een border-shadow.

We noemen deze eigenschappen schaduw, maar het is maar net voor welke instelling je kiest.

Want hiermee kun je ook een schaduw naar binnen of een gloed naar buiten of naar binnen maken.

Het is een veelzijdige functie dus. En hij werkt als volgt.

De eerste twee getallen staan voor de verschuiving van de schaduw.

De eerste horizontaal en de tweede verticaal.

Het derde getal bepaalt de doezelstraal. Ook wel de 'blur' genoemd.

Dat is de zachtheid die je aan de schaduw geeft.

En de vierde bepaalt de spreiding. Hiermee kun je een schaduw eerder of later laten beginnen.

De kleur rgba bestaat uit de kleurbeschrijving in rgb. En rgb zijn monitorkleuren.

De 'a' staat voor 'alpha' en daarmee kun je een schaduw transparant maken.

Het getal betekent dat de schaduw niet meer zichtbaar is.

Als je . of . gebruikt dan is deze voor % zichtbaar of onzichtbaar. Het is maar hoe je het bekijkt.

En het getal is voor % zichtbaar.

En natuurlijk kun je alle getallen daar tussenin ook nog toepassen.

Met de waarde 'inset' wordt de schaduw of gloed naar binnen geplaatst.

Zonder deze waarde wordt deze altijd naar buiten geplaatst. We gaan dit toepassen in een voorbeeld document.

Open de index.html die behoort bij deze video.

En bekijk een voorbeeld van de pagina in een browser.

Helemaal onderop de pagina staat een lijst met links naar webpagina's,

waar je css eigenschappen kunt laten genereren.

Ik ga naar de website van 'CSS Matic'. Op deze webpagina kan ik ook een box-shadow creëren.

Via een makkelijk instelvenster kan ik precies bepalen hoe ik mijn schaduw wil gaan maken.

En in het voorvertonings venster zie ik hier een voorvertoning van.

Met Horizontal Length bepaal ik de horizontale verschuiving.

Deze kan zowel positief als ook negatief worden toegepast.

En ik wil deze pixels opschuiven. En met 'Vertical Length' bepaal ik vervolgens de verticale verschuiving.

En ook deze hou ik op pixels.

Met de Blur Radius kan ik vervolgens de schaduw verdoezelen, zachter maken.

En ik vind het wel mooi als hij vrij zacht is dus ik gebruik hiervoor een instelling van pixels.

En met Spread Radius kan ik dan vervolgens de schaduw eerder of later beginnen.

Als ik later begin, dat de schaduw groeit, langs alle kanten en dat deze heel hard wordt toegepast.

Ik kan hem ook eerder laten starten en dan wordt hij feitelijk nog zachter toegepast.

Omdat dus nu niet de volle schaduw wordt getoond maar slechts het uiteinde ervan.

Met de kleur bepaal ik of dit een schaduw moet worden of bijvoorbeeld een gloed.

Ik kies nu eerst nog voor schaduw, maar we gaan daarna ook een gloed toepassen.

En ik kan in principe hier ook al een achtergrondkleur geven.

Maar deze wordt wederom niet geplaatst in de css-stijl. Dus dit zul je altijd nog met de hand moeten doen

Maar je kan hier wel een voorvertoning bekijken dan met een achtergrondkleur die je bijvoorbeeld voor je eigen box,

in je webpagina hebt gemaakt. En met Color bepaal je dan de transparantie.

Deze staat nu op . en als ik hem nog iets zachter wil maken.

Dan kan ik dat doen door aan deze schuif te zitten of deze waarde op . te zetten.

En met de optie 'Inset' plaats ik deze slagschaduw naar binnen en als ik hem op 'Outline' zet,

dan wordt die dus standaard naar buiten toegepast. En ik ga eerst voor de standaard naar buiten.

Kopieer deze gecreëerde css-stijl en klik op 'Copy Text' in het voorvertonings venster.

En dan gaan we deze nu toepassen in ons voorbeeld document.

Open de index.html die behoort bij deze video en bekijk eerst een voorbeeld in de browser.

Een gedeelte van deze pagina is al vormgegeven.

zo wordt er onder andere ook al gebruikt gemaakt van de box-eigenschap border-radius.

Zowel voor een block-element of een inline-element en er is zelfs een cirkel gecreëerd voor de afbeelding.

Op deze pagina staan in het contentgebied vier artikelen.

En deze hebben de class="article" gekregen en ik wil aan deze artikelen een schaduw verbinden.

En ik plak dus de gecreëerde code van de webpagina in deze broncode. En bekijk het resultaat.

Zo makkelijk en snel kun je dus gebruik maken van slagschaduwen.

Zo makkelijk en snel kun je dus gebruik maken van slagschaduwen.