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

Evolutio · 12/16/2012, 12:30

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:

Spoiler

gesammt Quellcode:

Spoiler

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