Здравствуйте уважаемые начинающие веб-мастера
Продолжаем знакомство с Оригинальными эффектами CSS
В предыдущей статье мы научились делать на странице различные блоки.
А сейчас, я расскажу и покажу, как и какую тень можно сделать для блока, текста и изображения, при помощи средств CSS.
Для создания тени в CSS существуют два свойства:
1. box-shadow — создание тени для блоков;
2. text-shadow — создание тени для текстa
Записывается так:
box-shadow: 4px 4px;
text-shadow: 4px 4px;
Значений, определяющих форму тени, может быть больше двух, и ниже на примерах, мы это подробно разберём.
Раньше у этих свойств были проблемы с кросбраузерностью, и при их написании применялись префиксы. Однако в последних версиях браузеров Chrome 31.0.1650.63, Yandеx 13.1, Opera 12.15, Internet Explorer 11, Firefox 23.0, Safari 5.1.4, эти свойства работают без префиксов.
На всякий случай, если кто то пользуется браузерами более ранних версий, привожу список префиксов.
-moz-box-shadow — значение для Mozilla Firefox 3.6 + ;
-webkit-box-shadow — Safari, Chrome, iOS, Android 2.1-3.0 ;
-o-box-shadow — значение для Opera 11.10 + ;
-ms-box-shadow — значение для IE10 + ;
Для text-shadow — аналогично.
Внешний вид тени (направление, цвет, размер, размывание), задается значениями. Рассмотрим их подробно, так как именно ими нам придётся оперировать, чтобы реализовать задуманный вид.
Итак, чтобы задать простую тень блоку, достаточно двух значений, которые зададут сдвиг тени вправо и вниз. Если написать эти значения со знаком минус, то сдвиг тени будет влево и вверх.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Как сделать тень CSS</title>
<style>
.blok{
background: #fcdd76;
width: 300px;
height: 100px;
box-shadow: 4px 4px
}
</style>
</head>
<body>
<div class="blok"></div>
</body>
</html>
Для текста тень задаётся аналогично.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Как сделать тень CSS</title>
<style type="text/css">
.blok{
background: #fcdd76;
width: 300px;
height: 100px;
box-shadow: 4px 4px;
}
p{
padding: 40px 0 0 80px;
font-size: 24px;
text-shadow: 10px 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="blok">
<p>Блок с тенью</p>
</div>
</body>
</html>
Следующим шагом зададим цвет для тени. Для этого нужно просто ввести в значение код цвета, причем можно использовать любой формат, от шестеричного до rgba (с прозрачностью)
box-shadow: -4px -4px #0ea8f4;
text-shadow: -10px -10px #94a7af;
Чтобы тень стала более соответствовать своему имени, можно размыть границы тени. Для этого в значение вводиться третий параметр.
box-shadow: 4px 4px 5px #0ea8f4;
text-shadow: 10px 10px 2px #94a7af;
По умолчанию, все браузеры отображают тень того же размера, что и объект её отбрасывающий. Можно её увеличить. Для этого в значения вводиться четвёртый параметр.
И если при этом обнулить сдвиг, и размывание, то получается довольно оригинальный эффект рамки вокруг блока, что очень хорошо смотрится в сочетании с border-radius
box-shadow: 0px 0px 0px 5px #0ea8f4;
border-radius: 10px;
К огромному сожалению, четвёртое значение для text-shadow, браузерами не поддерживается, поэтому растянуть тень для текста можно только при помощи сдвигов, и только в двух направлениях.
Делается это следующим образом: задаётся несколько значений теней, сдвиг у которых последовательно увеличивается на 1 пиксель. Каждая тень пишется через запятую.
text-shadow: 1px 1px #94a7af,
2px 2px #94a7af,
3px 3px #94a7af,
4px 4px #94a7af,
5px 5px #94a7af,
6px 6px #94a7af,
7px 7px #94a7af;
Можно сделать обводку текста тенью. В посте Анимация для шапки сайта у меня есть пример и набор теней необходимый для этого.
Если продолжить экспериментировать в этом направлении, то можно получить довольно таки оригинальные результаты. Ведь кроме сдвига у каждой тени можно менять цвет, и направление сдвига.
Можно изменить последовательность теней, от большей к меньшей, и в самой большой применить третье значение (размывание). Короче — простор для творчества.
Это же свойство — множество теней, отлично применяется к box-shadow, принимающего четвёртое значение (растяжение тени).
При помощи него можно сделать для блока очень красивую рамку. Например такую:
box-shadow: 0px 0px 0px 2px #f90914,
0px 0px 0px 7px #a7f9c9,
0px 0px 0px 9px #f90914,
0px 0px 5px 10px #ff4d00;
border-radius:10px;
Тут тоже простор для творчества. Кстати, все приведённые выше стили, можно подключать встроенным способом, то есть прописывать их прямо в html тег, с помощью атрибута style.
Хотя делать это нужно очень ограничено, только в нестандартных ситуациях. А лучше всего все стили выносить в отдельный файл.
Дальше ещё интереснее, так как обратимся к таким средствам CSS3, как псевдоклассы.
Псевдоклассы и псевдоэлементы не входят в html код страницы, поэтому у них и приставка «псевдо», но что касается стилей, то стили к ним можно применять так же, как к обычным элементам.
Сначала применим псевдокласс :hover. Он изменяет цвет элемента, при наведении на него курсора.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Как сделать тень CSS</title>
<style>
.blok{
background: #fcdd76;
width: 300px;
height: 100px;
box-shadow: 0px 0px 0px 5px #0ea8f4;
border-radius: 10px;
}
.blok:hover{
background: #fcdd76;
width: 300px;
height: 100px;
box-shadow: 0px 0px 0px 5px #f26522;
border-radius: 10px;
}
p{
padding: 40px 0 0 80px;
font-size: 24px;
text-shadow: 1px 1px #94a7af,
2px 2px #94a7af,
3px 3px #94a7af,
4px 4px #94a7af,
5px 5px #94a7af,
6px 6px #94a7af,
7px 7px #94a7af;
font-weight: bold;
}
</style>
</head>
<body>
<div class="blok"></div>
</body>
</html>
До наведения курсора:
При наведении курсора:
Далее обратимся к псевдоэлементам :before и :after, а так же свойству transform
При помощи псевдоэлементов :before и :after, можно добавить дополнительные стили до и после элемента.
Свойство transform, согласно своему названию, может вращать, сдвигать, наклонять и масштабировать элемент, а так же комбинировать эти действия.
Подробную информацию об этих средствах CSS, можно найти в интернете, у меня же практическое руководство, поэтому сразу перейдём к написанию кода.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Как сделать тень CSS</title>
<style>
.blok {
position: relative;
width: 30em; /*1em = font-size, в нашем случае - 20px*/
height: 10em;
padding: 0.5em; /*Сдвиг левой тени*/
background: #ffe5b4;
border-radius: 0.5em;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.7);
/*Тень дублируется, для более чёткого отображения границы*/
}
.blok:before,
.blok:after {
content:""; /*обязательная строка, для правильного отображения псевдоэлементов*/
position: absolute;
z-index: -5;
bottom: 1em;
width: 90%; /*Ширина тени относительно блока*/
height: 20%;
box-shadow: 0 15px 7px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg); /*поворот угла*/
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.blok:after {
right: 0.5em; /*Отступ тени от правого края*/
left: auto;
-webkit-transform: rotate(3deg); /*обратный поворот угла*/
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
p {
font-size: 20px;
font-weight: bold;
padding-left: 9em;
text-shadow: -0.4em -0.4em #94a7af;
margin: auto;
}
</style>
</head>
<body>
<div class="blok">
<p>Блок с тенью</p>
</div>
</body>
</html>
Результат:
Вот такой получается вогнутый блок, теперь давайте сделаем выгнутый.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Как сделать тень CSS</title>
<style>
.blok {
position: relative;
width: 30em;
height: 9em;
padding: 1em;
margin: 2em 0.5em 4em;
background: #ffe5b4;
box-shadow: 0 1px 5px #464451;
}
.blok:before,
.blok:after {
content: "";
position: absolute;
z-index: -2;
}
.blok:before {
top: 0px;
bottom: 0px;
left: 10px;
right: 10px;
box-shadow: 0px 1px 15px #464451;
border-radius: 120px / 15px;
}
p {
font-size: 20px;
font-weight: bold;
padding-left: 10em;
text-shadow: -0.4em -0.4em #94a7af;
margin: auto;
}
</style>
</head>
<body>
<div class="blok">
<p>Блок с тенью</p>
</div>
</body>
</html>
Результат:
Пока всё. Желаю творческих успехов.
Перемена
Две бывшие одесситки на Brighton Beach
— Фирочка! Вы слышали весь этот ужас?
— А какой именно?
— Ну, если выбрали Обаму, так значить придут негры и нас всех будут насиловать!
После долгой паузы…………
— Сима, во-первых, попритушите Ваши радостные глазки! Во-вторых, я
смотрю на вас и удивляюсь. Вы что, всему этому верите? Это же все их
предвыборные обещания!
Градиент CSS. Плавный переход от одного цвета к другому < < < В раздел > > > Прозрачные изображения и прозрачный текст CSS
Блок с закруглёнными углами и тенью. Эллипс.;
Выпадающее меню CSS;
Как разбить страницу на отдельные блоки;
Потыкать, конечно-же можно.
По моему чем самому эти тени делать, лучше визуально потыкать в генераторе и получить уже готовую.
Чтоб сделать тень не снаружи, а внутрь блока в свойство box-shadow: добавляется значение inset. box-shadow: inset 2px 2px #333;. Тогда тень наложится на саму картинку.
как наложить тень на картинку?
Сделайте две тени вот так:
box-shadow: 2px 2px,
-2px 0;
Как сделать тень справа, слева и снизу
Название может быть любое. Можно nev или ower, или ещё как угодно. Роли не играет. Как назовёте блок <div>, так же называйте и селектор.
<div id=»nev»></div> — селектор #nev.
<div class=»nev»></div> — селектор .nev
Правда интересно. Особенно стрелочки. Добавил в закладки. Спасибо.
Подскажите, хочу прописать тени для блоков в CSS, я могу селектор назвать не блок, а blok1.?
День добрый! Еще раз спасибо за информативный материал, сейчас попрактиковал -тень для изгиба блока !!!!! Вчера смотрел статью, там есть интересные рамки.