Тень в CSS3. Как сделать тень в CSS3 для блока (div)

Тень в CSS3. Как сделать тень в CSS3 для блока (div) Тень под блочным элементом на странице обычно применяется для создания эффекта трёхмерности, привлечения внимания к элементу или как часть дизайна. Небольшая тень под элементами придаёт также странице объём и глубину. Для добавления тени используется свойство box-shadow, у которого имеется шесть значений, из них только два являются обязательными. Значения свойства box-shadow: box-shadow: inset 5px 5px 10px 3px #ccc; На данном примере показано свойство box-shadow со всеми возможными значениями, каждое значение имеет свою идентификацию: Ключевое слово inset устанавливает тень внутри элемента; Сдвиг тени по горизонтали (5px — вправо, -5px — влево); Сдвиг по вертикали (5px — вниз, -5px — вверх); Радиус размытия тени (0 — резкая тень); Растяжение тени (5px — растяжение, -5px — сжатие); Цвет тени. Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета. За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней. Для того чтобы тень работала во всех браузерах, используйте значение CSS со следущими свойствами: box-shadow:                inset 5px 5px 10px 3px #ccc; -webkit-box-shadow:   inset 5px 5px 10px 3px #ccc;  /*Для Safari и Chrome*/ -moz-box-shadow:       inset 5px 5px 10px 3px #ccc;  /*Для Firefox*/

Плавное увеличение изображения при наведении курсора CSS

Плавное увеличение изображения при наведении курсора CSS Создаем блочный элемент (div) с классом (box-wrapper), который будет служить в качестве обертки содержииого внутри Внутри элемента (div) с классом (box-wrapper) создаим еще один блочный элемент, с помщью которого мы будем регулировать размрер блока, назовем его (box-image) Внутри блока (div) c классом (box-image) создадим еще один блочный элемент с классом (image) для отображения содержания блочного элемента только внутри элемента с помощью свойства(overflow) со значением (hidden) И на конец, внутри блока (div) c классом (image) добавим строчный элемент (img) с ссылкой на изображение в атрибуте (src).                                          Переходим в таблицу стилей CSS: В классе (box-wrapper) необходимо выравнить наш блок по центру с помощью свойства (display: flex) и свойств центрирования (justify-content: center) и (align-items: center) В (box-image) задаим ширину элемента 50% (Поскольку я размещаю данную разметку на своем сайте (см.пример ниже), то я задаю ширину 100%, если вы размещаете данный пример на пустой странице, то для корректоного отбражения задайте 50%) В классе (image) устанавливаем свойство(overflow) со значением (hidden), для отображения содержания блочного элемента только внутри элемента, остальное будет скрыто. В классе (image) в селекторе (img) lобавляем свойство (transition) для плавного перехода,со значением (all 1s ease-out) Создаем новый новый класс (image) с псевдоклассом (hover:), и устанавливаем свойство (transform) со значением (scale) для масштабирования элемента по горизонтали и вертикали, в скобках задаем размер масштабирования. .box-wrapper {     display: flex;     justify-content: center;     align-items: center;     height: 100vh; } .box-image {     width: 30%; } .image {     overflow: hidden; } .image img {     width: 100%;     height: 100%;     transition: all 1s ease-out; } .image:hover img {     transform: scale(2.3); }