Как использовать CSS box-shadow: 13 хитростей и примеров

Как использовать CSS box-shadow: 13 хитростей и примеров

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





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



Что такое CSS box-shadow?

В тень коробки Свойство используется для применения тени к элементам HTML. Это одно из наиболее часто используемых свойств CSS для стилизации блоков или изображений.





Синтаксис CSS:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. горизонтальное смещение: Если горизонтальное смещение положительное, тень будет справа от поля. А если смещение по горизонтали отрицательное, тень будет слева от поля.
  2. вертикальное смещение: Если вертикальное смещение положительное, тень будет ниже прямоугольника. И если вертикальное смещение отрицательное, тень будет над прямоугольником.
  3. радиус размытия: Чем выше значение, тем более размытой будет тень.
  4. радиус распространения: Это означает, насколько должна распространяться тень. Положительные значения увеличивают разброс тени, отрицательные значения уменьшают разброс.
  5. Цвет: Это означает цвет тени. Кроме того, он поддерживает любой цветовой формат, такой как rgba, hex или hsla.

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



1. Добавьте тусклую тень блока слева, справа и снизу блока.

Вы можете добавить очень тусклые тени к трем сторонам (левой, правой и нижней) блока, используя следующий CSS-код box-shadow с вашим целевым HTML-элементом:

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Выход:



2. Добавьте затемненную тень ко всем сторонам.

Вы можете добавить легкие тени ко всем сторонам поля, используя следующий CSS-код box-shadow с вашим целевым HTML-элементом:



box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Выход:

3. Добавьте тонкую тень блока на нижнюю и правую стороны.

Вы можете добавить тени в нижнюю и правую часть поля, используя следующий CSS-код box-shadow с вашим целевым HTML-элементом:

как заработать на кодировании
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Выход:

4. Добавьте темную тень ко всем сторонам.

Вы можете добавить темную тень ко всем сторонам поля, используя следующий CSS-код box-shadow с вашим целевым HTML-элементом:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Выход:

5. Добавьте рассеянную тень ко всем сторонам.

Вы можете добавить рассеянную тень ко всем сторонам поля, используя следующую команду с вашим целевым HTML-элементом:

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

Выход:

6. Добавьте тонкую тень на все стороны.

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

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Выход:

7. Добавьте тень на нижнюю и левую стороны.

Вы можете добавить тень к нижней и левой сторонам поля, используя следующий CSS-код box-shadow с вашим целевым HTML-элементом:

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Выход:

8. Добавьте тусклую тень блока на верхнюю и левую стороны, темную тень на нижнюю и правую стороны.

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

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Выход:

9. Добавьте тонкую цветную тень на все стороны.

Вы можете добавить простую цветную тень границы ко всем сторонам поля, используя следующий CSS-код box-shadow с вашим целевым HTML-элементом:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Выход:

10. Добавьте несколько цветных границ теней на нижнюю и левую стороны блока.

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

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Выход:

как скрыть папки windows 10

11. Добавьте несколько цветных теней на нижнюю часть.

Вы можете добавить несколько цветных теней к нижней части поля, используя следующий CSS-код box-shadow с вашим целевым HTML-элементом:

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

Выход:

12. Добавьте несколько цветных границ теней на нижнюю и правую стороны блока.

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

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

Выход:

13. Добавьте светлые тени на левую и правую стороны, распространите тень на нижнюю часть.

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

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

Выход:

Интегрируйте CSS с HTML-страницей

Теперь вы знаете, как добавлять классные эффекты тени блока с помощью CSS, вы можете легко интегрировать их с элементами HTML разными способами.

Связанный: 11 полезных инструментов для проверки, очистки и оптимизации файлов CSS

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

Внутренний CSS

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





CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}




Style 4





Встроенный CSS

Встроенный CSS используется для добавления уникальных стилевых правил к элементу HTML. Его можно использовать с элементом HTML через стиль атрибут. Атрибут стиля содержит свойства CSS в виде 'стоимость имущества' разделенные точкой с запятой ( ; ).

Связанный: Узнайте, как создавать двумерные веб-сайты с помощью CSS Grid

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





CSS box-shadow



Style 4





Внешний CSS

Внешний CSS - это наиболее идеальный способ применения стилей к HTML-документам. Внешняя таблица стилей содержит все правила стилей в отдельном документе (файле .css), затем этот документ связывается с документом HTML с помощью ярлык. Этот метод - лучший метод определения и применения стилей к HTML-документам, так как затронутый HTML-файл требует минимальных изменений разметки. Вот пример, демонстрирующий, как использовать внешний CSS с HTML-документом:

Создайте новый файл CSS с .css расширение. Теперь добавьте в этот файл следующий код CSS:

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

Наконец, создайте документ HTML и добавьте в него следующий код:

почему мой USB не появляется




CSS box-shadow




Style 4





Обратите внимание, что файл CSS связан с документом HTML через тег и href атрибут.

Все три вышеупомянутых метода (внутренний CSS, встроенный CSS и внешний CSS) будут отображать один и тот же вывод -

Сделайте свою веб-страницу элегантной с помощью CSS

Используя CSS, вы полностью контролируете стиль своей веб-страницы. Вы можете настроить каждый элемент HTML, используя различные свойства CSS. Разработчики со всего мира вносят свой вклад в обновления CSS, и они делают это с момента его выпуска в 1996 году. Таким образом, новичкам есть чему поучиться!

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

Делиться Делиться Твитнуть Эл. адрес 10 простых примеров кода CSS, которые вы можете изучить за 10 минут

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

Читать далее Похожие темы
  • Программирование
  • Веб-дизайн
  • CSS
Об авторе Юврадж Чандра(Опубликовано 60 статей)

Юврадж - студент бакалавриата по информатике в Университете Дели, Индия. Он увлечен веб-разработкой Full Stack. Когда он не пишет, он исследует глубину различных технологий.

Ещё от Yuvraj Chandra

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Нажмите здесь, чтобы подписаться