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

Тень блока в CSS

Тень блока в CSS

Тень блока – отличный эффект трехмерности, которая придает блокам сайта реалистичность и объемность. Когда я начинал изучать HTML (примерно 5-6 лет тому назад), я не догадывался о существовании CSS, и мне при создании сайта приходилось делать тень блоков изображением. Это было очень неудобно, да и не всегда получалось так, как хотелось. Спасибо возможностям CSS, которые упростили труд веб-дизайнеров. Сегодня я покажу возможность в CSS, как создать для блоков тень.

Для добавления тени в CSS используется свойство box-shadow .

Тень блока в CSS

1. сдвиг тени по горизонтали (до 100px вправо, до -100px влево);
2. сдвиг по вертикали (до 100px вниз, до -100px вверх);
3. размытие тени (0 — четкая тень, 100 — сильно размытая тень);
4. растяжение тени (до 100px — растяжение, до -100px — сжатие);
5. цвет тени;
6. inset — тень внутри элемента, без inset тень будет наружу.

Тень блока в CSS

Таблица с тенями:

код Пример:
box-shadow: 0px 13px 17px -6px #000000; Тень блока в CSS
box-shadow: 10px -10px 0px -6px #000000; Тень блока в CSS
box-shadow: 10px 13px 0px -6px #000000; Тень блока в CSS
box-shadow: 1px 1px 32px -6px #000000; Тень блока в CSS
box-shadow: -1px 23px 41px -25px #000000; Тень блока в CSS
box-shadow: -1px 23px 41px -25px #4dc13c; Тень блока в CSS
box-shadow: -10px -10px 40px -6px #000000 inset; Тень блока в CSS
box-shadow: 7px 10px 23px -8px #92a9e7; Тень блока в CSS

С помощью тени можно создать объемный блок:

Код Пример
box-shadow: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(191,166,6), 3px 2px rgb(218,193,33), 3px 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 5px 5px rgb(188,163,3), 6px 5px rgb(215,190,30), 6px 6px rgb(187,162,2), 7px 6px rgb(214,189,29), 7px 7px rgb(186,161,1), 8px 7px rgb(213,188,28), 8px 8px rgb(185,160,0), 9px 8px rgb(212,187,27), 9px 9px rgb(184,159,0); Тень блока в CSS
box-shadow: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3px 2px rgb(218,193,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), -5px 5px rgb(188,163,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8px 7px rgb(213,188,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0); Тень блока в CSS
box-shadow: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191,166,6), -3px -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5px -4px rgb(216,191,31), -5px -5px rgb(188,163,3), -6px -5px rgb(215,190,30), -6px -6px rgb(187,162,2), -7px -6px rgb(214,189,29), -7px -7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9px -9px rgb(184,159,0); Тень блока в CSS
box-shadow: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(191,166,6), 3px -2px rgb(218,193,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,191,31), 5px -5px rgb(188,163,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(186,161,1), 8px -7px rgb(213,188,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0); Тень блока в CSS

Тень по бокам блока с левой и правой стороны

Тень по бокам блока с левой и правой стороны

Многослойный блок

Многослойный блок

Многослойный блок

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

Красивая рамка с помощью свойства boxshadow

Красивая рамка с помощью свойства box-shadow

Красивый блок с растушеванной тенью

Красивый блок с растушеванной тенью

Объемный блок с закругленными углами

Объемный блок с закругленными углами

Неровная тень

Неровная тень

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

Свойство CSS box-shadow

Свойство CSS box-shadow позволяет задать тень элементу html. Используется дизайнерами сайтов довольно часто, чтобы как-то украсить и выделить рамки с текстом, изображения, сделать более читабельным контент.

Синтаксис CSS box-shadow

  • X — смещение по оси Х (горизонтали)
  • Y — смещение по оси У (вертикали)
  • R1 — размытие (чем больше значение, тем плавне переход)
  • R2 — радиус растяжения (если положительный, то растягивает, отрицательный — сжимает)
  • color — цвет (можно задавать в любом формате: #RGB, название цвета)
  • inset — при наличии этого значения тень будет располагаться внутри блока (элемента)

Пример 1. HTML рамка с тенью box-shadow без смещения

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

На странице преобразуется в следующее

Пример 2. HTML рамка со смещенной тенью box-shadow

Практически тот же пример, что и первый, но только со смещением рамки.

На странице преобразуется в следующее

Пример №3. Свечение рамки html

Реализация тени в виде свечения

На странице преобразуется в следующее

Пример 4. Внутреннее свечение границы html

Свечение, которое направлено внутрь блока и никак не выходит за его пределы. Эффект создается за счет атрибута inset .

На странице преобразуется в следующее

Пример 5. Совмещение теней в html

Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты. Например, можно сделать разноцветную рамку в стиле 3D.

На странице преобразуется в следующее

IE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow

CSS тень блока|Как создать красивую css тень блока

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

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

Свойство box-shadow для создания тени

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

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

Больше информации на: www.w3.org

А вот и сам код блока:

<div style=»height: 20px; width: 300px; margin: auto 20%; background-color: #fff; div.radius border-radius: 0px; box-shadow: 0 0px 3px 3px #777; > border-left: 4px solid #ff9218;» align=»center»></div>

Расшифровка значений:

  • height: 2 0px – высота блока
  • width: 3 00px — ширина блока
  • margin: auto 20% — выравнивания блока (центрирование)
  • background-color — цвет фона внутри блока
  • div. radius border-radius — радиус закругления углов
  • box-shadow — тень блока 0 0 3 px — расстояния тени от блока, 3 px — толщина тени.
  • border-center: 1px solid #D02A2A; » — сплошная линия по левому краю
    align=» center» — выравнивание по центру
  • box-shadow (значения отвечающее за тень, 0 сторона тени -право, лево, 0 — сторона тени верх, низ, 3px — ширина тени, 3px — отдаленность или ее размытость. (0 0 3px 3px)
Результат css тени блока:

Ширина тени 3 px -размытость тени 3 пикселя, угол падения равен 0 (box-shadow 0 0 3 px 3 px ):

CSS тень блока|Как создать красивую css тень блока

Здесь ширина так же 3 px а ее размытость на 29 px, угол падения тени 0 (box-shadow 0 0 3 px 29 px)

CSS тень блока|Как создать красивую css тень блока

Что бы Тень была сверху, пишем отрицательное число -10px (box-shodow 0 -10px 29px 3px)

CSS тень блока|Как создать красивую css тень блока

Что бы тень была снизу необходимо второй число 0 исправить на любое другое, например (box-shodow 0 10 px 29 px 3 px )

CSS тень блока|Как создать красивую css тень блока

Что бы тень была с боку, для этого прописываем число первому 0 отвечающее за сторону падения, например 5 px тень будет с правой стороны, отрицательное число с левой стороны, например (box-shodow -7px -7px 34px 2px) -тень сверху с лево.

CSS тень блока|Как создать красивую css тень блока

Если сделать тень и фон одинаковым цветом, получится такой эффект (box-shadow 0 3 px 3 px):

CSS тень блока|Как создать красивую css тень блока

Можно к этому коду добавить значения webkit-transform: rotate(3deg) — что создает эффект наклона блока положительное число 3 deg — наклон в право, отрицательное -3deg — наклон в лево.

Например box-shadow: 0 14px 11px #777; -webkit-transform: rotate (3 deg);

CSS тень блока|Как создать красивую css тень блока

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

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

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

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