05. CSS

Shadow tower

2010-03-31 16:47 #0 av: johan-ahlback

Jag såg en cool effekt idag och jag tänker visa hur man gör. Jag ska skapa en skuggning direkt i css.

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:

shadow tower normal

Hover:

shadow tower 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å:tre olika skuggor

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.

 

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-03-31 17:53 #1 av: [Ebfotograf]

Bra skrivet! Detta är bra att veta

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-04-01 08:47 #2 av: [Tearix]

Det kan bli riktigt tufft.

(men lite rädsla sitter kvar, jag ser framför mig blinkande färglad text *fniss*)

Anmäl
2010-04-01 21:58 #3 av: MichaelE

Är detta CSS2 eller CSS3? För jag tror inte alla läsare klarar den här skuggningen. Såg om denna effekt för över ett år sedan.

Anmäl
2010-04-02 02:26 #4 av: johan-ahlback

#3 det är css3 och internet explorer klarar inte det. men internet explorer 9 kommer kunna det.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-04-02 02:29 #5 av: MichaelE

#4 hade för mig det. Jag vet inte om explorer 9 fungerar på xp, vet däremot att man måste ha sp2 för vista för att kunna ha IE9. Så det kan vara bra att använda vanlig bildgrafik utifall att eftersom CSS3 är väl inte riktigt klar än?

Anmäl
2010-04-02 03:05 #6 av: johan-ahlback

css3 är inte klart nej. men enligt obekräftade rykten kan microsoft ha en lösning. det kan komma en upptatering på ie8 som kan hantera css3. men som sagt är det obekräftade rykten. och nej de ryktena startades inte 1 april Flört

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-04-04 01:19 #7 av: IdaL

Tråkigt att det inte funkar i IE, då blir ju inte hemsidan helt kommplett Obestämd IE är ju ändå den vanligaste webbläsaren som brukar följa med när man köper en dator...

Anmäl

Det finns en till kommentar till den här diskussionen. Den är bara synlig för medlemmar på iFokus. För att läsa kommentaren, logga in eller registrera dig på iFokus.