Lettertype met schaduw in html. Voorbeelden van het gebruik van CSS-tekstschaduw. Lang schaduweffect

laat een reactie achter 6,950

Vlad Merzjevitsj

Vroeger was tekst met een schaduw een bepaalde mode en een soortgelijk effect was op bijna elke site te vinden. In een grafische editor wordt eenvoudig een schaduw toegevoegd, het ziet er geweldig uit, hier is de tekst met een schaduw en op webpagina's geschoven, ongeacht de stijl van de site en het gevoel voor verhoudingen van de ontwerper. Toen de meeste browsers de eigenschap tekst-schaduwstijl begonnen te ondersteunen, was de mod al geslaagd en nu is tekst met een schaduw vrij zeldzaam. Text-shadow heeft echter een aantal andere impliciete toepassingen die maar weinig mensen vermoeden. Met deze eigenschap kunt u omlijnde tekst maken, deze "extruderen", een gloed creëren, vervagen en nog veel meer.

Tekstschaduw gebruiken

Vier parameters worden als waarden geschreven: schaduwkleur, horizontale en verticale offset en schaduwvervagingsradius (Fig. 1).

Rijst. 1. Tekst-schaduw parameters

Kleur kan aan het begin of aan het einde van alle parameters worden geschreven in elk geschikt CSS-formaat. Je kunt dus ook een semi-transparante schaduw maken met het rgba-formaat. Positieve offsetwaarden "werpen" de schaduw naar rechts en naar beneden, terwijl negatieve waarden de schaduw naar links en naar boven werpen. Om een schaduw rond de tekst te hebben, volstaat het om de offset-waarden op nul te zetten. De vervagingsradius bepaalt hoe scherp de schaduw zal zijn. Hoe groter de vervagingsstraal, hoe zachter de schaduw eruitziet.

Het grote voordeel van tekstschaduw is de mogelijkheid om meerdere verschillende schaduwen tegelijk toe te voegen, waarbij hun parameters worden gescheiden door komma's. Met deze functie kunt u over het algemeen verschillende effecten maken.

Helaas ondersteunt IE voor versie 10.0 geen tekstschaduw, dus we zullen geen mooie dingen zien in deze browser.

Omlijnde tekst wordt gekenmerkt door het feit dat elke letter is omgeven door een lijn waarvan de kleur afwijkt van de kleur van de tekst (Fig. 2). Dit effect werkt het beste met grootformaat serumlettertypen, zoals koppen. Voor hoofdtekst is het gebruik van een overzicht alleen nadelig voor de leesbaarheid.

Rijst. 2. Overzichtstekst

De contour kan op twee manieren worden gemaakt. Bij de eerste methode stellen we een nulpuntverschuiving in voor de schaduw en een kleine straal van de vervaging, letterlijk 1-2 pixels (voorbeeld 1). Als u de vervagingswaarde verhoogt, verandert het pad in een gloed rond de tekst, wat een ander effect is.

Voorbeeld 1. Kadertekst

Tekst

Overzichtstekst

De contour die met deze methode wordt gemaakt, wordt getoond in Fig. 1. De contour blijkt enigszins wazig, dus voor degenen die een duidelijke lijn willen krijgen, is de tweede methode bedoeld. Het bestaat uit het gebruik van vier scherpe schaduwen van dezelfde kleur, ze worden met één pixel naar verschillende hoeken verschoven (voorbeeld 2).

Voorbeeld 2. Vier schaduwen voor een pad

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Tekst

Overzichtstekst

De vorm van een dergelijke contour is weergegeven in Fig. 3. Het valt op dat de contour expressiever is.

Rijst. 3. Contour met vier schaduwen

Om het 3D-teksteffect toe te voegen dat wordt getoond in Fig. 4 worden meerdere schaduwen tegelijkertijd aangebracht, die horizontaal en verticaal met één pixel ten opzichte van elkaar zijn verschoven.

Rijst. 4. 3D-tekst

Voor mij persoonlijk lijkt dit type tekst op letters in retrostijl en nogmaals, het werkt het beste voor koppen, en niet voor de hoofdtekst van een webpagina.

Het aantal schaduwen hangt af van hoeveel u de tekst naar voren wilt "duwen". Hoe groter het getal, hoe groter de "diepte" van de letters, hoe kleiner, integendeel, de driedimensionaliteit. Voorbeeld 3 gebruikt vijf tinten van dezelfde kleur.

Voorbeeld 3. Schaduw voor het toevoegen van driedimensionaliteit

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Tekst

Koelkast met tien kamers

Stel voor alle schaduwen de vervagingsradius in op nul en dezelfde kleur. Schaduwen verschillen alleen in offsetwaarden.

Tekst in reliëf maken

Om het effect van reliëftekst of, met andere woorden, reliëf te creëren, moet de kleur van de tekst overeenkomen met de kleur van de achtergrond. Een deel van de letters "uitstekend" boven het oppervlak is alsof ze verlicht zijn, terwijl het andere deel in de schaduw staat (Fig. 5).

Rijst. 5. Tekst in reliëf

Om een soortgelijk effect toe te voegen, hebben we twee schaduwen nodig - we verschuiven de witte schaduw naar links één pixel naar boven en de donkergrijze naar rechts naar beneden (voorbeeld 4).

Voorbeeld 4. Tekst in reliëf

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Tekst

Reliëf tekst

Het reliëf komt het beste tot zijn recht op een grijze achtergrond, dus het effect is niet geschikt voor elk kleurenschema van de site. Trouwens, het is gemakkelijk om reliëftekst te krijgen, geen reliëftekst, verwissel gewoon de kleuren van de schaduw.

Tekstschaduw: # 333 -1px -1px 0, #fff 1px 1px 0;

Gloed

De gloed rond de tekst is dezelfde schaduw, alleen helder en contrasterend. Om dus een gloedeffect te creëren, volstaat het om de kleur van de schaduw te veranderen en de gewenste vervagingsradius in te stellen. Aangezien de gloed rond de tekst uniform moet zijn, moet de schaduwverschuiving op nul worden ingesteld. In afb. 6 toont een voorbeeld van een gloed van verschillende kleuren.

Rijst. 6. Tekst gloed

Voorbeeld 5. Gloed

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Tekst

Positieve kant

Duistere kant

vervagen

De schaduw zelf is wazig, dus als je alleen de schaduw laat en de tekst zelf verbergt, krijgen we wazige letters (Fig. 7), en de mate van onscherpte kan eenvoudig worden aangepast via de tekst-schaduwparameter.

Rijst. 7. Tekst met vervaging

Om de originele tekst te verbergen, volstaat het om de kleur als transparant in te stellen (voorbeeld 6). De schaduwkleur fungeert dan als de kleur van de tekst en de vervagingsstraal bepaalt de mate van onscherpte van de letters.

Voorbeeld 6. Tekst vervagen

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Tekst

Onscherpe tekst

Schaduw- en pseudo-klassen

De schaduw hoeft niet direct aan de tekst te worden toegevoegd; de eigenschap text-shadow werkt goed met de: hover en: first-letter pseudo-classes. Hierdoor worden interessante effecten met tekst verkregen, zoals de omtrek van de eerste letter van een alinea of de gloed van een link wanneer u er met de muiscursor overheen beweegt. Voorbeeld 7 toont dergelijke technieken.

Voorbeeld 7. Pseudoklassen gebruiken

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Tekst

Een nicheproject vertraagt het traditionele kanaal, ongeacht de kosten. Marktstructuur, het weggooien van details, stabiliseert de marketing- en verkoopafdeling met behulp van de ervaring van eerdere campagnes. Merkopbouw duwt zeker spontaan geconvergeerde PR weg en herovert een marktsegment. De investering synchroniseert de sociale status van rollenspellen, waardoor de concurrentie toeneemt. Het merk dicteert natuurlijk het plaatsingsplan, voortbouwend op de ervaring van eerdere campagnes.

Heb je ooit een ongemakkelijk gevoel gehad als je bijschriften niet overeenkwamen met de kleuren van knoppen, panelen of omdat de tekst niet goed afstak tegen de achtergrond van de pagina? Via CSS-schaduwen het is gemakkelijk om dit probleem op te lossen door de eigenschap text-shadow te gebruiken om de leesbaarheid en het contrast van de tekst te verbeteren.

In de gegeven voorbeelden gebruiken we tekstschaduwen in verschillende situaties, waardoor je de nodige basis hebt om dit probleem zelf verder te bestuderen.

1. Basisinstelling

Maak een nieuwe Html-bestand en voeg de volgende code eraan toe: HTML en CSS:

CSS-knoppen

Voeg in de HTML-sectie de tag toe

met klastekst:

Webcode-nerds

Voor dit element voegen we een CSS-tekstschaduw toe. Ik heb de initiële eigenschappen voor dit element ingesteld om het er op het scherm goed uit te laten zien:

Laten we nu het tekst-schaduwkenmerk voor de tekst instellen. Maar laten we eerst eens kijken welke waarden dit attribuut aanneemt:

Tekstschaduw: 4px 4px 4px #ccc;

4px - offset langs de X-as ( horizontaal);
3px - Y-offset ( verticaal);
2px - vervagingswaarde;
#ccc - kleur.

Het is als volgt ingesteld:

Tekstschaduw: vervagingskleur met horizontale offset en verticale offset;

de kleur kan worden weergegeven door hexadecimale code #ccc of RGBA (0,0,0,0.3); ... In CSS kunnen we als volgt een CSS-binnenschaduw op onze tekst toepassen:

.tekst (
lettergrootte: 5em; / * maak de tekst groter * /
tekstschaduw: 4px 3px 2px #ccc;
}

De browserweergave van deze gearceerde tekst ziet er als volgt uit:

VOORBEELD site

Vervolgens zullen we de achtergrondkleur van het body-element op verschillende manieren veranderen. We doen dit omdat sommige CSS-schaduwen een specifieke achtergrond nodig hebben, anders zijn ze niet zichtbaar. Om de tekst er mooier uit te laten zien, zetten we deze in hoofdletters.

2. Afdrukeffect

Stel de tekstkleur in op een iets donkerdere tint dan de achtergrond. Breng vervolgens een kleine witte tekstschaduw aan met verminderde dekking:

Lichaam (
achtergrond: # 222;
}
.tekst (
lettergrootte: 5em;
kleur: rgba (0,0,0,0.6); /* tekst kleur */
tekstschaduw: 2px 2px 3px rgba (255,255,255,0.1); / * schaduw toevoegen * /
}

Met RGBA-code kunt u de dekking van de kleur instellen. Merk op dat de tekstkleur een dekking heeft van 60% (0,6) en dat de schaduwen van de CSS div 10% (0,1) zijn.

VOORBEELD site

3. Retro schaduweffect

Voor een retro-schaduw hoef je niet altijd vervaging toe te passen. Neem bijvoorbeeld deze retro-schaduw:

Lichaam (
}
.tekst (
lettergrootte: 5em;
kleur wit; / * verander de tekstkleur in wit * /
tekstschaduw: 6px 6px 0px rgba (0,0,0,0.2); / * retro schaduw toevoegen * /
}

VOORBEELD site

4. Dubbel schaduweffect

Interessant is dat u meer dan één CSS-lettertypeschaduw kunt toevoegen. Dit kan als volgt: tekst-schaduw: schaduw1, schaduw2, schaduw3; Laten we twee schaduwen toevoegen, één met de achtergrondkleur en de andere een beetje donkerder:

Tekst (
lettergrootte: 5em;
tekstschaduw: 4px 3px 0px #fff, 9px 8px 0px rgba (0,0,0,0.15); / * geeft twee schaduwen * /
}

Onze achtergrond is wit, dus we hebben er geen andere kleur voor nodig. In de browser ziet het effect er als volgt uit:

VOORBEELD site

5. Schaduweffect op afstand

Dit effect is afhankelijk van de CSS Multiple Beautiful Shadows-functie. Hieronder zie je een effect waarbij vier schaduwen met verschillende intensiteit worden neergeworpen:

Lichaam (
achtergrond: # fff3cd; / * verander de achtergrondkleur * /
}
.tekst (
lettergrootte: 5em;
kleur wit;
tekst-schaduw: 0px 3px 0px # b2a98f,
0px 14px 10px rgba (0,0,0,0.15),
0px 24px 2px rgba (0,0,0,0.1),
0px 34px 30px rgba (0,0,0,0.1);
}

VOORBEELD site

6. Markeer het 3D-effect van Dotto

Lichaam (
achtergrond: # 3495c0; / * verander de achtergrondkleur * /
}
.tekst (
lettergrootte: 5em;
kleur wit;
tekst-schaduw: 0 1px 0 #ccc,
0 2px 0 # c9c9c9,
0 3px 0 #bbb,
0 4px 0 # b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba (0,0,0, .1),
0 0 5px rgba (0,0,0, .1),
0 1px 3px rgba (0,0,0, .3),
0 3px 5px rgba (0,0,0, .2),
0 5px 10px rgba (0,0,0, .25),
0 10px 10px rgba (0,0,0, .2),
0 20px 20px rgba (0,0,0, .15);
}

Kijk nu hoe deze innerlijke CSS-tekstschaduwen eruitzien in de browser:

VOORBEELD site

7. Realistisch gesneden teksteffect door Gordon Hall

Gordon gebruikt wat geavanceerde CSS-magie om niet alleen een buitenste schaduw in te stellen, maar ook een realistische binnenschaduw:

Lichaam (
achtergrond: #cbcbcb; / * verander de achtergrondkleur * /
}
.tekst (
lettergrootte: 5em;
kleur: transparant;
achtergrondkleur: # 666666;
-webkit-achtergrond-clip: tekst;
-moz-achtergrond-clip: tekst;
achtergrond-clip: tekst;
tekstschaduw: rgba (255,255,255,0.5) 0px 3px 3px;
}

En dit creëert het effect van uitgesneden tekst.

VOORBEELD site

8. Tekstgloedeffect

lichaam (
achtergrond: # 992d23; / * verander de achtergrondkleur * /
}
.tekst (
lettergrootte: 5em;
kleur wit;
tekstschaduw: 0px 0px 6px rgba (255,255,255,0.7);
}

Deze schaduw zorgt voor een gloeiend effect op de tekst:

VOORBEELD site

9. Hobbelig teksteffect

lichaam (
achtergrond: # 629552; / * verander de achtergrondkleur * /
}
.tekst (
lettergrootte: 5em;
kleur: rgba (0,0,0,0.6);
tekst-schaduw: 2px 8px 6px rgba (0,0,0,0.2),
0px -5px 35px rgba (255,255,255,0.3);
}

VOORBEELD site

10. Lang schaduweffect

Dit effect kan worden gedaan met behulp van

Achtergrondkleur: rgb (147, 201, 67);
tekst-schaduw: 1px 1px rgb (131, 179, 60), 2px 2px rgb (131, 179, 60), 3px 3px rgb (131, 179, 60), 4px 4px rgb (131, 179, 60), 5px 5px rgb (131, 179, 60), 6px 6px rgb (131, 179, 60), 7px 7px rgb (131, 179, 60), 8px 8px rgb (131, 179, 60), 9px 9px rgb (131, 179, 60), 10px 10px rgb (131, 179, 60), 11px 11px rgb (131, 179, 60), 12px 12px rgb (131, 179, 60), 13px 13px rgb (131, 179, 60), 14px 14px rgb (131, 179, 60), 15px 15px rgb (131, 179, 60), 16px 16px rgb (131, 179, 60), 17px 17px rgb (131, 179, 60), 18px 18px rgb (131, 179, 60 ), 19px 19px rgb (131, 179, 60), 20px 20px rgb (131, 179, 60), 21px 21px rgb (131, 179, 60), 22px 22px rgb (131, 179, 60), 23px 23px rgb ( 131, 179, 60), 24px 24px rgb (131, 179, 60), 25px 25px rgb (131, 179, 60), 26px 26px rgb (131, 179, 60), 27px 27px rgb (131, 179, 60) ;
kleur: #eaeaea;

VOORBEELD site

Gevolgtrekking

Zoals u kunt zien, is de eigenschap text-shadow heel gemakkelijk te gebruiken en kunt u deze gebruiken om uw eigen creatieve CSS-schaduwen te maken.

Typografie is mijn favoriete speeltje als het gaat om webdesign. Toch kun je met zijn hulp de aandacht van een persoon trekken door het type of de grootte van het lettertype een beetje te veranderen. Het is heel eenvoudig en zeer effectief, er zijn veel boeken geschreven over dit onderwerp en er zijn veel exemplaren gebroken in geschillen. Vandaag zal ik geen advies geven over typografie in het algemeen - ik zal niet genoeg kwalificaties hebben, maar hoe je de tekst van je site kunt stylen is altijd welkom. Dus vandaag zal ik u enkele gebruiksscenario's voor de CSS3-eigenschap laten zien. schaduw tekst, heel eenvoudig, maar in de juiste handen kan het wonderen verrichten.

Basistekst-schaduwsyntaxis

Deze woning CSS3 werkt in alle nieuwe browsers, zonder voorvoegsels van leveranciers zoals -moz en -webkit. Zelfs IE kan worden geleerd om deze eigenschap te begrijpen, je moet Modernizr of analogen gebruiken.

Tekstschaduw: x-offset y-offset vervagingskleur;

Dat is de basissyntaxis. De eerste waarde is de horizontale offset, de tweede is de verticale offset, schaduwvervaging en schaduwkleur. Laten we een voorbeeld bekijken:

Tekstschaduw: 2px 4px 3px rgba (0,0,0,0.3);

Verschuif de schaduw, vervaagd met 3 pixels en toegewezen zwart met 30% dekking. Waarom gebruik ik alfa of transparantie? Dit geeft je meer vrijheid in handelingen, je kunt het iets lichter of donkerder maken door simpelweg de transparantiewaarde te veranderen, zonder dat je je zorgen hoeft te maken over het kiezen van een kleur. Het blijkt snel genoeg, ik raad het aan.

reliëf letters

body (achtergrond: # 222;) #text h1 (kleur: rgba (0,0,0,0.6); tekstschaduw: 2px 2px 3px rgba (255,255,255,0.1);)

Het werkprincipe is hier als volgt: de achtergrond is iets lichter dan de letters, een lichte schaduw met een lichte transparantie. Het resultaat staat op de foto, probeer het maar.

harde schaduw

tekstschaduw: 6px 6px 0px rgba (0,0,0,0.2);

Nu is de retrostijl in zwang, en daar gebruiken ze gewoon een schaduw zonder vervaging. Nou, we zijn er klaar voor

Dubbele schaduw

tekstschaduw: 4px 3px 0px #fff, 9px 8px 0px rgba (0,0,0,0.15);

En hier gebruiken we nog een lastige eigenschap van het pand schaduw tekst, kunnen selectors worden gescheiden door komma's, waardoor er zoveel schaduwen worden gecreëerd als nodig is. De eerste schaduw kan een kleur krijgen zoals de achtergrond, daarna zal er een effect zijn zoals op de foto.

Beneden en weg

tekst-schaduw: 0px 3px 0px # b2a98f, 0px 14px 10px rgba (0,0,0,0.15), 0px 24px 2px rgba (0,0,0,0.1), 0px 34px 30px rgba (0,0,0,0.1 );

De tekst is volumineus en lijkt over de achtergrond te hangen, nietwaar? Ik gebruikte 4 schaduwen met verschillende niveaus van onscherpte en locatie. Over het algemeen geldt: hoe meer schaduwen, hoe realistischer het effect, houd hier rekening mee in je projecten.

Kleine 3D-tekst

tekstschaduw: 0px 4px 3px rgba (0,0,0,0.4), 0px 8px 13px rgba (0,0,0,0.1), 0px 18px 23px rgba (0,0,0,0.1);

Vergelijkbaar met het vorige voorbeeld, drie schaduwen, maar dichterbij geplaatst, vandaar het effect van driedimensionaliteit en gewicht van de tekst.

3D-tekst door Mark Dotto

tekst-schaduw: 0 1px 0 #ccc, 0 2px 0 # c9c9c9, 0 3px 0 #bbb, 0 4px 0 # b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba (0,0,0, .1), 0 0 5px rgba (0,0,0, .1), 0 1px 3px rgba (0,0,0, .3), 0 3px 5px rgba (0,0,0, .2), 0 5px 10px rgba (0 , 0,0, .25), 0 10px 10px rgba (0,0,0, .2), 0 20px 20px rgba (0,0,0, .15);

Ik kwam het werk van deze ontwerper op het net tegen en kon op geen enkele manier voorbij komen. Indrukwekkend realisme.

Ingevoegde tekst van Gordon Hall

achtergrondkleur: # 666666; -webkit-achtergrond-clip: tekst; -moz-achtergrond-clip: tekst; achtergrond-clip: tekst; kleur: transparant; tekstschaduw: rgba (255,255,255,0.5) 0px 3px 3px;

Nog een voorbeeld van indrukwekkende vastgoedafhandeling schaduw tekst... Maar het principe is hetzelfde als ik hierboven al zei. Iets lichtere achtergrond, lichte schaduw onder de letters en donker erboven. Eenvoudig gemaakt, maar erg cool.

glanzende tekst

tekstschaduw: 0px 0px 6px rgba (255,255,255,0.7);

Ook hier is alles eenvoudig - we verplaatsen de schaduw niet, we vervagen hem harder en maken hem wit. Dat is alle glans.

Retro stijl

tekst-schaduw: -10px 10px 0px # 00e6e6, -20px 20px 0px # 01cccc, -30px 30px 0px # 00bdbd;

Ik sprak hierboven over de retrostijl, deze komt uit dezelfde opera. Het is nu zo modieus, meerdere heldere schaduwen. Solliciteer naar eigen inzicht

Meerdere lichtbronnen

tekstschaduw: 0px 15px 5px rgba (0,0,0,0.1), 10px 20px 5px rgba (0,0,0,0.05), -10px 20px 5px rgba (0,0,0,0.05);

Dit is het effect van meerdere lichtbronnen die schaduwen werpen in alle richtingen.

convexe tekst

kleur: rgba (0,0,0,0.6); tekstschaduw: 2px 8px 6px rgba (0,0,0,0.2), 0px -5px 35px rgba (255,255,255,0.3);

De reliëftekst was er al, nu is hij bol. Een vrij simpel effect, maar het ziet er bijvoorbeeld heel mooi uit in headlines. Gebruik, probeer

Tot slot wil ik zeggen - CSS3-eigenschap voor tekstschaduw heel eenvoudig, zoals je al kunt zien. Maar het competente gebruik ervan, en zelfs met een beetje fantasie, kan wonderen verrichten.
Experimenteer, fijne dag

Beschrijving

Voegt een schaduw toe aan de tekst en stelt ook de parameters in: schaduwkleur, offset ten opzichte van de tekst en vervagingsradius. De eigenschap text-shadow kan werken in combinatie met de: first-letter en: first-line pseudo-elementen.

Syntaxis

tekst-schaduw: geen | schaduw [, schaduw] *
waar is de schaduw:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

De waarden

Geen Annuleert het toevoegen van een slagschaduw. kleur De kleur van de schaduw in elk beschikbaar CSS-formaat. Standaard is de schaduwkleur hetzelfde als de tekstkleur. Optionele parameter. x-offset De horizontale offset van de schaduw ten opzichte van de tekst. Een positieve waarde voor deze parameter stelt de verschuiving van de schaduw naar rechts, negatief - naar links in. Vereiste parameter. y-offset De verticale offset van de schaduw ten opzichte van de tekst. Het is ook acceptabel om een negatieve waarde te gebruiken die de schaduw boven de tekst verhoogt. Vereiste parameter. radius Specificeert de radius voor het vervagen van de schaduw. Hoe groter deze waarde, hoe meer de schaduw wordt afgevlakt, deze wordt breder en lichter. Als deze parameter niet is opgegeven, wordt deze standaard ingesteld op 0. Merk op dat het anti-aliasing-algoritme meestal anders is in browsers, dus het uiterlijk van de schaduw kan enigszins verschillen, afhankelijk van de ingestelde anti-aliasing-parameters.

Het is toegestaan om meerdere schaduwparameters op te geven, gescheiden door een komma. CSS3 houdt rekening met de volgende volgorde: de eerste schaduw in de lijst wordt helemaal bovenaan geplaatst, de laatste in de lijst - helemaal onderaan. In CSS2 is de volgorde omgekeerd, met de eerste schaduw helemaal onderaan en de laatste helemaal bovenaan.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

schaduw tekst

Zou citrus in het struikgewas van het zuiden leven? Ja, maar een nepkopie!

Het resultaat van het voorbeeld wordt getoond in Fig. een.

Rijst. 1. Zicht op de schaduw in de Safari-browser

Browsers

Opera ondersteunt maximaal 6-9 schaduwparameters. Het verhogen van deze waarde en het vergroten van de vervagingsradius boven 100px heeft invloed op de browserprestaties. Opera 9.5-10 gebruikt meerdere slagschaduwen, zoals in CSS2.

Safari ouder dan 4.0 ondersteunt slechts één schaduwinstelling, de rest wordt genegeerd. Sinds versie 4.0 zijn er al heel wat schaduwen aan het werk.

Internet Explorer begrijpt de eigenschap text-shadow pas sinds versie 10.0. In plaats daarvan wordt het filter: Schaduweigenschap (opties) gebruikt. De volgende constructie bepaalt bijvoorbeeld de kleur van de schaduw (# 666666), de richting (45 ° vanaf de verticaal) en de hoeveelheid offset (4 pixels).

filter: Schaduw (Kleur = # 666666, Richting = 45, Kracht = 4);

De CSS-eigenschap text-shadow is verantwoordelijk voor het instellen van de schaduw van de tekst. Zeer vergelijkbaar met de eigenschap box-shadow.

CSS tekst-schaduw syntaxis

tekst-schaduw: X Y R kleur;

X - verschuiving van de schaduw ten opzichte van de tekst langs de X-as (meestal ingesteld in pixels);
Y - verschuiving van de schaduw ten opzichte van de tekst langs de Y-as (meestal gespecificeerd in pixels px);
R - straal van de schaduw (meestal ingesteld in pixels, px);
kleur - kleur (kan in elk formaat worden ingesteld, zie de namen van de html-kleuren)

De tekst-schaduwsyntaxis staat meerdere schaduwen toe, gescheiden door komma's. bijvoorbeeld

tekstschaduw: X1 Y1 R1 kleur1, X2 Y2 R2 kleur2, ...;

De prioriteit van de schaduw (die hoger is, die lager is) hangt af van de specifieke versie van de CSS. In CSS3 wordt de eerste slagschaduw in de lijst helemaal bovenaan geplaatst, de laatste in de lijst helemaal onderaan. In CSS2 is het tegenovergestelde waar.

Voorbeelden: tekstschaduw maken in html

Voorbeeld 1. Eenvoudige tekstschaduw in html

Hieronder ziet u het eenvoudigste voorbeeld met tekstschaduw. Hier hebben we beide offsets (X en Y) toegepast en ook de vervagingsradius gemaakt.

Текст с тенью

Текст с тенью

Пример №2. Фиксированная или жесткая тень у текста в html

Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.