Cień w stylach "master"

Ten przykład pokazuje jak dodać cień do każdego elementu przy użyciu tylko CSS (bez obrazów). Czyni to poprzez owijanie pożądanej zawartości w DIV z koloru tła, na dany kolor cienia. Sama treść jest ustawiona stosunkowo i lekko przesunięta w górę i na lewo, aby odsłonić cień. "master" DIV który otacza całość znaczników jest na pozycji przesunięta w prawo iw dół. Wynik jest dość sztywny, ale ale efekt "instant-shadow" przyzwoity

W pliku CSS

<style type="text/css">

<!-- Hide entire CSS code from IE6 -->
<![if !IE 6]>



.shiftcontainer{
position: relative;
left: 5px; /*Number should match -left shadow depth below*/
top: 5px; /*Number should match -top shadow depth below*/
}

.shadowcontainer{
width: 300px; /* container width*/
background-color: #d1cfd0;
}

.shadowcontainer .innerdiv{
/* Add container height here if desired */
background-color: white;
border: 1px solid gray;
padding: 6px;
position: relative;
left: -5px; /*shadow depth*/
top: -5px; /*shadow depth*/
}

</style>

<![endif]>

W ramach Body

<div class="shiftcontainer">
<div class="shadowcontainer">
<div class="innerdiv">
Some title

Some text here. Some text here.

Some text here. Some text here.

Some text here. Some text here.

Some text here. Some text here.
</div>
</div>
</div>

 

Popularne Artykuly

Najnowsze Artykuły