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

box-shadow

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

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

При наложении теней друг на друга каждая последующая тень в списке будет располагаться под предшествующей.

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

Примечание: для добавления тени к тексту используйте CSS свойство text-shadow.

Значение по умолчанию: none
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.boxShadow="10px 10px 5px #888888"

Синтаксис

Значения свойства

Примечание: первые 4 значения, описываемые в таблице, указываются с помощью единиц измерения поддерживаемых в 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

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

box-shadow

box-shadow — тень в CSS

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

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

Можно, конечно, воспользоваться генераторами теней, но если ваша задача – изучать CSS, то не поленитесь для начала проделать всё вручную, написать параметры самостоятельно, разобраться в них, а уже потом генерировать со знанием дела 🙂

Пример записи тени в CSS

Тень отменяется: box-shadow: none;

Полупрозрачная тень: box-shadow: 0px 5px 15px 2px rgba(0, 0, 0, 0.15);

Тень внутри элемента: box-shadow: inset 0px 5px 5px 2px #ccc;

Значения box-shadow

none – без тени

inset — тень внутри элемента

0pxсдвиг по оси X — cмещение тени по горизонтали относительно элемента. Положительное значение параметра задаёт сдвиг тени вправо, отрицательное — влево.

5px — сдвиг по оси Y — cмещение тени по вертикали относительно элемента. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх.

15pxразмытие — задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой.

2pxрастяжение — положительное значение растягивает тень, отрицательное, наоборот, её сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.

rgba(0, 0, 0, 0.15)цвет тени в любом CSS формате. Здесь я указала черный цвет и прозрачность 0,15%. Можно и так задать цвет тени: #ccc.

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

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

Пример тени №1

Вариант небольшой полупрозрачной тени, которая исчезает при наведении курсора:

Пример тени №2

Этот вариант с большой тенью — для наглядности, она также плавно пропадает при hover (наведении курсора).

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

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

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

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

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