CSS тень или как повысить видимость блока или текста


Оглавление (нажмите, чтобы открыть):

CSS display и visibility или видимость элементов

— определяет видимость или невидимость элемента:

visibility: inherit | visible | hidden ;

visibility: inherit → наследует видимость

visibility: visible → делает элемент страницы

видимым (по умолчанию);

visibility: hidden → делает невидимым.

— определяет способ отображения элементов страницы:

display: inline | block | none | inline-block | list-item

display: inline → значение по умолчанию;

display: block → наделяет элементы свойствами блока;

display: none → элемент не отображается;

display: inline-block → аналогично block ;

display: list-item → аналогично block , но при этом элемент страницы считается

Свойства CSS overflow или полосы прокрутки

— определяет будет ли элемент страницы иметь полосу прокрутки:

overflow: visible | scroll | hidden | auto

overflow: visible → границы элемента расширяются по его содержимому (по умолчанию);

overflow: scroll → если содержимое элемента не вмещается в его границы – добавляются

overflow: hidden → обрезает содержимое элемента по установленным размерам;

overflow: auto → полосы прокрутки отображаются если в этом есть необходимость.

— все как при overflow , но только по горизонтали:

overflow-x: visible | scroll | hidden | auto

— все как при overflow , но только по вертикали:

overflow-y: visible | scroll | hidden | auto

Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2020

CSS справочник | Списки Справочник | CSS display, visibility, overflow

Тень и эффект свечения через CSS для текста и блоков

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

Свойство text-shadow (Тень текста)

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

В качестве значения свойство text-shadow принимает составное свойство:

  • — сдвигает тень по оси X, задается чаще всего в px . При задании положительного расстояния сдвиг идет вправо, отрицательное — влево
  • — сдвигает тень по оси Y, задается чаще всего в px . При задании положительного расстояния сдвиг идет вниз, отрицательное — вверх
  • — отвечает за степень размытия тени, задается чаще всего в px
  • — соответственно выбирает цвет тени, задается в любом из возможного формата цвета в CSS.

Стоит так же учесть, что можно задавать разные тени для одного и того же текста, разделяя их запятой.

Различные примеры использования text-shadow

Обычная черная тень


Комбинированный набор теней

Эффект свечения текста CSS

Для создания равномерного эффекта свечения используйте следующие правила: не задавайте сдвигов, задавайте значения размытия в диапазоне от 8-30px , используйте не полностью непрозрачные цвета.

Свойство box-shadow (тень блока через CSS)

Аналогично свойству text-shadow , за исключением того, что задается для тень для всего блока, а не просто текста. Еще одно отличие — возможность задавать внутреннюю тень блокам.

В качестве значения свойство box-shadow принимает составное свойство:

  • — позволяет задавать внутреннюю тень, не обязательное значение. При задании inset, делает тень внутри блока
  • — сдвигает тень по оси X, задается чаще всего в px . При задании положительного расстояния сдвиг идет вправо, отрицательное — влево
  • — сдвигает тень по оси Y, задается чаще всего в px . При задании положительного расстояния сдвиг идет вниз, отрицательное — вверх
  • — отвечает за степень размытия тени, задается чаще всего в px
  • — отвечает за степень растяжения тени, задается чаще всего в px , при положительном значение растягивает тень, при отрицательном сжимает её
  • — соответственно выбирает цвет тени, задается в любом из возможного формата цвета в CSS

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

Различные примеры использования box-shadow

Как решить проблему отображение тени (css+html)?

Приветствую.
Суть проблемы в следующем: при установке цвета блоку пропадает пересечение тени с другим блоком. Без установки цвета блоку пересечение работает нормально.

Для наглядности — картинка (врхний блок без заливки отображает тень, нижний нет):

  • Вопрос задан более трёх лет назад
  • 3937 просмотров

Блок справа по оси Z находится выше левого и перекрывает его тень. Это незаметно, пока блоки прозрачны.
Для решения проблемы нужно поднять блок с ховером над остальными.

Установка тени для блока и текста в CSS

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

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

Нужно блоку добавить всего одно свойство, box-shadow и передать несколько параметров.

box-shadow: 10px 10px 15px #ebe6e6;

Смещение тени по X. Указываем на сколько пикселей сместить тень вправо от элемента или влево с отрицательным значением.

Смещение тени по Y. Задаем количество пикселей с отрицательным значением для смещения вверх и с положительным значением для смещения вниз.

Размытие тени. Прописываем радиус размытия тени. Чем больше радиус, тем сильнее размоются края тени.

Цвет тени. Можно указать как в шестнадцатеричной системе, так и в формате RGB-a.

Я обычно задаю цвет тени в формате RGB-a. Наличие альфа-канала, позволяет сделать тень полупрозрачной. Так она получается мягкой и более естественной.

box-shadow: 10px 10px 15px rgba (235, 230, 230, 0.5);

Пример тени для блока

// CSS код
.block <
width: 250px;
height: 150px;
height: 150px;
display: block;
margin: 50px auto;
background-color: #f88bca;
box-shadow: 10px 10px 15px rgba(235, 230, 230, 0.5);
>

Пример тени снизу

Тень вокруг блока

Внутренняя тень

Чтобы установить тень внутри блока, первым параметром передаем ключевое слово: inset.

box-shadow: inset 0 0 15px rgba(255, 255, 255); // CSS


Тень у текста

Тень у текста задается по такому же принципу, как и у блока, но через свойство text-shadow.

Текст с тенью

// CSS
h1 <
text-align: center;
font-size: 50px;
color: #d31818;
text-shadow: 3px 3px 3px rgba(101, 105, 108, 0.7);
>

Двойная тень

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

box-shadow:
-10px 0 20px -5px #333,
10px 0 20px -5px #333;

CSS генератор теней

Держать в голове последовательность параметров для создания теней, совсем необязательно. Можно пользоваться CSS генератором теней.

Обучающей информации в интернете много, но собирать её по крупицам неэффективно. Несистематичные знания, полученные из разных источников, плохо выстраиваются в общую картину. Остаются какие-то пробелы в знаниях, мешающие двигаться дальше. И на этом этапе, многие бросают изучение HTML/CSS.

Дорогие начинающие веб-мастера, призываю вас учиться у профессионалов. Это интереснее, легче и во много раз эффективнее. Познакомьтесь с описанием видео-курса «Верстка сайта с нуля 2.0».

Мастер Йода рекомендует:  PHP 5 - установка и конфигурация под наши нужды в режиме mod_php для Apache

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

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

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

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

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

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

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    12 эффектов для текста с использованием теней CSS

    Типографика является самой любимой игрушкой веб дизайнеров. CSS имеет в своем составе один очень интересный инструмент — text-shadow (тень текста), который на первый взгляд кажется достаточно простым, но с его помощью можно создать запоминающиеся эффекты, если подключить изобретательность и воображение.

    Основы использования теней

    Свойство text-shadow очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr, которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.

    Синтаксис

    Для создания тени текста используется синтаксис свойства text-shadow, который приводится ниже. Нужно определить четыре параметра: первые два задают положение тени, третий устанавливает уровень размытия, а четвертый определяет цвет тени.

    Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.

    Результат использования данного свойства будет выглядеть следующим образом:

    Почему используется rgba?

    Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени — уровень прозрачности.

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


    Вдавленный текст

    С помощью свойства text-shadow можно создавать различные эффекты для текста, не ограничиваясь простыми падающими тенями. Например, здесь приводится код для формирования иллюзии вдавленного текста.

    Сначала нужно установить цвет текста немного темнее, чем цвет фона. А затем надо использовать свойство text-shadow с белым цветом и увеличенной прозрачностью.

    Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.

    Четкая тень

    Совсем необязательно размывать тень. Четкая тень может отлично сочетаться с дизайном сайта.

    Двойная тень

    Настоящее веселье начинается, когда вы отринете прочь ограничение наличия только одной тени. Используя запятую для разделения определений вы можете использовать столько теней, сколько нужно!

    Вот пример использования двух теней. Первая имеет тот же цвет, что и фон.

    Смещение вниз на большое расстояние

    Как только вы освоите использование нескольких теней, результат будет все более и более выразительным. Очень просто создать 3D эффект для текста.

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

    Смещение вниз на небольшое расстояние и сильное размытие

    Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.

    3D текст от Mark Dotto

    Эффект используется на сайте MarkDotto.com. В нем используется 12 различных теней для создания отличного эффекта 3D.

    Вдавленный текст от Gordon Hall

    Notice in the example above I called my technique the “quick and dirty” letterpress effect. That’s because there’s a much more involved way to create some seriously inset text that’s much more believable.

    Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.

    Тень элемента в CSS

    С появлением стандарта CSS 3 введено свойство box-shadow , которое получило широкое применение среди веб-разработчиков, так как оно позволяет с легкостью добавить одну или несколько теней к блоку элемента для придания желаемого визуального эффекта.

    В предыдущий статье мы с Вами рассматривали свойство border-radius , используя его, вы можете получить тень с закругленными углами. По аналогии с текстовой тенью (text-shadow ), вы сможете создавать множественные тени, они наносятся по z-оси спереди назад (с первой заданной тенью сверху).

    Давайте детально рассмотрим синтаксис этого современного свойства:

    Рис. 95 Схема работы CSS свойства box-shadow.

    Рассмотрим по порядку возможные значения этого свойства:

    Значение Описание
    none Тень не отображается. Это значение по умолчанию.
    inset Необязательное значение. Если это значение не указано (по умолчанию), то тень будет снаружи элемента и создаст эффект выпуклости элемента. При наличие ключевого слова (значения) inset , тень будет падать внутри элемента и создаст эффект вдавленности. Другими словами, это изменение от наружной тени к внутренней.
    h-shadow Обязательное значение. Задаёт расположение горизонтальной тени. Допускается использование отрицательных значений.
    v-shadow Обязательное значение. Задаёт расположение вертикальной тени. Допускается использование отрицательных значений.
    blur-radius Необязательное значение. Задаёт радиус размытия. Чем больше это значение, тем больше размытие, при этом тень становится больше и светлее. Если значение не задано, то значение будет равно 0 (резкие — отчетливые тени). Отрицательные значения не допускаются.
    spread-radius Необязательное значение. Размер тени (радиус растяжения тени). При положительных значениях тень будет расшииряться, а при отрицательных сжиматься. Если значение не задано, то значение будет равно 0 (тень соответствует размеру элемента).
    color Необязательное значение. Определяет цвет тени (HEX, RGB, RGBA, HSL, HSLA, «Предопределённые цвета»). Значением по умолчанию является черный.

    Основные моменты, которые вам необходимо понять, чтобы создавать тени для элементов:

    • При работе с CSS свойством box-shadow допускается использование в объявлении от двух до четырех числовых значений для одной тени. К обязательным значениям этого свойства относятся только расположение горизонтальной и вертикальной тени. В них допускается использовать отрицательные значения.
    • К необязательным значениям относятся: значение цвета тени (по умолчанию черный), радиус размытия (по умолчанию 0, отрицательные значения не допускаются) и размер тени, или радиус растяжения (значение по умолчанию 0).
    • Обращаю Ваше внимание, что если Вы не указываете в своём объявлении необязательные значения, то они установятся в значения по умолчанию (h-shadow v-shadow black 0 0).
    • Для того, чтобы указать несколько теней, то необходимо добавить дополнительное значение тени, либо теней, разделенных между собой запятыми.
    • Процентные значения не допускаются. Для задания значений тени используются единицы измерения пиксели, либо em.

    Хочу обратить Ваше внимание на то, что свойство box-shadow в настоящее время поддерживается всеми современными браузерами:

    Свойство Chrome

    Firefox Opera Safari IExplorer Edge
    box-shadow 10.0
    4.0
    -webkit-
    4.0
    3.5
    -moz-
    10.5 5.1
    3.1
    -webkit-
    9.0 12.0

    Если Вы хотите расширить поддержку некоторых браузеров, включая мобильныx IOS 3.2 — 4.3 и Android 2.1 — 3, то рекомендуется использовать префиксы производителей и использовать следующий синтаксис (в примерах статьи будет использован синтаксис только для современных браузеров):

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

    В данном примере мы добавили на страницу:

    • Два блока фиксированной ширины и высоты ( 16em и 4em ), установили внешние отступы для всех сторон ( 2em ).
    • Задали цвет заднего фона, цвет текста и выровняли текст по центру.
    • Для блоков был использован один интересный прием, который позволяет отцентрировать текст по вертикали, для этого мы установили высоту строки равной высоте самого элемента (line-height: 4em ;). Часто такой прием используют в построении горизонтального меню навигации. Основное же применение свойства line-height, связано в первую очередь с установкой междустрочного интервала.
    • Для первого блока с классом .test мы указали значения горизонтальной и вертикальной тени равной 10px (обязательные значения), а цвет тени указали красный.
    • Для второго блока с классом .test2 мы также указали значения горизонтальной и вертикальной тени равной 10px (обязательные значения), цвет тени указали в шестнадцатеричной системе — #777 (серый), кроме того задали радиус размытия равный 10px и скруглили все углы элемента свойством border-radius , что отразилось и на тени элемента, об этой особенности я упоминал в начале этой статьи учебника.

    Реэультат нашего примера:


    Рис. 96 Пример использования свойства box-shadow в CSS.

    Использование множественных теней

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

    В данном примере мы добавили на страницу:

    • Два блока фиксированной ширины и высоты ( 15em и 10em ), добавили внешние отступы для всех сторон ( 2em ) и установили, что блоки являются блочно-строчными для возможности выстроить их в линейку.
    • Для первого блока с классом .test мы указали четыре тени с различными значениями горизонтальной и вертикальной тени для того, чтобы различные тени элемента были со всех сторон. Радиус размытия для всех теней установили один. Цвет каждой тени различен и задан с использованием предопределенных цветов.
    • Для второго блока с классом .test2 мы указали четыре тени с различными значениями горизонтальной и вертикальной тени. Радиус размытия для всех теней установили один, при этом растяжение тени указали отрицательным, что привело к уменьшению самой тени. Цвет каждой тени различен и указан с использованием системы RGBA.

    Реэультат нашего примера:

    Рис. 97 Пример использования множественных теней в CSS.

    Использование теней для изображений

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

    Работу с фоновыми изображениями мы подробно рассмотрим в статье учебника «Работа с фоном элемента в CSS», а сейчас, чтобы поставить точку в изучении использования теней, поверхностно её затронем, и используем изображение в качестве фона к элементу в следующем примере:

    В данном примере мы добавили на страницу:

    • Два блока фиксированной ширины и высоты ( 237px и 232px ), добавили внешние отступы для всех сторон ( 2em ) и установили, что блоки являются блочно-строчными для возможности выстроить их в линейку. Размер блока 237px на 232px мы установили под размер изображения, чтобы на данном этапе обучения не приходилось масштабировать изображение под элемент и затрагивать те свойства CSS, которые планируются к изучению на более позднем этапе (в статье учебника «Работа с фоном элемента в CSS»).
    • Для первого блока с классом .test мы указали нулевое значение горизонтальной и вертикальной тени, но при этом радиус размытия мы указали 50px и расширили ее, задав радиус растяжения 10px . Цвет тени указали предопределенным цветом ( violet ). Кроме того мы указали в объявлении ключевое слово inset , благодаря чему тень падает внутрь элемента. Другими словами мы создали внутреннюю тень элемента.
    • Для второго блока с классом .test2 мы указали нулевое значение горизонтальной и вертикальной тени, но при этом радиус размытия мы указали 50px и расширили ее, задав радиус растяжения 10px . Цвет тени указан в режиме RGBA.

    Реэультат нашего примера:

    Рис. 98 Пример использования теней для изображений в CSS (свойство box-shadow)

    Вопросы и задачи по теме

    Перед тем как перейти к изучению следующей темы пройдите практическое задание:

    • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
    • Используя полученные знания составьте следующие блоки с различными эффектами тени на странице:

      Практическое задание № 25.

      Подсказка: Обращаю Ваше внимание, что задачи 4, 5 и 6 считаются продвинутыми и расположены по мере нарастания сложности. Для их выполнения необходимо использовать множественные тени (две для четвертой задачи, четыре для пятой и три для шестой).

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

      Тень блока (свойство box-shadow) | CSS

      box-shadow generator

      Свойство box-shadow (w3.org) создаёт элементу тень.

      inset

      Как создать объёмный HTML элемент из нескольких box-shadow

      box-shadow может иметь сколько угодно значений. Поэтому им можно заменить картинки форматов JPEG, PNG и даже GIF [инструмент lvivski.com]. Можно, но не нужно. А вот создание объёма может быть полезным для того, чтобы смастерить, например, объёмную красивую кнопку.

      цвет одной стороны

      цвет другой стороны

      Эффект тени блока

      Тень вокруг div CSS

      Хм, отбрасывает ли предмет тень, когда свет на него падает сверху? Да, если предмет удалён от поверхности. Чем дальше, тем интенсивнее тень. Сама проверяла, светя фонариком.

      CSS тень с одной стороны

      Снизу (под блоком div)

      По бокам (справа и слева)


      Многослойный блок с помощью box-shadow

      Разноцветная CSS рамка

      Еще варианты можно посмотреть у css.yoksel.ru.

      CSS внутренняя тень блока (внутри элемента)

      Как сделать вдавленный элемент

      Как сделать выпуклый элемент с округлыми краями

      box-shadow inset и картинка img

      box-shadow и HTML тег input

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

      Или подсветка внутри input (получилась красивая форма входа CSS):

      box-shadow и transition или animation

      box-shadow можно плавно изменять, но нужно учитывать особенность этого изменения:

      75 комментариев:

      К boxShadow подставляйте необходимые цифры.

      Один селектор, я посчитала лишним писать каждый раз HTML. К тому же тут не нужен даже весь код CSS, нужно только значение box-shadow. У «box-shadow inset и картинка img» и ниже есть HTML после CSS. Анонимный Отлично СПАСИБИЩЕ! Анонимный Спасибо за статью. А что нужно добавит, чтоб это работало и в сафари 5.1. ? у меня не получается! NMitra Добавьте -webkit-

      -webkit-box-shadow: 0 0 8px; Анонимный Нет, не помогает. Я взял на вооружения boxShadow18. Сафари не реагирует. NMitra Он вообще box-shadow не понимает или именно мой код? У браузеров может быть разная поддержка на разных устройствах. На компьютере будет работать, а на планшетах и телефонах — нет. Эффект box-shadow можно заменить с помощью фоновой картинки. Анонимный #leftmenu <
      width: 100%;
      max-width: 180px;
      margin: 1em auto;
      padding: 1em;
      border-radius: 40px;
      background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));/*(Скорее всего тут я допускаю ошибку*/
      box-shadow:
      inset rgba(0,0,0,.6) 0 -3px 8px,
      inset rgba(252,255,255,.7) 0 3px 8px,
      rgba(0,0,0,.8) 0 3px 8px -3px;
      -webkit-box-shadow: inset 0px 0px -3px 8px rgba(0, 0, 0, 0.6),
      -webkit-box-shadow: inset 0px 0px 3px 8px rgba(252, 255, 255, 0.7),
      -webkit-box-shadow: 0px 3px 8px -3px rgba(0, 0, 0, 0.8);
      >
      NMitra Вместо одной

      background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));

      background-color: #646464;
      background-image: -webkit-radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
      background-image: radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35)); Анонимный #leftmenu
      День добрый! Я Вас не оставляю в покое. Спасибо что откликнулись. Просто действительно понравилось ваша статья и примеры, и решил некоторые свой блоки оформить подобным образом. Что касается моей проблемы, такова эффекта я и вчера добился, но тогда пропадает эффект выпуклости, а это для меня как-то важно. А именно почему можете посмотреть, при желании, на сайте www.dlcompany.org спасибо за отзывчивость. Анонимный Скажите пожалуйста, как для движка mozilla применить одновременно и внутреннюю и внешнюю тень, через запятую работает только одна тень (которая первая, вторая игнорируется). Вот правда — на движке web-kit работает всё 100% — и в chrome и в maxthon — и вроде даже в последней opera, а вот в seamonkey, mozilla, pale moon — нет, в internet explorer — тоже неработает (я имел ввиду запись типа:
      box-shadow:0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);
      -moz-box-shadow: 0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);
      -webkit-box-shadow:0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);) NMitra Вы хоть имя подставляйте.

      Комментарий 46:
      сделать так, чтобы на всех браузерах на всех устройствах при использовании всех операционных систем картинка 3D выглядела одинаково крайне не просто. Или просто, коли использовать нарисованный background: url(). Разработчик может лишь следовать общим стандартам w3.org и сделать так, чтобы при отсутствии поддержки box-shadow или другого свойства макет сайта не разъехался и были доступны основные функции регистрации, заказа, формы связи и т.п.

      Комментарий 47:
      у меня всё работает на windows, префиксы пишутся в другом порядке

      Делаем тень блока в CSS

      Добрый день, дорогие посетители!

      В этой статье я хотела бы рассмотреть, как сделать с помощью CSS тень блока.

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

      Навигация по статье:

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

      Для добавления тени элементу на странице мы можем воспользоваться свойством CSS box-shadow, которое позволяет задать тень блока в любых вариациях.

      Вот самый простой способ использования данного свойства:

      Первым значением мы задаем сдвиг тени блока по горизонтали вправо, а вторым – по вертикали вниз. При таком задании значений у тени не будет размытия, а цвет тени блока будет таким же, как цвет текста в данном блоке, то есть, значение цвета будет браться из свойства color.

      В этом случае мы получим вот такую тень:

      Для того, что бы указать смещение тени влево и вверх мы должны задать сдвиг со знаком минус (-).

      Расширенное задание параметров box-shadow

      В этом свойстве можно так же указать размытие и цвет тени блока. В этом случае наше свойство будет выглядеть вот так:

      Значение 5px задает размытие тени, а #cccссс – цвет тени в шестнадцатеричной системе.

      Для задания смешения и размытия мы можем указывать величину в пикселях или относительных единицах измерения (em).

      Цвет так же можно задавать различными способами. Мы можем задать цвет тени шестнадцатеричным значением, использовать формат RGB или же можно задать полупрозрачную тень с помощью формата RGBA. Например, вот так:


      Здесь первый три цифры (120,120,120) – это значения цветов красный, зелёный, синий.
      Последнее число (0.5) – это уровень прозрачности, который может иметь значения от 0 до 1

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

      И тогда мы получим такой результат:

      Как делается внутренняя тень CSS?

      Для задания внутренней тени нужно в свойстве box-shadow, перед заданием смешения указать параметр inset.

      Запись свойства в этом случае будет выглядеть так:

      И получим такой результат:

      Использование нескольких теней одновременно

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

      Вот как это выглядит:

      Еще один момент! Так как свойство box-shadow относится к разряду свойств CSS3, то оно может не поддерживаться более старыми версиями браузеров, поэтому если вам нужно сделать коссбраузерную верстку с поддержкой теней, то свойство box-shadow нужно задавать для каждого браузера со специальными кроссбраузерными префиксами:

      -webkit – для вебкит браузеров (Яндекс-браузер, GoogleChrome, новая версия Opera и т.д.)
      -moz – для Mozilla Firefox
      -о – для старых версий Opera
      -ms — для Internet Explorer 8

      Как видите, сделать с помощью CSS тень для блока не так уж и сложно. Главное понять какой параметр за что отвечает, и, подключив фантазию, вы сможете сделать очень интересное оформление для своего сайта. На мой взгляд, сайты с грамотно расставленными тенями для элементов выглядят очень красиво.

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

      Надеюсь, у меня получилось разобрать данную тему достаточно подробно, и у вас не возникнет сложностей при добавлении теней. Если статья вам понравилась, не забывайте поделиться ею в социальных сетях и подпишитесь на рассылку, а так же на мой канал на YouTube. До встречи в следующей статье!

      CSS тень блока

      В чем основное достоинство теней, созданных при помощи CSS3, так это в простоте реализации и уменьшении числа запросов к серверу (поскольку мы больше не используем картинки). Чтобы сделать тень на CSS нам понадобится тег div и CSS свойство box-shadow. Вам не понадобится дополнительная разметка, поскольку мы создим псевдо элементы :after и :before, которые поместим за основным объектом (div с классом block).

      Взгляните на HTML код, для которого мы будем создавать CSS3 тень:

      Далее вы сможете посмотреть готовые примеры и код, необходимый для их реализации. С целью минимизации текста на странице, мы опустим CSS свойства с браузерными префиксами. Полный код можно увилдеть, нажав на соответствующую примеру ссылку «Пример».

      Приподнятые уголки

      Завитки на уголках

      Перспектива

      С помощью тени можно придать блоку перспективу. Смотреть пример.

      Приподнятый бокс

      CSS тень у проподнятого блока. Смотреть пример.

      Один вертикальный изгиб

      Пример CSS3 тени для вертикально согнутого блока. Смотреть пример.

      Два вертикальных изгиба

      Один горизонтальный изгиб

      Пример CSS3 тени для горизонтально согнутого блока. Смотреть пример.

      Два горизонтальных изгиба

      Повернутый блок

      CSS3 тень для повернутого блока. Смотреть пример.

      Установка тени для блока и текста в CSS

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

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


      Нужно блоку добавить всего одно свойство, box-shadow и передать несколько параметров.

      box-shadow: 10px 10px 15px #ebe6e6;

      Смещение тени по X. Указываем на сколько пикселей сместить тень вправо от элемента или влево с отрицательным значением.

      Смещение тени по Y. Задаем количество пикселей с отрицательным значением для смещения вверх и с положительным значением для смещения вниз.

      Размытие тени. Прописываем радиус размытия тени. Чем больше радиус, тем сильнее размоются края тени.

      Цвет тени. Можно указать как в шестнадцатеричной системе, так и в формате RGB-a.

      Я обычно задаю цвет тени в формате RGB-a. Наличие альфа-канала, позволяет сделать тень полупрозрачной. Так она получается мягкой и более естественной.

      box-shadow: 10px 10px 15px rgba (235, 230, 230, 0.5);

      Пример тени для блока

      // CSS код
      .block <
      width: 250px;
      height: 150px;
      height: 150px;
      display: block;
      margin: 50px auto;
      background-color: #f88bca;
      box-shadow: 10px 10px 15px rgba(235, 230, 230, 0.5);
      >

      Пример тени снизу

      Тень вокруг блока

      Внутренняя тень

      Чтобы установить тень внутри блока, первым параметром передаем ключевое слово: inset.

      box-shadow: inset 0 0 15px rgba(255, 255, 255); // CSS

      Тень у текста

      Тень у текста задается по такому же принципу, как и у блока, но через свойство text-shadow.

      Текст с тенью

      // CSS
      h1 <
      text-align: center;
      font-size: 50px;
      color: #d31818;
      text-shadow: 3px 3px 3px rgba(101, 105, 108, 0.7);
      >

      Двойная тень

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

      box-shadow:
      -10px 0 20px -5px #333,
      10px 0 20px -5px #333;

      CSS генератор теней

      Держать в голове последовательность параметров для создания теней, совсем необязательно. Можно пользоваться CSS генератором теней.

      Обучающей информации в интернете много, но собирать её по крупицам неэффективно. Несистематичные знания, полученные из разных источников, плохо выстраиваются в общую картину. Остаются какие-то пробелы в знаниях, мешающие двигаться дальше. И на этом этапе, многие бросают изучение HTML/CSS.

      Дорогие начинающие веб-мастера, призываю вас учиться у профессионалов. Это интереснее, легче и во много раз эффективнее. Познакомьтесь с описанием видео-курса «Верстка сайта с нуля 2.0».

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

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

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

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

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

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

      Она выглядит вот так:

    • BB-код ссылки для форумов (например, можете поставить её в подписи):
    • Комментарии ( 0 ):

      Для добавления комментариев надо войти в систему.
      Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

      Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

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