Существует огромное множество самых разных способов имитировать тень от элемента на веб странице. Одни предлагают использование изображений, другие javascript или jquery. В статье я расскажу, как сделать тень у элемента на чистом css.
Начнем с html разметки:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Тень на CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> body { margin: 0px; padding: 20px; font-family: verdana; font-size: 12px; } </style> </head> <body> <div id="shadow-container"> <div class="shadow1"> <div class="shadow2"> <div class="shadow3"> <div class="container"> У слоя с этим текстом мы сделаем тень с помощью несложного CSS-кода и html-разметки </div> </div> </div> </div> </div> </body> </html>
В разметке видим слой container, обернутый в четыре слоя: id=»shadow-container», shadow1, shadow2, shadow3. Теперь css-код:
#shadow-container { position: relative; left: 3px; top: 3px; margin-right: 3px; margin-bottom: 3px; } #shadow-container .shadow2, #shadow-container .shadow3, #shadow-container .container { position: relative; left: -1px; top: -1px; } #shadow-container .shadow1 { background: #F1F0F1; } #shadow-container .shadow2 { background: #DBDADB; } #shadow-container .shadow3 { background: #B8B6B8; } #shadow-container .container { background: #ffffff; border: 1px solid #848284; padding: 10px; }
Тут тоже ничего сложного. Смещаем самый нижний слой на 3 пикселя вправо вниз, затем, относительно него сдвигаем слои shadow на 1 пиксель влево вверх и закрашиваем цветом, с каждым слоем все более темным. Тень готова!