logo
  Schaduw
  Een schaduw bij bijvoorbeeld een foto, laat het net lijken of deze op de site ligt.

vogel vogel

 
IN DE CSS
.shadowleft {
-moz-box-shadow: 5px 5px 6px #797D82;
-webkit-box-shadow: 5px 5px 6px #797D82;
box-shadow: 5px 5px 6px #797D82;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#797D82');}

of:

.shadowright {
-moz-box-shadow: -5px 5px 6px #797D82;
-webkit-box-shadow: -5px 5px 6px #797D82;
box-shadow: -5px 5px 6px #797D82;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=-135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=-135, Color='#797D82');}


 
TUSSEN DE BODY TAGS
<img src="foto.jpg" class="shadowleft">

of:

<img src="foto.jpg" class="shadowright">


  Dit kan natuurlijk ook met een table.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Wat helemaal een leuk effect heeft, is dat de schaduw er niet naast zit, maar er in.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

verander dan het volgende:
-moz-box-shadow:4px 4px 5px 2px #949494;
-webkit-box-shadow:4px 4px 5px 2px #949494;
box-shadow:4px 4px 5px 2px #949494;
in:
-moz-box-shadow:4px 4px 5px 2px #949494 inset;
-webkit-box-shadow:4px 4px 5px 2px #949494 inset;
box-shadow:4px 4px 5px 2px #949494 inset;

We kunnen nog veel meer doen met schaduw

.doos {
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}
.top {
box-shadow: 0 -10px 10px -5px #D6D92E;}

<body>
<div class="doos top"></div>
</body>

.doos {
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}
.right {
box-shadow: 10px 0 10px -5px #D6D92E;}

<body>
<div class="doos right"></div>
</body>

.doos {
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}
.bottom {
box-shadow: 0 10px 10px -5px #D6D92E;}

<body>
<div class="doos bottom"></div>
</body>

.doos {
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}
.left {
box-shadow: -10px 0 10px -5px #D6D92E;}

<body>
<div class="doos left"></div>
</body>

 

.doos {
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}
.all {
box-shadow: 0 0 10px #D6D92E;}

<body>
<div class="doos all"></div>
</body>

 
Hier zijn nog een paar leuke voorbeelden van schaduw maken:

.een {box-shadow: 0 0 4px #D6D92E;
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}

<div class="een"></div>

.twee {box-shadow: 0 0 4px 4px #D6D92E;
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}

<div class="twee"></div>

.drie {box-shadow: 4px 4px 4px #D6D92E;
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}

<div class="drie"></div>

.vier {box-shadow: 4px 4px 4px -2px #D6D92E;
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}

<div class="vier"></div>

.vijf {box-shadow: 4px 4px 4px 4px #D6D92E;
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}

<div class="vijf"></div>

.zes {box-shadow: inset 0 0 4px #D6D92E;
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}

<div class="zes"></div>

.zeven {box-shadow: inset 0 0 4px -2px #D6D92E;
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}

<div class="zeven"></div>

.acht {box-shadow: inset 4px 4px 4px #D6D92E;
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}

<div class="acht"></div>

.negen {box-shadow: 4px 4px 0 #D6D92E;
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}

<div class="negen"></div>

.tien {box-shadow: 0 0 0 4px #D6D92E;
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}

<div class="tien"></div>

.elf {box-shadow: 4px 4px 4px #f00, -4px -4px 4px #ff0;
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}

<div class="elf"></div>

.twaalf {box-shadow: 0 0 4px #f00, 0 0 4px 8px #ff0;
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}

<div class="twaalf"></div>

   

.dertien {box-shadow: inset 4px 4px 4px #f00, inset -4px -4px 4px #ff0;
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}

<div class="dertien"></div>

.veertien {box-shadow: inset 0 0 4px #D6D92E, 0 0 4px #D6D92E;
height: 100px;
width: 100px;
margin: 20px;
border: 1px solid #D6D92E;}

<div class="veertien"></div>

   
 
eind