Modulen innehåller CSS -funktioner relaterade till textdekoration, till exempel understrykningar, textskuggor och accenter i texten på östasiatiska språk.

Egenskaper för textdekoration

1. Linjeutsmyckning: understrykning, stroke och genomstrykning

Understrukningar, linjer och genomstrykningsrader visas endast för rutor som inte kan bytas ut på radnivå (display: inline) och visas i hela texten, inklusive mellanslag mellan tecken och ord, med undantag för indrag i början och slutet av en rad.

Webbläsare kan bryta understrykningar och linjer där linjen korsar tecknet, vilket ger ett visst avstånd på vardera sidan av teckningens kontur. När webbläsaren bryter en understrykning eller en streck vid gränserna för en teckning, bör linjeformen vid gränsen matcha teckens form. Specifikationen dikterar dock inte en specifik metod för att "följa formen" på en glyf, vilket överlåter det till webbläsaren.

Ris. 1. Avbrott i understrykningen

1.1. Dekorationslinjens utseende: egenskapen text-dekoration-linje

Webbläsarstöd

IE: —
Kant: —
Firefox: 36, 35 -moz-
Krom: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC -webbläsare för Android: 11.8
Chrome för Android: 73
Samsung Internet: 7.2

Egenskapen text-dekoration-rad avgör vilken typ av rad, om någon, läggs till elementet.

Fastigheten ärvs inte.

Syntax

Text-dekoration-rad: ingen; text-dekoration-rad: understruken; text-dekoration-linje: överlinje; text-dekoration-rad: linje-igenom; text-dekoration-rad: blinka; text-dekoration-linje: understruken överlinje; text-dekoration-linje: understruken understruken linje-through; text-dekoration-rad: ärva; text-dekoration-rad: initial;

1.2. Dekorationslinjestil: egendom i text-dekorationsstil

Webbläsarstöd

IE: —
Kant: —
Firefox: 36, 35 -moz-
Krom: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC -webbläsare för Android: 11.8
Chrome för Android: 73
Samsung Internet: 7.2

Egenskapen text-dekoration-stil definierar stilen på linjerna som ritas för att dekorera texten som anges i elementet. Värdena har samma betydelse som för egendomen i gränsstil.

Fastigheten ärvs inte.

Syntax

Text-dekoration-stil: solid; text-dekoration-stil: dubbel; text-dekoration-stil: prickig; text-dekoration-stil: streckad; text-dekoration-stil: vågig; text-dekoration-stil: ärva; text-dekoration-stil: initial;

1.3. Dekorationsfärg: text-dekoration-färg egendom

Webbläsarstöd

IE: —
Kant: —
Firefox: 36, 35 -moz-
Krom: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC -webbläsare för Android: 11.8
Chrome för Android: 73
Samsung Internet: 7.2

Egenskapen text-dekoration-färg anger färgen på textdekorationslinjesatsen för elementet med text-dekorationslinje.

Fastigheten ärvs inte.

Syntax

Text-dekoration-färg: currentColor; text-dekoration-färg: lax; text-dekoration-färg: # 00ff00; text-dekoration-färg: rgba (255, 128, 128, 0,5); text-dekoration-färg: transparent; text-dekoration-färg: ärva; text-dekoration-färg: initial;

1.4. En sammanfattning av dekorationslinjeegenskaper: egenskapen textdekoration

Webbläsarstöd

IE: —
Kant: —
Firefox: 36, 35 -moz-
Krom: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC -webbläsare för Android: 11.8
Chrome för Android: 73
Samsung Internet: 7.2

Textdekorationsegenskapen är en kort form för att skriva text-dekoration-raden text-dekoration-stil text-dekoration-färgegenskaper i en enda deklaration. Saknade värden är inställda på deras ursprungliga värden. Standardtext-dekoration: ingen fast strömColor; ... Fastigheten ärvs inte. Stilen för alla textdekorationer måste dock vara densamma för ett element.

1.5. Layoutradslayout: egenskapen text-understrykning

Webbläsarstöd

IE: —
Kant: 12
Firefox: —
Krom: 71
Safari: —
Opera: —
iOS Safari: —
UC -webbläsare för Android: ?
Chrome för Android: 71
Samsung Internet: —

Egenskapen text-understrykning-position anger positionen för den understrukna raden som anges i ett element.

Fastigheten ärvs.

Värden:
bil	Webbläsaren kan använda valfri algoritm för att bestämma positionen för understrykningen, men raden måste placeras på eller under textens grundlinje. Standardvärde.
under	Understruken finns under elementets textinnehåll. I detta fall skär understrukningen vanligtvis inte nedstigaren. Detta värde kan kombineras med vänster eller höger om en viss sida föredras i vertikala typografiska lägen.
vänster	I vertikala typografilägen är understrykningen justerad till vänster om texten. Detta värde tolkas dock som under.
höger	I vertikala typografilägen är understrykningen justerad till höger om texten. Detta värde tolkas dock som under.
ärva
första

Syntax

Text-understrykning-position: auto; text-understrykning-position: under; text-understrykning-position: vänster; text-understrykning-position: höger; text-understrykning-position: under vänster; text-understrykning-position: under höger; text-understrykning-position: ärva; text-understrykning-position: initial; Ris. 2. Understruk text på båda sidor i vertikala typografilägen med vänster och höger värde

2. Textskugga: egenskapen text-skugga

Webbläsarstöd

IE: 10
Kant: 12
Firefox: 3.5
Krom: 4
Safari: 4
Opera: 10
iOS Safari: 3.2
UC -webbläsare för Android: 11.8
Chrome för Android: 73
Samsung Internet: 4

Egenskapen text-skugga används för att lägga till skuggor i text. Textskugga är ett roligt verktyg som låter dig skapa fantastiska effekter. Skuggor kan vara enkelskiktade eller flerskiktiga, suddiga, färgade eller halvtransparenta. När du anger en skugga för ett element kan du bara ange en längd och färg, vilket skapar en färgad kopia av ett enskilt tecken eller ord. Med hjälp av skuggan kan du också göra texten mer läsbar om kontrasten mellan textens färg och bakgrunden är liten.

Varje skugga appliceras både på själva texten och på elementen i dess dekoration (egenskapstext-dekoration). Du kan ange flera skuggor samtidigt och ange dem separerade med kommatecken. Skuggorna överlappar varandra, men överlappar inte själva texten. Den första skuggan är alltid ovanpå resten av skuggorna. Fastigheten ärvs.

Varje skugga definieras av två eller tre längder och en valfri färg. Längder lika med 0 är tillåtna.

Fastigheten ärvs inte.

Ris. 3. Syntax för egenskapen text-skugga

text-skugga
Värden:
x-förskjutning	Anger skuggans horisontella förskjutning. Ett positivt värde drar en skuggförskjutning till höger om texten, ett negativt värde drar en skugga till vänster.
y-offset	Anger skuggans vertikala förskjutning. Ett positivt värde flyttar ned skuggan, ett negativt värde uppåt.
fläck	Ställer in oskärpa radie. Negativa värden är inte tillåtna. Om värdet för oskärpa är noll är skuggans kant skarp. Annars, ju högre värde desto mer suddas kanten av skuggan.
Färg	Anger skuggor. Om det inte finns någon färg tas den använda färgen från färgegenskapen.
ingen	Standardvärdet betyder ingen textskugga. Tar bort skuggan av ett element från en grupp element med den angivna egenskapen.
första	Ställer fastighetsvärdet till dess standardvärde.
ärva	Ärver fastighetsvärdet från det överordnade elementet.

Till skillnad från box-shadow klipps textskuggor inte ut och kan visas om texten är delvis transparent. Precis som box-shadow påverkar textskuggor inte layouten och orsakar inte rullning eller ökning av storleken på det rullningsbara området.

Syntax

Textskugga: 2px 2px 4px rosa; text-skugga: # fc0 1px 0 10px; text-skugga: 5px 5px # 4D4644; textskugga: blå 2px 5px; textskugga: 5px 10px; text-skugga: ärva; text-skugga: initial;

2.1. Exempel på textskugga

Affisch skugga

Textskugga

Text -skugga -1 (bakgrund: # 77F7DE; färg: vit; textskugga: -2px -2px 0 # 4D4644, 2px -2px 0 # 4D4644, -2px 2px 0 # 4D4644, 2px 2px 0 # 4D4644, 4px 4px 0 vit, 5px 5px 0 vit, 6px 6px 0 vit; bokstavsavstånd: 0,1em;)

3D -skugga

Textskugga

Text-skugga-2 (bakgrund: linjär-gradient (-45deg, # FEE864, # F5965E); färg: # f4f4f4; textskugga: -1px -1px vit, 1px 1px grå, 2px 2px # 7a7a7a, 3px 3px # 757575 , 4px 4px # 707070, 5px 5px # 6b6b6b, 6px 6px # 666666, 7px 7px # 616161, 8px 8px # 5c5c5c, 9px 9px # 575757, 10px 10px # 525252, 11px 11px # 4d 0 18p, 18p 0 # 18d .4), 18px 18px 10px rgba (0, 0, 0, .4);)

Skuggtext

Textskugga

Text-skugga-3 (bakgrund: # FFE6DB; färg: # FFE6DB; bokstavsavstånd: .1em; text-skugga: 3px 0 rgba (250, 111, 142, .5), 6px 0 rgba (250, 111, 142 , .4), 9px 0 rgba (250, 111, 142, .3), 12px 0 rgba (250, 111, 142, .2), 15px 0 rgba (250, 111, 142, .1);)

Varje webbdesigner vill bara skapa värdefulla webbplatser som alla Internetanvändare kommer att uppskatta.

Naturligtvis är det omöjligt att tillfredsställa alla smaker. Som webbdesigner bör du också försöka göra ditt bästa för att skapa en webbplats som dina besökare kommer att älska! Lyckligtvis är de mest kraftfulla verktygen och resurserna redan tillgängliga för att skapa fantastiska webbplatser, och vi har sammanställt några användbara CSS -utdrag för att hjälpa dig att skapa coola saker för dina projekt!

den 15 fantastiska texteffekter med CSS3- alla är utvalda och vi tror att de kommer att bidra till att ge en gnista av originalitet till dina projekt. Vissa är användbara för specifika ändamål, medan andra är återanvändbara.

Om du älskar blommor och vill ha en underbar och fullfärgad text -effekt, så är detta erbjudande den perfekta lösningen för dig! Detta är mycket lämpligt för att visa namnet på en kreativ byrå eller för en portfölj av projekt. Naturligtvis kan den användas för alla andra typer av projekt - om du vill sticka ut är denna texteffekt ett utmärkt val!

Rippeleffekten är verkligen fantastisk! Den kan användas för att lägga till lite mystik. Det skulle vara intressant att använda det för att markera en rabatt eller specialerbjudande som bara fungerar under en mycket kort tid. Vad tycker du?

Detta är en mycket intressant texteffekt; Jag tror att på grund av färgschemat som används kan den appliceras för att betona vintage -mönster. Det är en smart användning av textskuggor och har potential att fånga användarnas uppmärksamhet. Glöm inte att Vintage aldrig kommer att dö!

Följande texteffekt fungerar som en magnet för tittare. Du kan använda det här för att förbättra formen, för att markera en ny produkt som erbjuds till salu, eller helt enkelt för att få ögonen på betraktaren. Denna lockande och kloka webbdesigner kommer att använda den till sin fördel!

Jag tror att trenden bland webbdesigners är att skapa mer dynamiska presentationer online. Coola glideffekter och sidövergångar är de vanligaste möjligheterna att lägga till mer dynamik på webbplatsen. Men om du vill ha ännu mer dynamik kan denna fantastiska CSS3 -texteffekt vara ett bra alternativ. Jag tror att detta är en enkel men effektiv lösning!

De mest krävande kunderna är barn, men det ska inte få dig att vägra att skapa webbplatser för dem. Om du arbetar för ett barnrelaterat projekt eller ett roligt projekt, kan du använda denna effekt för text! I Jokerman har typsnittet sin egen speciella skönhet, eller hur?

CSS3- och 3D -modellering har mer gemensamt än bara siffran “3”! Med CSS3 kan du skapa vackra 3D -effekter som ett av det här utdraget. Denna effekt är lämplig för en stor pool av projekt och jag tycker att du ska prova!

Ibland kan lek med eld vara kul! Oroa dig inte, jag är inte en pyroman, jag är bara förvånad över denna coola texteffekt! Jag kommer inte ihåg att ha sett denna texteffekt i andra webbplatslayouter, så här är en annan anledning att använda den och skapa en originalwebbplats!

I en situation där du värdesätter mer diskret texteffekt är denna "dimmiga effekt" min rekommendation. Det är sant att det kan påverka användbarheten på din webbplats negativt. Å andra sidan, om du inte tar risker vinner du inte! Naturligtvis kan den göras om för att passa dina krav!

Även om denna texteffekt är ganska komplex, implementeras den med CSS, det finns inget JavaScript. Personligen tror jag att den kan användas för musiksajter eller för att markera ett specifikt element från en webbplats.

Detta är en mycket diskret effekt, men jag tror att det kan lägga till en "wow" -effekt i layouter. Metallic look underbart utformad och accentuera nya / försvinnande stunder.

Jag kan vara subjektiv eftersom jag är ett stort fan av Star Wars -filmen, men den här texteffekten är riktigt cool. Detta gör dina projekt mer intressanta och utan tvekan kommer filmens fans att bli kär i din webbplats på grund av denna effekt.

Denna texteffekt förbättrar interaktionen mellan användare och webbplats dramatiskt och visar återigen att CSS3 har mycket potential och en begåvad webbdesigner kan skapa vackra animationer med bara några rader kod.

Detta är det sista objektet på den här listan, men du bör inte ignorera det. Mycket mer, Cherry on the cake, faktum är att det inte finns mer än 10 CSS3 fantastiska texteffekter. Jag tycker att du bör kontrollera dem noggrant och studera hur dessa engagerande effekter implementerades.

De som fortfarande tycker att CSS -attribut inte räcker för att skapa intressanta texteffekter bör ta hänsyn till detta! Den kombinerar flera effekter - animering, 3D -perspektiv, skuggor och textinställningar. Jag tror att kombinationen skugga och slag är gammaldags, men det här projektet är utformat för att visa dig vad som kan uppnås med "ren CSS".

Har du någonsin haft en obehaglig känsla när dina bildtexter inte matchade färgerna på knappar, paneler eller bara texten inte stod i kontrast till sidans bakgrund? Genom att använda CSS -skuggor detta problem kan enkelt lösas genom att använda egenskapen text-skugga för att förbättra textens läsbarhet och kontrast.

I de givna exemplen använder vi textskuggor i olika situationer, vilket ger dig den nödvändiga basen så att du kan studera denna fråga på egen hand.

1. Grundinställning

Skapa en ny HTML -fil och lägg till följande kod i den Html och CSS:

Lägg till taggen i HTML -sektionen

med klasstext:

Web Code Geeks

För detta element kommer vi att lägga till en CSS -textskugga. Jag ställer in initiala egenskaper för detta element för att det ska se snyggt ut på skärmen:

Låt oss nu ställa in text-skugga-attributet för texten. Men låt oss först ta reda på vilka värden detta attribut tar:

Textskugga: 4px 4px 4px #ccc;

1. 4px - förskjutning längs X -axeln ( horisontell);
2. 3px - Y -offset ( vertikal);
3. 2px - oskärpa värde;
4. #ccc - färg.

Den är inställd så här:

Text-skugga: horisontell-offset vertikal-offset oskärpa färg;

de färg kan representeras av hexadecimal kod #ccc eller RGBA (0,0,0,0,3); ... I CSS kan vi tillämpa en CSS inre skugga på vår text så här:

.text (
typsnitt: 5em; / * gör texten större * /
text-skugga: 4px 3px 2px #ccc;
}

Webbläsarvyn för den skuggade texten kommer att se ut så här:

EXEMPEL webbplats

Därefter kommer vi att ändra bakgrundsfärgen på kroppselementet på olika sätt. Vi gör detta för att vissa CSS -skuggor behöver en specifik bakgrund eller så syns de inte. För att texten ska se snyggare ut sätter vi den med versaler.

2. Skriv ut effekt

Ställ in textfärgen på en något mörkare nyans än bakgrunden. Applicera sedan en liten vit textskugga med reducerad opacitet:

Kropp (
bakgrund: # 222;
}
.text (
typsnitt: 5em;
färg: rgba (0,0,0,0,6); /* text färg */
textskugga: 2px 2px 3px rgba (255,255,255,0,1); / * lägg till skugga * /
}

Med RGBA -koden kan du ställa in färgens opacitet. Lägg märke till att textfärgen har en opacitet på 60% (0,6) och CSS div skuggar 10% (0,1).

EXEMPEL webbplats

3. Retro skugga effekt

För en retroskugga behöver du inte alltid applicera oskärpa. Ta den här retroskuggan till exempel:

Kropp (
}
.text (
typsnitt: 5em;
färg vit; / * ändra textfärg till vit * /
textskugga: 6px 6px 0px rgba (0,0,0,0,2); / * lägg till retroskugga * /
}

EXEMPEL webbplats

4. Dubbel skuggeffekt

Intressant nog kan du lägga till mer än en CSS -teckenskugga. Detta kan göras enligt följande: text-skugga: skugga1, skugga2, skugga3; Låt oss lägga till två skuggor, en med bakgrundsfärgen och den andra lite mörkare:

Text (
typsnitt: 5em;
textskugga: 4px 3px 0px #fff, 9px 8px 0px rgba (0,0,0,0,15); / * ger två skuggor * /
}

Vår bakgrund är vit, så vi behöver inte någon annan färg för den. I webbläsaren kommer effekten att se ut så här:

EXEMPEL webbplats

5. Fjärrskuggaeffekt

Denna effekt är beroende av funktionen CSS Multiple Beautiful Shadows. Nedan kan du se effekten med fyra skuggor som kastas ner med varierande intensitet:

Kropp (
bakgrund: # fff3cd; / * ändra bakgrundsfärgen * /
}
.text (
typsnitt: 5em;
färg vit;
text-skugga: 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);
}

EXEMPEL webbplats

6. Mark Dottos 3D -effekt

Kropp (
bakgrund: # 3495c0; / * ändra bakgrundsfärgen * /
}
.text (
typsnitt: 5em;
färg vit;
text-skugga: 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);
}

Se nu hur dessa inre CSS -textskuggor ser ut i webbläsaren:

EXEMPEL webbplats

7. Realistisk klipptexteffekt av Gordon Hall

Gordon använder lite avancerad CSS -magi för att ställa in inte bara en yttre skugga, utan också en realistisk inre skugga:

Kropp (
bakgrund: #cbcbcb; / * ändra bakgrundsfärgen * /
}
.text (
typsnitt: 5em;
färg: transparent;
bakgrundsfärg: # 666666;
-webkit-bakgrund-klipp: text;
-moz-bakgrund-klipp: text;
bakgrundsklipp: text;
text-skugga: rgba (255,255,255,0,5) 0px 3px 3px;
}

Och detta skapar effekten av att klippa ut text.

EXEMPEL webbplats

8. Textglödeffekt

kropp (
bakgrund: # 992d23; / * ändra bakgrundsfärgen * /
}
.text (
typsnitt: 5em;
färg vit;
textskugga: 0px 0px 6px rgba (255,255,255,0,7);
}

Denna skugga skapar en glödande effekt på texten:

EXEMPEL webbplats

9. Ojämn texteffekt

kropp (
bakgrund: # 629552; / * ändra bakgrundsfärgen * /
}
.text (
typsnitt: 5em;
färg: rgba (0,0,0,0,6);
textskugga: 2px 8px 6px rgba (0,0,0,0,2),
0px -5px 35px rgba (255,255,255,0,3);
}

EXEMPEL webbplats

10. Lång skuggeffekt

Denna effekt kan göras med

Bakgrundsfärg: rgb (147, 201, 67);
textskugga: 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) ;
färg: #eaeaea;

EXEMPEL webbplats

Slutsats

Som du kan se är egenskapen textskugga mycket lätt att använda och du kan använda den för att skapa dina egna kreativa CSS-skuggor.

I denna handledning visar vi dig sex fantastiska CSS3-texteffekter: 3D-effekt skapad med textskugga, effekter med lutningar och bildmasker, effekter med övergångar och bakgrundsklippsegenskapen och mer. Utan tvekan kan de alla vara till nytta, för med CSS3 kan du få några riktigt imponerande resultat. Några av ovanstående effekter fungerar i de flesta webbläsare som stöder CSS3, men några exempel fungerar bara på Webkit -motorn. Därför, för den ultimata upplevelsen, titta på demoen i Webkit-aktiverade webbläsare som Chrome, Safari och Opera.

Låt oss först lägga till några allmänna stilar för alla våra ytterligare experiment:

#main div (font-size: 120px; font-weight: bold; position: relative;)

Här ställer vi in ​​teckenstorlek och vikt. Låt oss nu börja.

Effekt # 1 - 3D -text med CSS3 Text Shadow

Det är svårt att föreställa sig alla möjligheter som den traditionella textskuggegenskapen ger. I CSS3 tillämpar egenskapen textskugga en skugga på text. Du kan ställa in skuggans horisontella storlek, skuggans vertikala storlek, oskärpa -avståndet och skuggans färg:

Text-skugga: h-skugga v-skugga oskärpa färg; / * exempel: * / text-skugga: 2px 2px 5px # FF7777;

För att lägga till mer djup i texten behöver du bara lägga till några skuggor, till exempel:

# eff1 (färg: # 00b506; textskugga: 0px 0px 0 rgb (-28, 153, -22), 1px 1px 0 rgb (-55, 126, -49), 2px 2px 0 rgb (-83, 98, -77), 3px 3px 0 rgb (-111, 70, -105), 4px 4px 0 rgb (-139, 42, -133), 5px 5px 0 rgb (-166, 15, -160), 6px 6px 0 rgb (-194, -13, -188), 7px 7px 0 rgb (-222, -41, -216), 8px 8px 7px rgba (0, 0, 0, 0. 75 ), 8px 8px 1px rgba (0, 0, 0, 0. 5 ), 0px 0px 7px rgba (0, 0, 0 ,. 2 ) ; }

Effekt # 2 -Gradient CSS3 -text med -webkit -mask -image för Webkit Engine

Denna effekt använder CSS3-masker, egenskapen -webkit-mask-image. Den här egenskapen stöds ännu inte av andra webbläsare, men förhoppningsvis kommer den att stödjas i framtiden:

# eff2 (färg: # 00b506; textskugga: 1px 1px 1px # 000000 ; -webkit-mask-image: -webkit-gradient (linjär, vänster upp, vänster botten, från (rgba (0, 0, 0, 1)), color-stop ( 50 % , rgba (0, 0, 0 ,. 3 )), till (rgba (0, 0, 0, 1)))); )

Effekt # 3-regnbåge CSS3 textbakgrund med -webkit-text-fyll-färg för Webkit-motor

För att uppnå denna effekt använder vi bakgrundsklippsegenskapen med ett anpassat textvärde, som endast stöds av Webkit-webbläsare:

# eff3 (bakgrundsbild: -webkit-linjär-gradient (vänster, # ff0000, # ff7f00, # ffff00, # 00ff00, # 00ffff, # 0000ff, # 8b00ff); bakgrundsbild: -moz-linjär-gradient (vänster , # ff0000, # ff7f00, # ffff00, # 00ff00, # 00ffff, # 0000ff, # 8b00ff); bakgrundsbild: -ms-linjär-gradient (vänster, # ff0000, # ff7f00, # ffff00, # 00ff00, # 00ffff , # 0000ff, # 8b00ff); bakgrundsbild: -o-linjär-gradient (vänster, # ff0000, # ff7f00, # ffff00, # 00ff00, # 00ffff, # 0000ff, # 8b00ff); bakgrundsbild: linjär-gradient (till höger, # ff0000, # ff7f00, # ffff00, # 00ff00, # 00ffff, # 0000ff, # 8b00ff); -webkit-text-fill-color: transparent; -webkit-bakgrund-klipp: text;)

Effekt # 4 -Lysande text med CSS3 -övergångar och -webkit -bakgrundsklipp för Webkit -motorn

I en Webkit -webbläsare går det ibland en ljusstråle genom texten. För att uppnå denna effekt används samma bakgrundsklippsegenskap med ett anpassat textvärde:

# eff4 (bakgrund:# 00b506 -webkit-gradient (linjär, vänster upp, höger uppifrån, från (# 00b506), till (# 00b506), färgstopp (0. 5 , #ffffff)) 0 0 no-repeat; färg: rgba (255, 255, 255, 0. 1 ); typsnitt: 120px; font-weight: fet; position: relativ; -webkit-animation: skina 2s oändligt; -webkit-bakgrund-klipp: text; -webkit-bakgrund-storlek: 300px; ) @ -webkit -nyckelbilder lyser ( 0 % (bakgrundsposition: uppe till vänster;) 100 % (bakgrundsposition: uppe till höger;))

Effekt # 5 - Skisserad CSS3 -text med Webkit Text -Stroke -egenskapen

Du kan enkelt lägga till en intressant platt textstreck med egenskapen -webkit-text-stroke:

# eff5 (färg: # 00b506; -webkit-text-stroke: 1px # 000 ; }

Effekt # 6 - 3D Rotera text med CSS3 Y -Rotation Transform Property

Du kan rotera text med hjälp av övergångar och rotationstransformationer runt Y-axeln:

# eff6 (färg: # 00b506;) # eff6 p (färg: # 8A2BE2; markör: pekare; display: inline-block; -webkit-övergång: .5s; -moz-övergång: .5s; -o-övergång :. 5s; övergång: .5s;) # eff6 p: sväva (-webkit-transform: rotateY (-180deg); -moz-transform: rotateY (-180deg); -0 -transform: rotateY (-180deg); transform: rotateY (-180deg); filter: progid: DXImageTransform .Microsoft .BasicImage (rotation = 2))

Slutsats

I den här självstudien tittade vi på sätt att skapa olika texteffekter med hjälp av CSS3 -egenskaper. Vi hoppas att du gillade denna handledning och kommer att tycka att den är användbar. Inte alla egenskaper som användes för denna handledning fungerar i alla webbläsare, men de används alla bara för att skapa vackra effekter som inte påverkar funktionaliteten, så att de kan tillämpas, till exempel med @ stöds endast för webbläsare som stöder dessa egenskaper.

Översättning - plikt