Udtrykke det

En anden hurtig Tut. Her er noget enkelt og rart at bruge magt CSS ... men det var vanskeligt concieve (og det sikkert var ikke mig), til at begynde med. Tilføjelse Dropshadow, kan være en peice kage for mange af os, at bruge nogle billedredigeringsprogram værktøjer som Photoshop ANF Fireworks mv
Grunden til, jeg valgte drop shadow med CSS er, at normalt samtidig skabe en side, design / html af en ansøgning, de krav, der holder iteration. Hvad jeg mener er, I et eksisterende web site med mange billeder, som dem, viser freinds liste eller et billede galleri, vil det være vanskeligt at oparbejde den samlede belastning af billeder, der allerede var losset for at tilføje eller fjerne skygger, for at stof.
Så hvis du har gjort lidt fremadrettet, samtidig med at skabe de HTMLS at tilføje disse ekstra divisioner eller normalt er situationen, at du har en løkke Logic generere disse ikoner / thumbnails i XSL, PHP. JAVA eller anden programmering / scripting sprog, kan du tilføje den når som helst, så er bare spørgsmålet om showet og skjule disse skygger ved hjælp af CSS Display ejendom, som pr kunder stadigt skiftende krav ... Jeg havn't gjort denne form for fremadrettet tænkning før dette ... men ahev i gang nu!

I eksemplet nedenfor, er det originale billede skygge fri og dropshadows anvendes efter behov! Desuden har jeg gået lidt ekstra, ved at bruge de tricks af min tidligere Tut (Well! disse formentlig er kortest række Tutorials, så det er kun berettiget at kalde dem "Tut" 's) om hjælp CSS Clip Ejendom for vise kun

Original billede

CSS DropShadow Resultater

Se demo | Hent sourcefiles