Как в css сделать тень – 7 классных примеров с тенями для текста, которые вы просто не можете пропустить

Leave a Comment / Css / By /

Как сделать тень в CSS

Тень в CSSЗдравствуйте, уважаемые читатели. Сегодня поговорим о том, как сделать тень в CSS. На сегодняшний день тень в CSS поддерживаются практически всеми популярными браузерами. Исключение является Internet Explorer, что для него неудивительно. Он не понимает свойства text-shadow (тень текста). Свойства тени для объектов на странице прописываются как box-shadow. И давайте перейдем сразу к примерам. Я создал 4 блока и применил к ним разные эффекты тени.

1

 box-shadow: 0px 0px 5px 0; /* Тень с 4 сторон и размытием 5px */

box-shadow: 0px 0px 5px 0; /* Тень с 4 сторон и размытием 5px */

2

 box-shadow: 0px 0px 6px 1px inset; /* Внутренняя тень */

box-shadow: 0px 0px 6px 1px inset; /* Внутренняя тень */

3

 box-shadow: 2px 2px 5px 1px; /* Тень смещена вниз и вправо*/

box-shadow: 2px 2px 5px 1px; /* Тень смещена вниз и вправо*/

4

 box-shadow: 3px 3px 5px 0 inset; /* Внутренняя тень смещена вверх и влево*/

box-shadow: 3px 3px 5px 0 inset; /* Внутренняя тень смещена вверх и влево*/

Значение тени в CSS

  • Первое значение смещает тень по оси Х. Применяются как положительные, так и отрицательные числа
  • Второе значение — смещает тень по оси Y
  • Третье значение — радиус размытия тени
  • Четвертое значение — размер тени
  • #222 — Цвет тени
  • inset — внутренняя тень

Для каждого браузера нужно прописывать свои значения

box-shadow: 2px 2px 5px 1px; /* Все браузеры */
-webkit-box-shadow: 2px 2px 5px 1px; /* Хром, Сафари */
-mox-box-shadow: 2px 2px 5px 1px; /* FireFox */
-o-box-shadow: 2px 2px 5px 1px; /* Опера */

box-shadow: 2px 2px 5px 1px; /* Все браузеры */ -webkit-box-shadow: 2px 2px 5px 1px; /* Хром, Сафари */ -mox-box-shadow: 2px 2px 5px 1px; /* FireFox */ -o-box-shadow: 2px 2px 5px 1px; /* Опера */

Демо

Для IE нужно прописывать специальные, отдельные стили, но это тема отдельного разговора, поэтому поговорим об этом в другой раз и про эффекты тени для текста тоже. Данные примеры вы как обычно можете скачать, рассмотреть подробнее и потренироваться.

СКАЧАТЬ

тень | htmlbook.ru

Сделайте индикатор прогресса, как показано на рис. 1. Ширина самого элемента 100%, высота 20px. Значение индикатора должно легко задаваться через ширину, как в процентах, так и пикселах.

Рис. 1

Сверстайте показанный на рис. 1 макет. Ширина колонок фиксирована и не зависит от размеров окна браузера.

Рис. 1

Создайте блок с тенью фиксированного размера, в котором отображается картинка (рис. 1). Код должен корректно работать во всех современных браузерах.

Рис. 1. Картинка с тенью

Крейг Баклер

В моих предыдущих статьях мы изучили как делать словесные пузыри и ленты без дополнительных HTML-элементов или картинок. Это было достигнуто с использованием эффектов CSS3 применяемых к псевдоэлементам :before и :after. В этой статье мы задействуем похожий приём для создания эффекта загнутых уголков бумаги.

Загнутые уголки были популярны в течение нескольких лет. Пользователь видел естественно выглядящее слегка изогнутое поле, на деле же это оптическая иллюзия созданная тенью в нижней части элемента.

Влад Мержевич

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow, мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Влад Мержевич

Тень под блочным элементом на странице обычно применяется для создания эффекта трёхмерности, привлечения внимания к элементу или как часть дизайна. Небольшая тень под элементами придаёт также странице объём и глубину.

Для добавления тени используется свойство box-shadow, у которого имеется шесть значений, из них только два являются обязательными. На рис. 1 показано свойство box-shadow со всеми возможными значениями, они пронумерованы для их идентификации.

Рис. 1. Значения свойства box-shadow

Сделайте блок, показанный на рис. 1. Блок содержит скругления в заголовке и внизу блока. Вокруг блока тёмно-зелёная рамка и тень. Длина заголовка может меняться, соответственно, должна изменяться и ширина блока под ним, но при этом не превышать 250px.

Рис. 1

Создайте меню, показанное на рисунке, на HTML5 с помощью тегов <ul>, <li> и с соблюдением ряда условий.

Брайан Уильямс

Перевод: Влад Мержевич и Евгений Богомольный.

Да, «луковая шелуха». Аниматоры используют этот эффект, чтобы показать то, что обычно невозможно увидеть: кадры движения во времени. И теперь веб-дизайнеры могут использовать подобный эффект, чтобы показать другую кажущуюся невозможность: создание реалистичной тени с использованием CSS.

Как сделать тень на CSS

Вы здесь: Главная — CSS — CSS Основы — Как сделать тень на CSS

Как сделать тень на CSS

Дизайнеры очень любят добавлять всякие тени на свои блоки. В Photoshop это делается в течение двух секунд, а вот для верстальщика — это целая история. Если Вы будете искать в Интернете, как сделать тень на CSS, то обнаружите, что почти везде используется CSS3, который, как я уже писал, ещё рано использовать. Есть смесь CSS3 и JQuery (вообще ужас), чтобы тень была кроссбраузерной. В общем, одно решение хуже другого, а я же в этой статье покажу кроссбраузерный вариант без всяких JQuery и CSS3.

Первым делом Вам надо вырезать следующие картинки:

  • Верхнюю границу с левым углом, но без правого. Желательно, чтобы её длина была заведомо больше, чем потребуется для блока.
  • Верхний правый угол.
  • Полоски слева и справа от блока высотой по 1 пикселю.
  • Нижняя граница с левым углом и так же без правого. Снова надо, чтобы полоса эта была максимально длинной.
  • Правый нижний угол.

Вот эти 6 картинок у Вас должны быть, а далее надо написать следующий HTML-код:

<div>
  <div></div>
  <div></div>
  <div>
    <div>
      <div>
        <p>Тут содержимое блока</p>
      </div>
    </div>
  </div>
  <div></div>
  <div></div>
</div>

Теперь 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;
}

Безусловно, это сложный способ, но я его использую в своей практике, как и другие профессионалы. А новички и всякие халтурщики используют box-shadow, плюс различные скрипты и htc, чтобы было кроссбраузерно. Когда наплевать на качество, а волнуют лишь время и деньги, то это наилучший вариант. Но если Вы хотите качество, то используйте мой способ.

  • Как сделать тень на CSS Создано 01.04.2013 04:35:09
  • Как сделать тень на CSS Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.

Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Создание изогнутых теней с использованием только CSS

Ранее мы рассказали, как создать изогнутую тень элементу HTML с помощью изображения тени в формате PNG, созданного в программе PhotoShop. Но нужно ли использовать программу для создания теней, если в CSS есть свойство тени блока? В этом уроке мы рассмотрим, можно ли создать изогнутые тени, используя только это свойство.

 

 

В принципе, это возможно. Как Вы увидите далее, можно создать очень похожую тень, используя несколько приемов, тем более обычно нужны небольшие, едва заметные тени.

Воспользуемся тем же способом, что и в предыдущем уроке. В нем использовались псевдоэлементы ::before (до) и ::after (после) с изображением в качестве значения свойства содержимого. Но совершенно не обязательно задавать какое-либо содержимое псевдоэлементам для того, чтобы у них были тени.

В этом случае положим элемент изображения в блок, чтобы было немного проще:

<div>
        <img src="perhentian-island-malaysia.jpg" alt="Dawn at Perhentian Island">
</div>

После этого используем примерно тот же способ, что и раньше: в этот раз у блока будет относительное позиционирование, чтобы эффекты псевдоэлементов ::before и ::after были расположены относительно родительского блока, а не тега <body>:

div#island-dawn {
        margin-bottom: 2rem;
        position: relative;
}

Нам нужно задать свойство содержимого для псевдоэлементов, но в нем не обязательно должно находиться что-либо видимое. Это может быть, например, одиночный пробел:

div#island-dawn:before,  div#island-dawn:after {
        content: " ";
        width: 80px;
        height: 8px;
}

После этого применим свойство тени блока к этим псевдоэлементам, задав ему численное значение распространения 15 пикселей:

div#island-dawn:before, div#island-dawn:after {
          content: " ";
          width: 80px; height: 8px;
          box-shadow: rgba(0,0,0,0.6) 0px 0px 15px 8px;
          position: absolute;
          bottom: 7px;
}

Еще оттолкнем тени справа и слева и повернем оба псевдоэлемента, задав им начала трансформаций как левый и правый верхние углы у левой и правой теней соответственно. Код для трансформаций приведен без приставок производителей, которые в этом случае почти нигде и не понадобятся для большинства современных версий браузеров:

div#island-dawn:before {
        left: 22px;
        transform-origin: top left;
        transform: rotate(-4deg);
}
div#island-dawn:after {
        right: 11px;
        transform-origin: top right;
        transform: rotate(4deg);
}

Хотя полученные в результате тени не совсем изогнуты, эффект подходит для создания видимости загнутых теней. Возможно усовершенствовать эффект с помощью трехмерного поворота CSS3.

Примечание Дежурки:

Для большей универсальности, чтобы тени всегда расолагались в правильном месте, нужно задать, например, ширину изображения 100% или фиксированный размер родительскому блоку.

Использована фотография с разрешения Choh Wah Ye, лицензированная по лицензии Creative Commons.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

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

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