Как сделать тень на CSS
Дизайнеры очень любят добавлять всякие тени на свои блоки. В Photoshop это делается в течение двух секунд, а вот для верстальщика - это целая история. Если Вы будете искать в Интернете, как сделать тень на CSS, то обнаружите, что почти везде используется CSS3, который, как я уже писал, ещё рано использовать. Есть смесь CSS3 и JQuery (вообще ужас), чтобы тень была кроссбраузерной. В общем, одно решение хуже другого, а я же в этой статье покажу кроссбраузерный вариант без всяких JQuery и CSS3.
Первым делом Вам надо вырезать следующие картинки:
Верхнюю границу с левым углом, но без правого. Желательно, чтобы её длина была заведомо больше, чем потребуется для блока.
Верхний правый угол.
Полоски слева и справа от блока высотой по 1 пикселю.
Нижняя граница с левым углом и так же без правого. Снова надо, чтобы полоса эта была максимально длинной.
Правый нижний угол.
Вот эти 6 картинок у Вас должны быть, а далее надо написать следующий HTML-код:
Тут содержимое блока
Теперь CSS-код:
/* Прячем область за блоками */
.shadow-block,
.shadow-block .sh-sl,
.shadow-block .sh-content {
overflow: hidden;
}
/* Высота верхней и нижней рамки тени, а также углов */
.shadow-block .sh-top,
.shadow-block .sh-rt,
.shadow-block .sh-rb,
.shadow-block .sh-bottom {
height:20px;
}
/* Ширина углов, их выравнивание и подъём наверх */
.shadow-block .sh-rt,
.shadow-block .sh-rb {
float:right;
margin-top: -20px;
width:20px;
}
/* Отступ справа (для уголков) */
.shadow-block .sh-bottom,
.shadow-block .sh-top {
margin-right: 20px;
}
/* Длинная полоска с верхней тенью (левый угол уже на картинке) */
.shadow-block .sh-top {
background: url("images/st.png") no-repeat;
}
/* Верхний правый угол (левый угол уже имеется на полоске) */
.shadow-block .sh-rt {
background: url("images/rt.png") no-repeat;
}
/* Горизонтальная полоса тени (высота 1 пиксель) слева от блока */
.shadow-block .sh-sl {
background: url("images/sl.png") left repeat-y;
}
/* Горизонтальная полоса тени (высота 1 пиксель) справа от блока */
.shadow-block .sh-sr {
background: url("images/sr.png") right repeat-y;
}
/* Цвет блока и отступ от границ с тенями */
.shadow-block .sh-content {
background: #FFF;
margin: 0 20px;
}
/* Длинная полоска с нижней тенью (левый угол уже на картинке) */
.shadow-block .sh-bottom {
background: url("images/sb.png") no-repeat;
}
/* Нижний правый угол (левый угол уже имеется на полоске) */
.shadow-block .sh-rb {
background: url("images/rb.png") no-repeat;
}
.shadow-block,
.shadow-block .sh-sl,
.shadow-block .sh-content {
overflow: hidden;
}
/* Высота верхней и нижней рамки тени, а также углов */
.shadow-block .sh-top,
.shadow-block .sh-rt,
.shadow-block .sh-rb,
.shadow-block .sh-bottom {
height:20px;
}
/* Ширина углов, их выравнивание и подъём наверх */
.shadow-block .sh-rt,
.shadow-block .sh-rb {
float:right;
margin-top: -20px;
width:20px;
}
/* Отступ справа (для уголков) */
.shadow-block .sh-bottom,
.shadow-block .sh-top {
margin-right: 20px;
}
/* Длинная полоска с верхней тенью (левый угол уже на картинке) */
.shadow-block .sh-top {
background: url("images/st.png") no-repeat;
}
/* Верхний правый угол (левый угол уже имеется на полоске) */
.shadow-block .sh-rt {
background: url("images/rt.png") no-repeat;
}
/* Горизонтальная полоса тени (высота 1 пиксель) слева от блока */
.shadow-block .sh-sl {
background: url("images/sl.png") left repeat-y;
}
/* Горизонтальная полоса тени (высота 1 пиксель) справа от блока */
.shadow-block .sh-sr {
background: url("images/sr.png") right repeat-y;
}
/* Цвет блока и отступ от границ с тенями */
.shadow-block .sh-content {
background: #FFF;
margin: 0 20px;
}
/* Длинная полоска с нижней тенью (левый угол уже на картинке) */
.shadow-block .sh-bottom {
background: url("images/sb.png") no-repeat;
}
/* Нижний правый угол (левый угол уже имеется на полоске) */
.shadow-block .sh-rb {
background: url("images/rb.png") no-repeat;
}
Безусловно, это сложный способ, но я его использую в своей практике, как и другие профессионалы. А новички и всякие халтурщики используют box-shadow, плюс различные скрипты и htc, чтобы было кроссбраузерно. Когда наплевать на качество, а волнуют лишь время и деньги, то это наилучший вариант. Но если Вы хотите качество, то используйте мой способ.
Комментариев 0