Texteffekter, del 1 – reflektioner

I en liten följetång på css3.se kommer vi gå igenom olika texteffekter man enkelt kan åstadkomma med hjälp av de nya funktionerna i CSS3.

Först ut är reflektioner som är en vanlig effekt att använda i alla typer av logos, bilder med mera där text förekommer. Genom att använda egenskapen box-reflect kan man välja var reflektionen på ett objekt skall ske , hur långt ifrån(offset) den skall förekomma samt om man vill maska reflektionen med en bild.

Syntaxen är som följer:

box-reflect: <above | below | left | right> Npx bild;

 
.reflect {
color:blue;
 -webkit-box-reflect:below 2px ;
}
 
.reflect2 {
 margin-top:40px;
 -webkit-box-reflect:below 5px -webkit-gradient(linear, 50% 0, 0 100%, from(transparent), color-stop(.4, transparent), to(white));
}

Reflekterad text !

Se fler exempel på reflekterad text

3 Responses to “Texteffekter, del 1 – reflektioner”

Oscar Says:
juni 11th, 2010 at 07:50
Intressant! Du borde kanske flytta ner länken så att den inte ligger tillsammans med reflektionen på exemplet.

Ser fram emot glansiga reflektioner.
Hans Riesen Says:
juni 11th, 2010 at 03:58
Väldigt intressant! Detta kommer hjälpa mig mycket!
Creative Ox Says:
juni 17th, 2010 at 01:04
En aning meningslöst eftersom det än så länge bara fungerar med webkit-baserade läsare.

This entry was posted on torsdag, juni 10th, 2010 at 10:55 and is filed under Guider, exempel. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

CSS3.SE