Автор

Внутренние тени в CSS

Внутренние тени в CSS


 

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.

Синтаксис

Прежде всего рассмотрим два основных способа реализации теней в CSS.

box-shadow

Конструкция box-shadow содержит несколько различных значений:

 

 

Horizontal offset и vertical offset — горизонтальное и вертикальное смещение соответственно. Эти значения указывают, в какую сторону объект будет отбрасывать тень:

 

 

Blur radius и spread radius немного сложнее. В чем их разница? Взглянем на пример с двумя элементами, где значения blur radius отличаются:

 

 

Край тени просто размывается. При различном значении spread radius видим следующее:

 

 

В этом случае видим, что тень рассеивается на большую площадь. Если не указывать значения blur radius и spread radius, то они будут равны 0.

text-shadow


Синтаксис очень похож на box-shadow:

 

Значения аналогичные, только нет spread-shadow. Пример использования:

 

 

Inset в box-shadow


Чтобы «перевернуть» тень внутрь объекта, необходимо добавить inset в CSS:

 

 

Разобравшись с основным синтаксисом box-shadow, понять принципы реализации внутренних теней очень легко. Значения все те же, можно добавить цвет (RGB в hex):

 

 

Цвет в формате RGB, альфа-значение отвечает за прозрачность тени:

 

 

Изображения с тенями


Добавить внутреннюю тень к изображению немного сложнее, чем к обычному div. Для начала вот обычный код картинки:

<img src="http://lorempixum.com/800/400/transport/2" alt="airplane">

Логично предположить, что добавить тень можно так:

img { 
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}

Но тень не видно:

 

 

Существует несколько способов решить эту проблему, каждый из которых имеет свои плюсы и минусы. Рассмотрим два из них. Первый — это обернуть картинку в обычный div:

<div>
  <img src="http://lorempixum.com/800/400/transport/2" alt="airplane">
</div>

 

div {
  height: 200px;
  width: 400px;
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
}
 
img {
  height: 200px;
  width: 400px;
  position: relative;
  z-index: -2;
}

 

 

Все работает, но приходится добавлять немного лишней разметки HTML и CSS. Второй способ — это установить изображение фоном нужного блока:

<div>
  <!-- пустой div -->
</div>

 

div {
  height: 200px;
  width: 400px;
  background: url(http://lorempixum.com/400/200/transport/2);
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
}

 

 

Вот, что может получится при использовании внутренних теней:

 

 

Inset в text-shadow


Для реализации внутренней тени текста простое добавление в код inset не работает:

 

 

Для решения, сначала применим к заголовку h1 установим темный фон и светлую тень:

h1 {
  background-color: #565656;
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
}

Вот, что получается:

 

 

Добавляем секретный ингредиент background-clip, который обрезает все, что выходит за пределы текста (на темный фон):

h1 {
  background-color: #565656;
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}

 

 

Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:

 

 

Поддержка всеми браузерами

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Внутренние тени в CSS

Сегодня ресурс представляет собой полноразмерное изображение заголовка, анимированное с использованием свойства масштаба CSS3 и jQuery для имитации эффекта 3D-уменьшения и отображения основного содержимого страницы.


Внутренние тени в CSS

В наше время технологии для веб-мастеров быстро развиваются, предоставляя нам новые и все интересные возможности разработки новых креативных идей с помощью технологий  HTML 5,  jQuery и плагина Quicksand. Данное портфолио отлично выглядит и будет работать даже если у посетителя отключен JavaScript, то он все равно увидит работы, что благотворно сказывается на SEO сайта. Данное портфолио мозно с легкостью отредактировать под свое усмотрение и добавить в него необходимые элементы..


Внутренние тени в CSS

Как часто вы замечали так называемые "вееры" с выбором цвета, или прочей информацией с магазинах. Это достаточно удобный подход, для экономии места, при этом предоставляется возможность хранить множество информации в достаточно малом объеме места. В данном уроке мы рассмотрим пример создания такой книжки образцов для сайта с помощью jquery и css3, в которой панели воспринимают нажатия кнопки мыши, после чего происходит открытие нужной страницы. В демонстрации приводится несколько примеров организации книги.


Внутренние тени в CSS

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

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


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close