Уловки и детали CSS-теней, о которых вы не знали

О тенях CSS я уже писал статью,Box-shadow и filter:drop-shadow подробное объяснение и хитрости, который вводит некоторыеbox-shadowПрименение.

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

Название этой статьи — трюки и подробности CSS-теней. Тени CSS, но не обязательноbox-shadowа такжеfilter:drop-shadow, Зачем? Потому что тени можно моделировать и с помощью других свойств, а теней бывает много. Позвольте мне рассказать вам историю ниже ~

односторонняя проекция

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

Хорошо, а что, если вы хотите создать одностороннюю проекцию?

Давайте посмотрим на определение использования box-shadow:

{
    box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
}

кbox-shadow: 1px 2px 3px 4px #333Например, значения четырех значений: значение смещения в направлении x, значение смещения в направлении y, радиус размытия и радиус расширения.

Вот небольшая хитрость,Радиус расширения может быть отрицательным.

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

CodePen Demo — односторонняя проекция css

Проекционный фон / фоновая анимация

Продолжая с вышесказанным.

Это понятно,0 = -0, так когдаbox-shadowКогда радиус размытия и радиус расширения равны 0, мы также можем получить тень того же размера, что и элемент, но она закрыта самим элементом, и мы пытаемся сместить ее.

Код CSS выглядит следующим образом:

div {
    width: 80px;
    height: 80px;
    border: 1px solid #333;
    box-sizing: border-box;
    box-shadow: 80px 80px 0 0 #000;
}

Получил следующий результат:

какая функция? Кажется, это не имеет смысла.

Ну, это действительно не работает. Однако мы заметили, чтоbox-shadowМожно настроить несколько слоев, то есть несколько слоев теней, и выполнить анимацию перехода (твин-анимацию). ноbackground-image: linear-gradient(), то есть градиентный фон не может быть промежуточной анимацией.

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

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

.shadow {
    position: relative;
    width: 250px;
    height: 250px;
}

.shadow::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    top: -50px;
    left: -50px;
    box-shadow: 
        50px 50px #000, 150px 50px #000, 250px 50px #000,
        50px 100px #000, 150px 100px #000, 250px 100px #000,
        50px 150px #000, 150px 150px #000, 250px 150px #000,
        50px 200px #000, 150px 200px #000, 250px 200px #000,
        50px 250px #000, 150px 250px #000, 250px 250px #000;
}

Чтобы реализовать это с помощью градиентов, просто сделайте следующее:

.gradient {
    width: 250px;
    height: 250px;
    background-image: linear-gradient(90deg, #000 0%, #000 50%, #fff 50%, #fff 100%);
    background-size:  100px 100px;
}

Почему выбирают более сложныеbox-shadowШерстяная ткань? Потому что он может делать анимацию движения, как это, чего нельзя сделать с градиентами:

CodePen Demo -- box-shadow реализует фоновую анимацию

Конечно, это просто демо-версия для примера, там много интересных эффектов, нужно немного воображения, и еще один:

CodePen Demo -- CSS Checker Illusion( By David Khourshid )

Что ж, это интересно, но реальная польза может быть невелика.

Стереографическая проекция

Хорошо, давайте двигаться дальше. Следующая тема этоСтереографическая проекция.

Это заявление очень странно, тени, и это для того, чтобы исходные элементы выглядели более трехмерными, трехмерными проекциями, что это так называемый, как трехмерный метод?

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

Хорошо, давайте посмотрим на такой элемент, мы хотим сделать его более трехмерным, настроив положение тени:

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

ОК, и, наконец, примените некоторые эффекты размытия к элементу, сгенерированному псевдоэлементом (можно использовать фильтр или тень блока), вы можете добиться трехмерного эффекта, когда углы выглядят разорванными:

Код очень простой, псевдо-код CSS показан следующим образом:

div {
    position: relative;
    width: 600px;
    height: 100px;
    background: hsl(48, 100%, 50%);
    border-radius: 20px;
}

div::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    bottom: 0;
    border-radius: 10px;
    background: hsl(48, 100%, 20%);
    transform: translate(0, -15%) rotate(-4deg);
    transform-origin: center center;
    box-shadow: 0 0 20px 15px hsl(48, 100%, 20%);
}

Итак, подведем итог:

• Ключевой момент стереопроекции — помочь псевдоэлементам создать элемент с размером, аналогичным родительскому элементу, затем повернуть и расположить его в соответствующем положении, а затем назначить ему теневые операции.
• Использование цвета также очень важно. Цвет тени обычно темнее самого цвета. Здесь hsl используется для обозначения того, что цветом легче манипулировать, а l управляет яркостью цвета.

Есть много других сценариев:

Демонстрация CodePen — Стереопроекция

Стереоскопическая проекция текста / Длинная тень текста

Описанный выше трехмерный эффект совершенно неприменим к тексту, поэтому необходимо найти другой способ борьбы с трехмерным эффектом тени текста.

Обычно мы используем text-shadow для создания текстовых теней следующим образом:

<div> Txt Shadow</div>
-----
div {
    text-shadow: 6px 6px 3px hsla(14, 100%, 30%, 1);
}

Ах, очень хорошо, он не трехмерный. Для создания трехмерной текстовой тени наиболее распространенным методом является использование многослойного наложения тени текста.

Советы: иbox-shadowТакой же,text-shadowМожно складывать несколько слоев! Но для одного элементаdrop-shadowЭто может быть только один слой.

Хорошо, текст выше, давайте попробуем наложить 50-слойную тень текста. Ну, 50 слоев почерка, на самом деле очень быстро~

Что ж, рукописный ввод действительно медленный и подвержен ошибкам, поэтому здесь нам нужно использовать помощь SASS/LESS, чтобы написать 50-слойную тень.functionНу, мы смещаем каждый 1px вправо и вниз, чтобы создать слой text-shadow:

@function makeLongShadow($color) {
    $val: 0px 0px $color;

    @for $i from 1 through 50 {
        $val: #{$val}, #{$i}px #{$i}px #{$color};
    }

    @return $val;
}

div {
    text-shadow: makeLongShadow(hsl(14, 100%, 30%));
}

Код SCSS выше. После компиляции генерируется следующие CSS:

div {
      text-shadow: 0px 0px #992400, 1px 1px #992400, 2px 2px #992400, 3px 3px #992400, 4px 4px #992400, 5px 5px #992400, 6px 6px #992400, 7px 7px #992400, 8px 8px #992400, 9px 9px #992400, 10px 10px #992400, 11px 11px #992400, 12px 12px #992400, 13px 13px #992400, 14px 14px #992400, 15px 15px #992400, 16px 16px #992400, 17px 17px #992400, 18px 18px #992400, 19px 19px #992400, 20px 20px #992400, 21px 21px #992400, 22px 22px #992400, 23px 23px #992400, 24px 24px #992400, 25px 25px #992400, 26px 26px #992400, 27px 27px #992400, 28px 28px #992400, 29px 29px #992400, 30px 30px #992400, 31px 31px #992400, 32px 32px #992400, 33px 33px #992400, 34px 34px #992400, 35px 35px #992400, 36px 36px #992400, 37px 37px #992400, 38px 38px #992400, 39px 39px #992400, 40px 40px #992400, 41px 41px #992400, 42px 42px #992400, 43px 43px #992400, 44px 44px #992400, 45px 45px #992400, 46px 46px #992400, 47px 47px #992400, 48px 48px #992400, 49px 49px #992400, 50px 50px #992400;
}

Взгляните на эффект:

Ну, красиво, солидно. Однако это некрасиво, и это невыразимо странно.

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

• fade-outИзмените прозрачность цвета, чтобы сделать его более прозрачным.
• desaturateИзмените значение насыщенности цвета, чтобы сделать его менее насыщенным.

Для функции цвета SASS вы можете посмотреть здесь:Основа Sass — цвет функции

Давайте используем две вышеупомянутые цветовые функции SASS, чтобы изменить наш код CSS, в основном для изменения вышеуказанного.makeLongShadowфункция функция:

@function makelongrightshadow($color) {
    $val: 0px 0px $color;

    @for $i from 1 through 50 {
        $color: fade-out(desaturate($color, 1%), .02);
        $val: #{$val}, #{$i}px #{$i}px #{$color};
    }

    @return $val;
}

Хорошо, давайте посмотрим на окончательный результат:

Что ж, все готово, на этот раз все гораздо приятнее для глаз~

Демонстрация CodePen — трехмерная тень текста

Конечно, есть много способов использовать CSS для создания трехмерных текстовых теней.Вот еще один пример, используяНесколько линейных градиентов с прозрачным наложением основного цветаРеализованная текстовая трехмерная тень, заинтересованные студенты могут перейти к конкретной реализации:

Линейный градиент с тенью для получения полосатого трехмерного теневого полосатого слова

длинная проекция

Трехмерная тень текста реализуется упомянутым выше многослойным наложением теней. Его также можно использовать в таких контейнерах, как div. Конечно, здесь есть интересный метод. Предположим, у нас есть прямоугольный элемент и мы хотим добавить к нему длинную проекцию, например:

Чтобы создать такую ​​длинную проекцию, можно использовать только что упомянутые наложенные многослойные тени, а затем использовать два псевдоэлемента элемента, Фактически, приведенная выше картина выглядит так:

Ключевым моментом является то, что мы передаем два псевдоэлементаtransform: skew()Преобразование и изменение цвета фона со сплошного на прозрачный цвет обеспечивают эффект длинной проекции:

Демонстрация CodePen — линейный градиент имитирует длинные тени

цветная проекция

Вообще говоря, способ, которым мы генерируем тени, в основномbox-shadow,filter: drop-shadow(),text-shadow. Однако тени, которые они генерируют, обычно бывают только монохромными или монохромными.

Вы так говорите, можете ли вы создать градиентную тень?

Ну конечно нет.

Это действительно не хорошо, но с умным использованиемfilter: blurФильтры размытия, мы можем делать вид, что генерируем градиенты или насыщенные тени.

Предположим, у нас есть следующее изображение аватара:

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

.avator {
    position: relative;
    background: url($img) no-repeat center center;
    background-size: 100% 100%;
    
    &::after {
        content: "";
        position: absolute;
        top: 10%;
        width: 100%;
        height: 100%;
        background: inherit;
        background-size: 100% 100%;
        filter: blur(10px) brightness(80%) opacity(.8);
        z-index: -1;
    }
}

Взгляните на эффект:

Простой принцип заключается в том, чтобы использовать псевдоэлементы для создания нового изображения того же размера, что и исходное изображение, и наложить его под исходное изображение, а затем использовать фильтр для его размытия.filter: blur()Взаимодействуйте с другими фильтрами яркости/контрастности, прозрачности и другими фильтрами, чтобы создать иллюзорную тень, замаскированную под эффект тени исходного изображения.

Ну самое главное этоfilter: blur(10px) brightness(80%) opacity(.8);.

CodePen Demo -- filter create shadow

Световые эффекты с помощью box-shadow

Ну, выше, в основном, некоторые методы для получения различных теней, а следующая статья об эффектах. Давайте посмотрим на использованиеbox-shadowРеализованы некоторые световые эффекты.

box-shadow реализует неоновый неоновый текстовый эффект

Этот эффект еще называют Neon, на Codepen много подобных эффектов, по сути масштабных.box-shadowНаложение эффекта перехода и белого текста:

CodePen Demo — box-shadow реализует неоновый неоновый текстовый эффект

Используйте box-shadow для создания теневого светового шоу

Подобно вышеупомянутому эффекту, это, по сути, эффект перехода нескольких теней, может быть, небольшой 3D-эффект?

Разумное словосочетание, лучший эффект:

Codepen Demo - используйте коробку-тень для реализации Shadow Light Show

Используйте drop-shadow | box-shadow для реализации логотипа Douyin с одной вкладкой.

Что ж, поскольку заголовок называется «Трюки CSS с тенями и детали, которых вы не знаете», эта статья также должна быть немного хитрой.

Давайте сначала посмотрим на это.Один тег реализует имитацию Douyin LOGO.Конечно, поскольку он ограничен одним элементом, в деталях все еще есть много недостатков.

Я думал, что причиной подражания было то, что я случайно увидел этот ЛОГОТИП, когда однажды был на Douyin. Я написал много CSS, и у меня был условный рефлекс, когда я что-то видел. Мне было интересно, можно ли это реализовать с помощью CSS.

Давайте сначала посмотрим на логотип Douyin:

На самом деле это очень просто: основной корпус состоит из 3-х фигур, похожих на букву J, но разных цветов. И выбери один один, и его можно разделить натри четверти круга,|так же как㇏сочинение.

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

<div></div>
---
div {
    position: relative;
    width: 37px;
    height: 218px;
    background: #fff;

    &::before {
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
        border: 37px solid #fff;
        border-top: 37px solid transparent;
        border-radius: 50%;
        top: 123px;
        left: -137px;
        transform: rotate(45deg);
    }
    
        &::after {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        border: 30px solid #fff;
        border-right: 30px solid transparent;
        border-top: 30px solid transparent;
        border-left: 30px solid transparent;
        top: -100px;
        right: -172px;
        border-radius: 100%;
        transform: rotate(45deg);
    }
}

Приведенный выше код сгенерирует тело всей формы:

Далее поворотfilter: drop-shadow()Defold, он может обеспечить некоторые эффекты для рендеринга элемента до того, как элемент будет рендериться, и наиболее часто используется для рендеринга общей тени. Обычно мы используем его для реализации маленького треугольника диалога и эффекта тени всего диалога, вот так слеваdrop-shadowЭффект справа заключается в использовании обычногоbox-shadowЭффект.

В этой статье предполагается, что читатель уже разобрался с основными принципами использования drop-shadow, и эффект изображения выше исходит отсюда:CodePen Demo -- Drop-shadow vs box-shadow (2) By Kseso

Хорошо, вернемся к нашему основному тексту, ниже мы используемfilter: drop-shadow()Чтобы создать синюю тень слева от первого слоя, добавьте ее в блок body:

div {
    position: relative;
    width: 37px;
    height: 218px;
    background: #fff;
    filter:drop-shadow(-10px -10px 0 #24f6f0);

   &::before,
   &::after {
    ...
    }
}

Получите следующий эффект:

Что ж, тогда нам просто нужно добавить слой красного цвета.filter: drop-shadow()Вы закончили справа!

так далее! Где не так, я указал выше,а такжеbox-shadowТакой же,text-shadowМожно складывать несколько слоев! Но для одного элементаdrop-shadowЭто может быть только один слой.

То есть больше нельзя использовать на divfilter: drop-shadow()Создайте красную проекцию на другой стороне, но, к счастью, у нас все еще есть два псевдоэлементаfilter: drop-shadow()так же какbox-shadowЕще не использовал его, после нескольких попыток:

div {
    position: relative;
    width: 37px;
    height: 218px;
    background: #fff;
    filter:drop-shadow(-10px -10px 0 #24f6f0) contrast(150%) brightness(110%);
    box-shadow: 11.6px 10px 0 0 #fe2d52;
    
    &::before {
        ....
        filter: drop-shadow(16px 0px 0 #fe2d52);
    }
    
    &::after {
        ....
        filter:drop-shadow(14px 0 0 #fe2d52);
    }
}

Мы повторно используем divbox-shadowи два псевдоэлементаfilter: drop-shadow(), при ограничениях одной метки окончательный результат выглядит следующим образом:

Демонстрация CodePen — ЛОГОТИП Douyin с одним тегом

В заключение:

• Общая структура в основном реализована с помощью двух псевдоэлементов, а слой общей тени создается с помощью drop-shadow.
• drop-shadow может быть только одним слоем тени, поэтому нужно попробовать еще один слой тени.
• контрастность (150%), яркость (110%) может повысить контрастность и яркость изображения, ближе к эффекту логотипа вибрато

Обновлено 9 ноября 2018 г.

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

Сначала я подумал, что это сложно. Я попробовал этот эффект и использовал смешанный режим CSS.mix-blend-modeЭто также достижимо.Метод реализации приведен ниже.Заинтересованные студенты могут посмотреть:

Демонстрация CodePen — ЛОГОТИП Douyin с использованием режима смешивания

---

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

У меня есть репозиторий на Git,CSS-Inspiration, в виде категорий, показывающих различные методы использования CSS для решения различных свойств CSS или разных тем. Более интересные приемы CSS можно найти здесь, и они ежедневно обновляются.

наконец

Спасибо за ваше терпение, чтобы прочитать. Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Ну вот и конец этой статьи, надеюсь она вам поможет :)

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