[HOW TO][HTML+CSS] Shadow-Lifting

12/16/2012 12:30 Evolutio#1
Hallo,
viele hatten mich mal gefragt, wie man so einen schönen "Lift-Schatten" hinbekommen würde, da wollte ich hier mal ein kleines Tutorial machen, wie man das ganze in ca. 5Minuten hinbekommt :)

So soll es am ende Aussehen:

gesammt Quellcode:

Was man braucht:
  • Bild
  • 3Divs

Als erstes machen wir einen div, wo das Bild und die anderne Div's drin sind z.B. #page.

also schaut unser Code mittlerweile so aus:
HTML Code:
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
	<div id="page">

	</div>
	</body>
</html>
in dem DIV #page fügen wir noch 2 weitere divs (Shatten-Links/Schatten-Rechts) und das Bild hinzu.

unser Code müsste dann in etwa so aussehen:
HTML Code:
	<div id="page">
		<div class="img">
			<img src="walle.jpg" alt="Wall-E" />
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</div>
dann geben wir den noch diese CSS-Eigenschaften:

Code:
			#page { width:618px; margin:0 auto; }
			#page img { width:100%; }
			.left { bottom: 14px; box-shadow: 0 0 10px 6px #000000; height: 0; left: 12px; position: relative; transform: rotate(-4deg); width: 50%; z-index: -10; }
			.right { bottom: 14px; box-shadow: 0 0 10px 6px #000000; height: 0; position: relative; right: -300px; transform: rotate(4deg); width: 50%; z-index: -10; }
wenn die bei euch nicht ganz so gut passen, etwas mit den positionen left, right, bottom spielen :)

MfG ~Evolutio