CSS3 Tekst Effect

March 6

Cascading Style Sheets er en stil sprog, der gør det muligt for webdesignere at angive skrifttyper, farver og andre stilarter, der styrer udseendet af en webside. Den mest komplicerede CSS strukturer hele layout, men du kan også bruge den til at skabe spændende tekst effekter. Med CSS niveau 3 (CSS3), kan du anvende effekter som ikke er tilgængelige i tidligere CSS versioner: skygger, gløder, roteret tekst og endda tre-dimensionelle tekst.

Drop Shadows

Før CSS3 tekst skygger blev tilgængelige, webdesignere behov for at bruge grafiske billedfiler til at gøre overskrifter med skygget tekst. Denne kode vil dog nu give nogen tekst på siden en slagskygge:

tekst-skygge: 1px 1px 3px RGBA (0,0,0,0.3);

Ovenstående kode kan gå inde enhver stil regel i et stylesheet. De første to værdier repræsenterer venstre og top forskydninger. Hvor meget skyggen er sløret, afhænger af den tredje værdi; højere værdier forårsage mere sløring. Den sidste værdi er den farve, men eksempel bruger RGBA (rød, grøn, blå og Alpha) i stedet for den sædvanlige hexadecimale farvekode bruges på websider. Den sidste værdi RGBA repræsenterer graden af ​​gennemsigtighed fra nul til én, vist til første decimal.

glødende Tekst

Glødende tekst bruger den samme kode ejendom som tekst skygger. Når du placerer tekst på en mørk baggrund, kan du give det en lys-farvet tekst skygge uden modregning:

tekst-skygge: 0px 0px 10px RGBA (0,255,0,0.7);

Dette eksempel vil skabe en lys grøn glød omkring tekst. Den 10-pixel sløre værdi blødgør slør, mens 70 procent gennemsigtighed niveau i RGBA koden toner farven ned lidt.

Roteret tekst

Den "omdanne" ejendom i CSS3 giver dig mulighed for at rotere tekst, sætte det skævt eller endda dreje den på sin side. Her er syntaksen:

omdanne: rotere (-90deg);
-webkit-transform: rotate (-90deg);
moz-transform: rotere (-90deg);
filter: progid: DXImageTransform.Microsoft.BasicImage (rotation = 3);

Den sidste linje kode er ikke CSS3 overhovedet; dette er en Internet Explorer-filter, der virker i alle IE versioner. To andre linjer indeholde "-webkit" og "moz" præfikser fordi "omdanne" er ikke en officiel CSS3 ejendom endnu. Dette eksempel kode vil gøre tekst rotere, så det kører lodret.

Tredimensional tekst

Denne tekst effekt anvender også tekst skygger, men det bruger solide skygger stablet op på toppen af ​​hinanden for at synes at "push up" teksten fra siden. I virkeligheden er de skygger cascading ned.

tekst-skygge: 0px 1px 0 #ccc, 0 2px 0 #bbb, 0 3px 0 #aaa, 0 4PX 0 # 999, 0 5px 0 # 888;

Dette er en forenklet version af den teknik skabt af designeren Mark Otto. Hver tekst skygge er adskilt af et komma, og hver skygge er en nuance af grå mørkere end den sidste. Skyggerne også stable ned længere og længere.


relaterede artikler