Google fonts in jouw wordpress site
10 juni
Twitter Bootstrap 3 – Hoe begin ik er mee
1 september
Laat alles zien

CSS text-shadow is een leuke en simpele manier om bezoekers te imponeren met typography. Als je het gedoseerd gebruikt kan het je website visueel erg interresant maken zonder al te veel gedoe.

CSS text-shadow in het kort

De text-shadow is een, en dat had je inmiddels ook al geraden, een manier om schaduw aan tekst toe te voegen.  Het verschil met de box-shadow is dat het alleen maar de typography aanroept en ook dat het inset-attribuut mist. De inset gebruik je om binnenkant schaduw te maken, dus moeten we iets creatiever zijn om dit effect te bereiken. De text-shadow kan een basis schaduw maken. Maar het wordt pas interessant als we met meerdere schaduwen tegelijkertijd bezig gaan.

De syntax

De basis syntax voor text-shadow gaat als volgt : text-shadow: horizontal-offset vertical-offset blur color;

Als je nu een basis schaduw van 90 graden wilt maken moet het er zo uit zien.

text-shadow: 0px 3px 5px #000;

Om meerdere schaduwen te maken voeg je een komma tussen elke individuele schaduw. Bijvoorbeeld :

text-shadow: 0px 3px 5px #000, 0px -3px 5px #fff;

De waarde voor de kleur kan zowel een hex alswel een rgb/rgba waarde zijn.  Het meest ideale is dan toch wel de rgba waarde omdat deze ook de transparantie bepaald (de a).  Een voorbeeld met rgba

text-shadow: 0px 3px 5px rgba(20,20,20,0.5);

Voorbeeld 1: Het emboss Effect

text-effects-emboss

HTML:

Emboss

CSS: body { background-color: #dfe3e5; font: 700 6.25em Helvetica; text-align: center; } .emboss { text-shadow: 0 -4px 3px rgba(255, 255, 255, 0.3), 0 3px 4px rgba(0, 0, 0, 0.2); color: #d7dee1; }

Voorbeeld 2: Het Deboss effect

text-effects-deboss

HTML:

Deboss

CSS: body { background-color: #dfe3e5; font: 700 6.25em Helvetica; text-align: center; } .deboss { text-shadow: 0 2px 3px rgba(255, 255, 255, 0.3), 0 -1px 2px rgba(0, 0, 0, 0.2); color: #d7dee1; }

Voorbeeld 3: Retro Dubbele schaduw

text-effects-retro

HTML:

Retro

CSS: body { background-color: #dfe3e5; font: 700 6.25em Helvetica; text-align: center; } .deboss { text-shadow: 1px 1px 0 rgb(223, 227, 229), 4px 4px 0 rgba(0, 0, 0, 0.25); color: #3f3f3f; }

Conclusie

Deze tekst effecten zijn erg makkelijk om te maken, ze zijn letterlijk maar 1 regel met CSS. Het is echter wel de moeite waard om een tijdje te experimenteren totdat je het gewenste effect hebt bereikt. Het is belangrijk om een goede balans te vinden tussen subtiliteit en impact. All met all een simpele manier om je website in het oog te laten springen.

via Quick Tip: How To Create CSS Text Effects Using Only The text-shadow Attribute : Medialoot.

Vincent Hofman
Vincent Hofman
Sinds 1998 bezig met het maken van webpagina's , muzikant en levensgenieter. Ik vertaal veel Engelse artikelen in het Nederlands en zoek het web af voor interessante sites en weetjes. Heb sinds 2013 mijn eigen bedrijf voor web-consulting en web-developement

Geef een reactie

%d bloggers liken dit: