Как сделать тень внизу блока в css
Перейти к содержимому

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

  • автор:

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

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

box-shadow

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

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

Можно, конечно, воспользоваться генераторами теней, но если ваша задача – изучать 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 (наведении курсора).

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

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

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

На этом пока всё! Терпения вам, упорства и успех непременно придёт ��

Голосов: 0 , Средняя оценка: 0

Как сделать тень при наведении css

CSS-свойство box-shadow добавляет тень к элементу. Через запятую можно задать несколько теней. Тень описывается смещениями по оси X и Y относительно элемента, радиусом размытия и распространения, а также цветом. Для создания эффекта, когда тень появляется при наведении курсора мыши на элемент, необходимо использовать псевдокласс :hover .

 class="box-with-shadow"> У этого элемента будет тень 
.box-with-shadow  /* Ширина блока */ width: 250px; /* Внутренние отступы */ padding: 32px; /* Цвет фона в элементе */ background-color: #38d9a9; /* Сделаем видимую границу элементу */ border: 1px solid #333; > .box-with-shadow:hover  /* Свойство отвечающее за формирование тени 8px - отступ по оси Х 10px - отступ по оси Y 5px - радиус размытия тения 2px - радиус распространения rgba - функция формирующая цвет тени */ box-shadow: 8px 10px 5px 2px rgba(0, 0, 255, .2); > 

Тень блока на CSS

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

Описание свойства

С помощью этого свойства можно управлять цветом тени, ее размерами, смещением. Также можно добавлять несколько теней к элементу, если перечислять их через запятую.
Следует учитывать, что добавление тени делает элемент более широким. Надо следить, чтобы он не выходил за пределы окна браузера. Иначе появится горизонтальная полоса прокрутки.
Возможны следующие значения свойства box-shadow:

  1. none. Убирает добавленную тень.
  2. inset. Реализует тень внутри блока в CSS.
  3. Сдвиг по оси X и Y. Позволяет сместить тень по горизонтали и вертикали относительно объекта соответственно. Оба эти параметра указывать обязательно.
  4. Радиус размытия. Если его не указать, тень будет, но четкая. А чем больше это значение, тем она больше, мягче и светлее.
  5. Растяжение. Регулирует, будет тень больше элемента или меньше. Для этого нужно установить положительное и отрицательное значение соответственно. Если не указать, величина тени будет совпадать с размерами элемента.
  6. Цвет. Если не указан, тень будет черной.

Если указывается несколько теней, первая будет размещаться вверху, а вторая – ниже, последняя – в самой нижней части элемента.
Синтаксис свойства:

box-shadow: none | [,]*

inset

Например, чтобы сделать тень блока с одной стороны по горизонтали, необходимо задать сдвиг по оси x, а чтобы отобразить ее внизу – по оси y.

Совместимость

Чтобы сделать эффект совместимым со старыми версиями браузеров, необходимо добавлять вендорные префиксы или свойство filter (для IE до 9 версии). Кроме указания самого свойства, необходимо добавить его копию с вендорным префиксом или фильтром.
Если нужно реализовать поддержку старых версий Safari и Chrome (в том числе, и для мобильных устройств), надо указать свойство –webkit-box-shadow. А для обеспечения совместимости с браузером Firefox надо добавить префикс -moz.
Например, тень снизу будет выглядеть следующим образом.

.effect1

Несколько сложнее обеспечить совместимость со старыми версиями Internet Explorer. Для этого необходимо использовать свойство

filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

Первый параметр – смещение по горизонтали, второй – смещение по вертикали, а третий – цвет тени. А вот размытие с помощью этого фильтра задать нельзя. Для этого нужно использовать свойство

filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10)

где первый параметр задает угол направления тени (по кругу, до 360 градусов), второй – цвет, а третий – дальность смещения тени.
Разработчик может воспользоваться генератором тени блока css и автоматизировать подбор ее параметров.

Пример тени

Интересный эффект тени – лишь слева и справа от блока, реализуется таким кодом.

.effect2 < position: relative; >.effect2:before, .effect2:after < z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); >.effect2:after

Суть проста – тени даются не самому блоку, а его псевдоэлементам, которые прописываются в селекторе. Если воспользоваться лишь одним из псевдоэлементов, можно сделать тень по одну из сторон снизу.

Как создать тени на CSS: свойство box-shadow

CSS-свойство box-shadow добавляет тень вокруг элемента — внутри или снаружи. В зависимости от того, какую тень вы создадите, элемент будет казаться объёмным или глубоким:

Кнопка слева словно выступает над страницей, а кнопка справа уходит вглубь

Для чего использовать box-shadow

Чтобы выделить интерактивные элементы. Например, если у вас на сайте есть кнопки или ссылки, можете добавлять им тень при наведении мыши.

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

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

�� Используйте тени с умом, не злоупотребляйте ими.

Синтаксис box-shadow и примеры создания теней

Тени добавляются так:

селектор элемента

Смещение и размытие задаётся в пикселях, цвет указывается в формате RGBA. Например, здесь мы добавляем тень со смещением в два пикселя по горизонтали и вертикали, размытием четыре пикселя и полупрозрачным чёрным цветом:

button

Получается такая кнопка:

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

button

Кнопка станет такой:

Внутренние тени

Внутренняя тень создаёт эффект глубины в элементе. Чтобы её добавить, нужно перед остальными значениями box-shadow написать параметр inset :

button

Сложные тени

Для таких эффектов нужно скомбинировать несколько теней с разными параметрами — это делается через запятую:

button < box-shadow: 0 2px 4px rgba(235, 238, 23, 0.3), /* Жёлтый цвет */ 0 6px 10px rgba(0, 0, 0, 0.1); /* Зелёный цвет */ >

Мы добавили кнопке две тени: жёлтую с меньшим размытием и зелёную с большим смещением.

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

В этом примере мы добавили кнопке фон с помощью градиента, переход идёт от красного #ff0000 в верхнем левом углу к зелёному #00ff00 в нижнем правом углу. И дополнительно мы применили box-shadow , чтобы у элемента появились две тени — внутренняя и внешняя.

Генератор теней

Если сложно запомнить значения свойства, используйте генератор box-shadow . Он помогает настроить смещение, размытие, прозрачность и цвет теней.

Добавить тень

Код тени

Скопируйте его и используйте в своих CSS-стилях.

Советы по использованию box-shadow

  • Избегайте чрезмерного использования теней.
  • Не бойтесь экспериментов с разными значениями свойства — они помогут найти интересные эффекты.
  • Учитывайте доступность. Тени могут влиять на визуальное восприятие элемента и его контента, например, снижать контрастность текста по отношению к фону. Поэтому проверяйте, чтобы текст или другой контент внутри элемента оставался читаемым и понятным.
  • Если вы создаёте тени по наведению курсора, используйте плавные переходы. С ними эффект будет выглядеть более естественно.
  • Перед использованием свойства проверьте его поддержку браузерами на сайте caniuse.

Материалы по теме

  • Как вставить изображение фоном
  • Как добавить картинке фильтры
  • Как раскрасить элемент: CSS-свойство color

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Новое в 2023 — text-wrap: balance

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

  • 13 ноября 2023

Знакомство с CSS

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

  • 1 ноября 2023

Увеличение ссылки при наведении

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

  • 13 октября 2023

WOFF больше не нужен

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

  • IE 11, 10, 9, 8, 7, …
  • Chrome 4–35
  • Edge 12 и 13
  • Safari 3–9.1
  • Firefox 2–38
  • Opera 22 и ниже
  • Android 4.4.4 KitKat и ниже (а это
  • Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

  • 23 сентября 2023

Трясём пароль с помощью CSS

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

Вот что получится в итоге:

  • 7 сентября 2023

Как сделать тёмную тему на сайте

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

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

  • 29 августа 2023

4 способа центрировать текст в CSS

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 

Центрированный текст

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

  • 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

  • 28 июля 2023

CSS-свойство contain

CSS-свойство contain

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

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

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container
  • 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element
  • 13 июля 2023

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

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