CSS 3 – del 2 – Texteffekter

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

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å 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; det första värdet anger X koordinaten, det vill säga hur skuggan horisontellt placeras i förhållande till texten. Det 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. Det 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

Det här är 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

Det 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

Här 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;
Glödande text
color: #000; background: #000; text-shadow: 1px 1px 4px #fff;
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;
}

För närvarande är det följande webbläsare som stöder denna funktion: Safari från och med 3.1 (windows), Firefox från 3.5, Internet Explorer (IE7, IE8) – om man använder sig av en .eot font-fil kan det fungera…

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.

Liknande poster:

Leave a Reply

Your email address will not be published. Required fields are marked *