kaxigt.com

Jag skriver om webben för webben

Hem » CSS-guider » CSS 3 – del 2: Texteffekter

CSS 3 – del 2: Texteffekter

Postad: 8 november 2009 | CSS-guider | No Comments
Lästid: 3 minuter

Text shadow

Det huvudsakliga målet för denna egenskap var att ge designers och css-kodare ett redskap för att kunna göra texteffekter, vilket tidigare bara kunde bli möjligt genom att man renderade texten som en bild, med alla sideffekter detta gav. Texter som renderar likt bilder är inte sökbara och är av den anledningen väldigt svåra för sökmotorerna att indexera.
En annan sideffekt är det faktum att bilder kan vara bra mycket större än en liten kodlinje om man tänker i termer av filstorlek. Som du säkert vet är de flesta css-filer, vilka innehåller en webbsidas hela layout, mycket mindre än en enda bild på en webbsida. Så det är verkligen smart att använda en css-funktion istället för bilder när det handlar om att förminska onödig trafik.
-Matthias Kretschmann
Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil innan.

Att tänka på sin typografi när man designar är viktigt. Enhetliga fonter i rubriker och brödtext ger ett stilrent intryck. Men ibland kan man ju även vilja förhöja effekten.

Med CSS3 går det alldeles utmärkt – dock fungerar det inte i Internet Explorer. Text-shadow låter dig alltså lägga till en skugga på dina bokstäver.

Egentligen så är inte detta en ny funktion för just CSS3, den var från början tänkt att ingå i CSS level 2 men blev dock borttagen från och med CSS level 2.1. Om du sitter med en annan webbläsare än IE så ser du att jag använder denna effekt på alla mina rubriker.

Syntaxen ser ut så här i shorthand-declaration:

selektor {text-shadow: 0 1px 0 #fff;}

Skuggans värde läses in som följande:
Första värdet anger X koordinaten, det vill säga hur skuggan horisontellt placeras i förhållande till texten.

Andra värdet anger Y koordinaten, det vill säga hur skuggan vertikalt placeras i förhållande till texten. Det går också utmärkt att lägga in ett minusvärde på skuggan beroende på hur du vill placera den.

Tredje värdet anger blur radius, ju högre desto suddigare.

Det sista värdet anger färgen på själva skuggan.

.selektor {text-shadow: 0(x)    1px(y)   0(blur)    #fff;(skuggfärg)}

Enkel drop-shadow

En text med blurrig drop-shadow satt till värdet radius 3
color: #000; background: #fff; text-shadow: 2px 2px 3px #000;

Drop-shadow med negativt värde

Här är samma text med blurrig drop-shadow men satt till värdet -2
color: #000; background: #fff; text-shadow: 2px -2px 3px #000;

Två färger

Nu använder vi två olika färger
color: #003399; background: #fff; text-shadow: 2px 2px 2px #00ccff;

Apple Style

Liknar ingraverad text på metall
color: #000; background: #666; text-shadow: 0px 1px 1px #fff;

Lyft fram din text

Det här är en snygg effekt om du vill att en viss text ska sticka ut mot den övriga texten
color: #fff; background: #666; text-shadow: 0px 1px 1px #000;

Glödande text på tre vis

Glödande text
color: #fff; background: #000; text-shadow: 1px 1px 6px #fff;
En annan glödande text
color: #000; background: #000; text-shadow: 1px 1px 4px #fff;
Den tredje glödande text
color: #fff; background: #fff; text-shadow: 1px 1px 4px #000;

Text med flera skuggor

Visst är det häftigt
#000; background: #000;text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

Exempelkoderna är hämtade hos kremalicious.com

Vald webbfont med @font-face

Den här egenskapen var tidigare också föreslagen för CSS2.

Funktionen har faktiskt funnits implementerad hos IE sedan version 5, dock med vissa restriktioner; för att realisera denna implementation förlitar sig funktionen på ett Embedded Open Type (.eot) format som emellertid ingen av de andra webbläsarna använder.

Idag kan vi med CSS3 bädda in ett typsnitt genom att kalla på kommandot @font-face för varje valt typsnitt.

Låt oss säga att Du vill använda fonten Scriptina True Type till rubriken h1, koden ser då ut så här:

@font-face {
font-family: Scriptina;
src: url('http://www.dindomän.com/fonts/Scriptina.ttf');
}
h1 {
font-family: Scriptina;
font-size: 2.5em;
letter-spacing: 1px;
text-align: center;
}

Word-wrap

Egenskapen word-wrap tillåter att långa ord bryts till ny rad om de inte får plats. Det kan anges på två vis: normal eller break-word. Jämför gärna med funktionen No-wrap, radbrytning och paginerade dokument.

Kod:

.text_wrap { word-wrap :   break-word ; word-wrap: break-word; }

För fler texteffekter hänvisar jag till CSS3 cheat sheet.