Как сделать тень для текста, картинки, блока

Здравствуйте уважаемые начинающие веб-мастера02

Продолжаем знакомство с Оригинальными эффектами CSS

В предыдущей статье мы научились делать на странице различные блоки.

А сейчас, я расскажу и покажу, как и какую тень можно сделать для блока, текста и изображения, при помощи средств CSS.

Для создания тени в CSS существуют два свойства:

1. box-shadow — создание тени для блоков;
2. text-shadow — создание тени для текста;

Записывается так:

box-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>Документ без названия</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>Документ</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>Документ без названия</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>

До наведения курсора:

41
 
При наведении курсора:
 
42
 
Далее обратимся к псевдоэлементам :before и :after, а так же свойству transform

При помощи псевдоэлементов :before и :after, можно добавить дополнительные стили до и после элемента.

Свойство transform, согласно своему названию, может вращать, сдвигать, наклонять и масштабировать элемент, а так же комбинировать эти действия.

Подробную информацию об этих средствах CSS, можно найти в интернете, у меня же практическое руководство, поэтому сразу перейдём к написанию кода.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</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>

Результат:

08

Вот такой получается вогнутый блок, теперь давайте сделаем выгнутый.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</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 основы. Добавьте в закладки постоянную ссылку.

6 комментариев на «Как сделать тень для текста, картинки, блока»

  1. stariс говорит:

    Сделайте две тени вот так:
    box-shadow: 2px 2px,
    -2px 0;

  2. Сарсенкуль говорит:

    Как сделать тень справа, слева и снизу

  3. starik говорит:

    Название может быть любое. Можно nev или ower, или ещё как угодно. Роли не играет. Как назовёте блок <div>, так же называйте и селектор.
    <div id=»nev»></div>  — селектор #nev.
    <div class=»nev»></div>  — селектор .nev

  4. starik говорит:

    Правда интересно. Особенно стрелочки. Добавил в закладки. Спасибо.

  5. Юрий говорит:

    Подскажите, хочу прописать тени для блоков в CSS, я могу селектор назвать не блок, а blok1.?

  6. Юрий говорит:

    День добрый! Еще раз спасибо за информативный материал, сейчас попрактиковал -тень для изгиба блока !!!!! Вчера смотрел статью, там есть интересные рамки.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *