CSS3 – Text-shadow

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.

Er zijn een paar css texteffecten bij gekomen.

Met de eigenschap 'text-shadow' kun je teksten voorzien van een schaduw of een gloed.

En met de eigenschap,

wordwrap,

Kun je ervoor zorgen dat lange woorden toch worden afgebroken naar de volgende regel.

Als deze niet past binnen de beschikbare ruimte.

Ik laat eerst de mogelijkheden van 'text-shadow' zien.

je kunt meerdere keren een schaduw of een gloed toepassen op tekst.

We noemen de eigenschap 'text-shadow' en dat suggereert dat je er alleen maar schaduwen mee kan maken.

Maar afhankelijk van de kleur kan dit net zo goed een gloed maken.

Je plaatst komma gescheiden meerdere keren een slagschaduw of een gloed in één stijlregel.

Zorg er wel voor dat je de juiste volgorde van waarden aanhoudt.

Met het eerste getal bepaal je de horizontale verschuiving. De x-positie van de schaduw.

Met de tweede bepaal je de verticale verschuiving. naar beneden of omhoog.

Daarna bepaal je de doezelstraal en als laatste bepaal je de kleur.

Ik doe dit voor in een voorbeeld document.

De titel van deze pagina staat in een 'div' met de class="company".

Deze kun je opzoeken in je stijlblad en we gaan hier een slagschaduw aan verbinden.

Dat doen we dan vervolgens met de eigenschap 'text-shadow'.

En dan de juiste waarden achter elkaar. En ik begin met de horizontale verplaatsing van pixels.

Daarna een verticale verplaatsing van pixels.

Voor de 'blur' geef ik pixels op, dus geen doezelaar.

En vervolgens kies je voor een manier waarop je de kleur wilt beschrijven.

Dat kan een kleurnaam zijn als bijvoorbeeld 'black'.

maar je kunt ook gebruik maken van hexadecimale waarden. En voor zwart is dat dan #.

Of de rgb kleurwaarde. Dat is rgb (,,).

Stel dat ik deze schaduw toch te hard vind. Dan kan ik vervolgens toch nog bij 'blur' een waarde opgeven.

Ik kan meerdere malen een schaduw of gloed toepassen.

Stel dat ik hiervoor, als eerste nog, een gloed wil plaatsen.

En deze wil ik niet horizontaal verplaatsen dus die komt pixels, maar wel pixels naar beneden verplaatsen.

Ik wil dat deze strak blijft, dus geen blur krijgt. En vervolgens kies ik voor een creme-kleur.

Dan plaats ik daarna een komma, om de schaduwen te scheiden.

En dat zou dan dit resultaat opleveren. Als ik de zwarte slagschaduw die nu onderop ligt.

Toch graag enige transparantie zou willen meegeven.

Dan gebruik ik daarvoor niet de 'rgb', maar de 'rgba'. Dan krijg ik een vierde kanaal, dat is het 'alpha-kanaal'.

En daarmee kan ik dan vervolgens de transparantie bepalen.

Dus als ik hem enigszins wat transparanter wil maken, dan kan ik hem bijvoorbeeld op . zetten.

Dat is % zichtbaar.

Als ik nu een resultaat bekijk dan zie je dat de schaduw net weer even wat zachter wordt.

En dat je dus overal de achtergrond er doorheen ziet komen.