ofärdig!

---

Jag ska visa hur man skapar en skuggad text med en hover effekt som ändrar skuggan och textens possition så att det ser ut som att den växer.

Normal:

Hover:

Hur skapar man skuggor?

Skuggor i css är ingen svår sak. så här ser kodraden ut:

.shadow {
text-shadow: 2px 2px 4px #000;
}

Så här fungerar det: text-shadow: [x offset] [y offset] [suddighet] [färg]

Man kan även ha flera skuggor på samma element. Allt man gör då är att separera alla skuggor med ett kommatecken.

text-shadow: 1px 1px #eb6841, 2px 2px #eb6841, 3px 3px #eb6841;

Nu blir det tre skuggor som man kan ha olika färger på:

Nu kan vi börja skapa effekten av att skuggan växer.

Jag kommer att använda en h1 tagg med klassnamnet shadow.

Först skapar vi utseendet för hur den ser ut i normalt läge.

h1.shadow {
color: white;
font: bold 52px Helvetica, Arial, Sans-Serif;
text-shadow: 1px 1px #eb6841, 2px 2px #eb6841,
 3px 3px #eb6841;
}

Nu har jag skapat skuggor så att den ser ut som på första bilden.

Nu kommer själva effekten. Den skapar jag genom att skapa fler skuggor. Men i vanliga fall hamnar skuggan bara djupare under objektet. Men jag vill att det ska se ut som att texten lyfts upp av skuggan. Detta gör jag genom att byta possitionering på objektet till relative. Relative räknar från objektets ursprungliga plats på sidan. Alltså om vi har sex skuggor med en pixels skillnad i offset så flyttar vi texten 6px upp och 6px till vänster. Det måste göra med negativt tal.

h1.shadow:hover {
position: relative;
top: -6px; left: -6px;
text-shadow: 1px 1px #eb6841, 2px 2px #eb6841,
3px 3px #eb6841, 4px 4px #eb6841, 5px 5px #eb6841,
6px 6px #eb6841, 7px 7px #eb6841;
}

Nu ska vi lägga på en annan effekt

Den effekten kommer att göra en snygg övergång mellan de två olika stadierna. Dock så fungerar det bara i webkit webbläsare och opera för tillfället.

det enda vi gör är att lägga till en rad för opera och en rad för webkit i klassen som är i normal läge.

h1.shadow {
color: white;
font: bold 52px Helvetica, Arial, Sans-Serif;
text-shadow: 1px 1px #eb6841, 2px 2px #eb6841, 3px 3px #eb6841;
-webkit-transition: all 0.12s ease-out;
-o-transition: all 0.12s ease-out;
}

Hela koden:

h1.shadow {
color: white;
font: bold 52px Helvetica, Arial, Sans-Serif;
text-shadow: 1px 1px #eb6841, 2px 2px #eb6841,
3px 3px #eb6841;
-webkit-transition: all 0.12s ease-out;
-o-transition: all 0.12s ease-out;

}
h1.shadow:hover {
position: relative;
top: -6px; left: -6px;
text-shadow: 1px 1px #eb6841, 2px 2px #eb6841,
3px 3px #eb6841, 4px 4px #eb6841, 5px 5px #eb6841,
6px 6px #eb6841, 7px 7px #eb6841;
}

Nu var det klart så börja lek med skuggor.