Svar på kommentar: CSS 3.0 Box-shadow effekt

Kan man fråga hur man gör skuggor runt wrappern?
 
Svar:
 
Alla behållare har på senare tid, tack vare den senaste CSS-standarden (3.0) fått möjligheten att lägga till bland annat; lådskugga.
 
I kommentarens fall var detta vad som efterfrågades, nedan följer en länk som förklarar det ganska bra om man vill försöka på egen hand, eller bara ha som referens till detta inlägget;
http://www.css3.info/preview/box-shadow/
- Annars kommer jag även här nedan demonstrera och förklara hur du går tillväga.
 
Koden för lådskugga består av ett CSS-Attribut (attribut = en egenskap man kan tilldela ett element (element = en html- tagg i det här fallet)).
I vårt fall i teorin ser kod-modellen ut såhär;
box-shadow: [skuggans avstånd från höger] [skuggans avstånd från botten] [spridning] [#färgkod];

Notera att varje [text]- behållare ovan i teorimodellen motsvarar varje värde man kan ha till attributet; box-shadow.
 
Spridningen ersätts med webbdesigns måttenheter (em, px, %), i vårt exempel kommer vi använda pixlar (px).
Desto lägre värde = desto lägre spridning = desto högre koncentration osv.
 
Det finns dessvärre fortfarande några webbläsare som inte är så duktiga på att förstå box-shadow attributet, vilket betyder att vi måste lägga till "extra-kod" för att hjälpa just de webbläsarna att förstå.
"Extra-koden" kommer att motsvara tillägget; "-webkit-" för safari och chrome samt "-moz-" för mozilla firefox. Båda demonstreras nedan;
-moz-box-shadow: 5px 2px 3px #000;
-webkit-box-shadow: 5px 2px 3px #000;
box-shadow: 5px 2px 3px #000;
 
Det sista tillskottet är för alla som "inte" behöver hjälpkoden.
Så ovan kodblock är klart att läggas in i en CSS-fil/CSS-mall, dock när det läggs in görs det på följande vis:
 
/* Här startar CSS-Dokumentet
Vi önskar lägga till skuggan i det här exemplet på alla DIV-taggar, se nedan;
*/
 
div {
-moz-box-shadow: 5px 2px 3px #000;
-webkit-box-shadow: 5px 2px 3px #000;
box-shadow: 5px 2px 3px #000;
}
 
/* Här avslutas CSS-Dokumentet */

Observera dock! Att ni gör liknande som vi visade ovan, men istället för div så kan ni hitta den behållaren ni önskar att lägga till skuggan på i er CSS-fil/CSS-mall, och bara lägga in de tre raderna innanför { } , så borde ni få skugga på det elementet ni valt.
 
Ett tips för att snabbt identifiera området där ni vill placera skuggan är att först identifiera ett unikt kännetecken eller namn/text på sidan som ni kan söka efter i källkoden för att hitta elementet ni vill lägga till effekten på (högerklicka på sidan i webbläsaren där elementen vars form du vill lägga till skugga och välj visa källkod/sidkälla. Använd sedan [Ctrl + F] för att ta reda på ett ID (id="") eller en Klass (class="") för elementet i HTML-koden du vill lägga till effekten på, för att sedan kunna matcha mot din CSS-mall ([#] för ID och [.] för Klass) så du vet vart du skall lägga in kodstycket).
 
// Hoppas det hjälpte :)

Kommentarer
• Hanna Mikaelas säger:

bra med designtips!

2013-07-16 | 18:59:32
Bloggadress: http://hannamikaelas.blogg.se

Kommentera inlägget här:

Namn:
Kom ihåg mig?

E-postadress: (publiceras ej)

URL/Bloggadress:

Kommentar:

Trackback