🌟 CSS Illusion | Темная магия о световых и теневых эффектах

предисловие

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

Так называемые понимают только свет, чтобы управлять тенью.Хорошие дизайнеры часто являются мастерами света, которые могут передать читателям текстуру, пространство и многослойность объектов с помощью сложного света и тени.^texture. Эскизы дизайна, которые они рисуют, все красивые, что тяжело для большинства соотечественников-фронтендеров! В браузере мы можем использовать только несколько свойств CSS, и в то же время попытаться восстановить черновик дизайна. Ведь АЕ, C4D, которые используют конструкторы, выглядят как пушки по сравнению с нашими пистолетами CSS!

Общие световые и теневые эффекты

К счастью, мы можем временно использовать производительность в качестве оправдания и продолжать быть прямолинейными и прямолинейными (потеть). Точно так же, как когда дело доходит до эффектов света и тени, первая реакция каждого должна состоять в том, чтобы использовать набор из трех частей box-shadow, text-shadw и drop-shadow для непосредственного начала рисования. Для большинства сцен эти свойства подходят и могут использоваться для достижения различных эффектов, таких как односторонняя проекция, полая проекция и проекционная анимация. Если это связано с цветными тенями, длинными тенями или отражениями, вам нужно объединить другие свойства CSS, чтобы помочь.

цветная проекция, вы можете позволить псевдоэлементу наследовать фон родительского элемента и добавить фильтр размытия. Эту идею также можно использовать для создания эффекта матового стекла.^{frosted-glass}.

.avator {
  position: relative;
  background: 'xxx';
}
.avator::after {
  content: "";
  position: absolute;
  top: 10%;
  width: 100%;
  height: 100%;
  /* 伪元素继承父元素背景 */
  background: inherit;
  /* 再加一些稀奇古怪的滤镜，调一调参数 */
  filter: blur(10px) brightness(80%) opacity(.8);
  z-index: -1;
}

Чтобы сделать отражение, вы можете использовать свойство -webkit-box-reflect.^box-reflect. Совместимость неплохая, кроме Firefox и IE можно использовать и другие браузеры. Другой способ — использовать псевдоэлемент для копирования родительского элемента и преобразования его для инвертирования положения.

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

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

body:before {
  content: "";
  position: absolute;
  top: 0;
  width: 200vw;
  height: 35px;
  background-color: rgba(255, 255, 255, 0.4);
  transform: rotate(45deg);
  animation: scan-light 2s ease-in infinite;
}
@keyframes scan-light {
  from {
    right: -100vw;
  }
  to {
    right: 40vw;
  }
}

Расширенные эффекты света и тени

текстура

Несколько упомянутых выше способов рисования света и тени в основном используются для передачи формы и положения предметов. Например, отражения и градиентные блики можно использовать для передачи текстуры объекта, показывая поверхность, которая достаточно гладкая, чтобы быть зеркальной. Конечно, это идеальная ситуация. Реальные объекты редко имеют гладкую поверхность, и даже гладкая поверхность, видимая невооруженным глазом, микроскопически неровная.

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

Какое изображение наносится на поверхность предмета, этот метод называется мапингом материала. Давайте возьмем в качестве примера простую карту материала, сначала используем PS, чтобы получить сплошной цвет фона, а затем случайным образом закрасим некоторые более яркие блики и немного более темные пиксели.^{linegradient-material}, вы можете получить результаты, подобные следующему рисунку.

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

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

Неудобство использования картинок в том, что нет возможности подгонять детали во время предпросмотра, а PS может выходить за рамки стека фронтенд-технологий. К счастью, у нас все еще есть артефакт SVG.^why-svg. Ниже приведен набор «стандартных» кодов генерации материалов, которые можно использовать для создания самых разнообразных материалов.

<svg width="0" height="0">
  <filter id="surface">
    <feTurbulence type="fractalNoise" baseFrequency='0.03 0.06' numOctaves="30" />
    <feDiffuseLighting lighting-color='#ffe8d5' surfaceScale='2'>
      <feDistantLight elevation='10' />
    </feDiffuseLighting>
  </filter>
</svg>
<style>
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  filter: url(#surface);
}
</style>

в,feDiffuseLightingэто шумовой фильтр, который создает случайные изображения текстуры.feDiffuseLightingявляется фильтром источника света. feDistantLight Указывает направленный свет в качестве источника света.

источник света? Неужели так сложно получить материал?

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

Имея общее представление о том, что означает приведенный выше SVG, мы с радостью начинаем настраивать параметры.

Сначала попробуйте уменьшить расстояние от источника света до поверхности (уменьшив высоту), чтобы увеличить контраст между бликами и тенями. Получил следующее, похожее натекстура почвы.

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

Увеличьте baseFrequency, отрегулируйте базовую высоту поверхности SurfaceScale, чтобы получить гладкую текстуру, а затем отрегулируйте высоту освещения, чтобы уменьшить контраст светов и теней, и получитебелая известь текстура стены.

<svg width="0" height="0">
  <filter id="surface">
    <feTurbulence type="fractalNoise" baseFrequency='.95' numOctaves="80" result='noise' />
    <feDiffuseLighting in='noise' lighting-color='#fff' surfaceScale='1.4' result="grind">
      <feDistantLight azimuth='500' elevation='50' />
    </feDiffuseLighting>
    <feGaussianBlur in="grind" stdDeviation=".6"/>
  </filter>
</svg>

Вы должны обнаружить, что код для белой лайм-стены добавляет гауссовский размытый фильтр (Fegaussianblur) по сравнению с «стандартным шаблоном».В принципе, фильтры можно накладывать бесконечно, что позволяет получить множество забавных эффектов.. Например, есть большой парень, который использует SVG для рисования облаков. Да, вы не ослышались. Следующее нарисовано в SVGтекстура облака^cloud.

Эффект Френеля

После разговора о том, как красить шероховатые поверхности, давайте рассмотрим принципы покраски гладких поверхностей. Говоря о материалах с относительно гладкими поверхностями, таких как вода и металл, нельзя не упомянуть эффект Френеля.

Представьте эффект Френеля одним предложением: если вы встанете у озера и посмотрите вниз на воду под ногами, вы обнаружите, что вода прозрачна, отражение не особенно сильное, и вы можете видеть дно воды; если вы посмотрите на озеро вдали, вы увидите горы и отражение неба.

Каждый материал имеет свое собственное значение Френеля, которое основано на его показателе преломления, указывающем, сколько света поглощается объектом и сколько света отражается от поверхности объекта.^fresnel. Используйте следующееchaosgroup.comслучай для иллюстрации.

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

Поняв эффект Френеля, мы можем рисовать некоторые объекты с высоким эффектом Френеля, основываясь на опыте. Изображение ниже было нарисовано с помощью CSS Оскаром Салазаром.капли воды. Он использовал box-shadow, чтобы добавить много прозрачных белых теней к нижнему краю капли, чтобы имитировать эффект Френеля.

Если вы сравните капли воды в реальности, то обнаружите, что картины Оскара Салазара не «настоящие». Однако из-за увеличения капель воды и эффектов света и тени это очень привлекает внимание и дает людям «похожее» ощущение, поэтому я не думаю, что есть проблема с картиной.

Изображение ниже было нарисовано Envato Tuts+.эффект матового стекла. Слева исходная версия, справа модифицированная версия с добавленным эффектом Френеля. Переработанная версия выглядит как стеклянная версия с ровными краями, а не цельный кусок пластика.^{draw-not-sure}.

Сцена боя

Ограничено технологией, есть много видов световых и теневых эффектов, которые не упомянуты в статье.Если будет шанс в будущем, давайте сделаем продолжение (гу-гу запланировано). Здесь мы заканчиваем эффект обложки книги, нарисованный с помощью CSS, а также, кстати, подключаем техники, упомянутые выше. В материале представлены только две фотографии обложки книги,Нажмите здесь, чтобы скачать первый,Нажмите здесь для второго^refferer, цель состоит в том, чтобы достичь следующих эффектов^compressed.

построить рамку

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

<div class="display-container">
  <!-- 纸背景材质层 -->
  <div class="paper" />
  <!-- 书的封面 -->
  <div class="book">
    <!-- 封面的纸的材质层 -->
    <div class="paper" />
    <!-- 用一张图片自动撑开封面高度 -->
    <img class="corner" src="xxx" />
  </div>
</div>

работа с текстурами

Затем мы используем SVG для вызова чего-то вродетекстура бумаги, свет и установить в качестве фона.

<svg width="0" height="0">
  <filter id="surface">
    <feTurbulence type="fractalNoise" baseFrequency='.95 .95' numOctaves="80" result='noise' />
    <feDiffuseLighting in='noise' lighting-color='#004F85' surfaceScale='.8' result="grind">
      <feDistantLight azimuth='500' elevation='50' />
    </feDiffuseLighting>
    <feGaussianBlur in="grind" stdDeviation=".5"/>
  </filter>
</svg>
<div class="paper"></div>
<style>
  body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .paper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .paper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: url(#surface);
  }
  .paper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 100% 0%, rgba(255,255,255,0.25), rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.15) 70%, rgba(0,0,0,.1));
  }
</style>

детали обложки

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

Есть небольшие детали, на которые стоит обратить внимание.

• Обработка складок на обложке
• Имитация теней окклюзии
• Избегайте слишком острых краев

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

.book-cover .book::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-repeat: no-repeat;
  background-image:
    /* 1. 这条渐变是比较明显的那道折痕 */
    linear-gradient(to right, rgba(0,0,0,0.1) 0.3%, rgba(255,255,255,0.09) 1.1%, transparent 1.3%),
    /* 2. 这条一像素的渐变是封面最左侧的折痕（没有暗面） */
    linear-gradient(to right, rgba(0,0,0,0.2) 0, rgba(255,255,255,0.08) 0%, transparent 0.5%);
  background-size: 50% 100%, 50% 100%;
  background-position: 0% top, 9% top;
}

Затем поговорим о окклюзионных тенях. Концепция закрытых теней очень проста: два объекта расположены ближе друг к другу и блокируют свет, чем ближе они расположены, тем темнее тени.^{occlusion-shadow}. В соответствии с CSS тень, генерируемая drop-shadow, очень «плотная», но не может быть наложена; тень, генерируемая box-shadow, может регулировать диапазон тени, но она будет распространяться. Мы можем имитировать более реалистичный эффект тени, накладывая тени и тени.

.book-cover .book {
  position: relative;
  /* 由于阴影对视觉中心有影响，所以把书整体向右上方挪一些 */
  margin-top: -1vh;
  margin-right: -1vh;
  width: 32%;
  max-width: 600px;
  font-size: 0;
  box-shadow: 
    -55px 40px 30px 0 rgb(0 0 0 / 10%), 
    -27px 25px 35px -5px rgb(0 0 0 / 20%),
    -10px 10px 15px 5px rgb(0 0 0 / 10%), 
    -12px 12px 10px 0 rgb(0 0 0 / 20%),
    -7px 7px 8px 0 rgb(0 0 0 / 10%),
    -5px 5px 5px 0 rgb(0 0 0 / 20%),
    -2px 2px 3px 0 rgb(0 0 0 / 30%);
  filter: drop-shadow(-20px 20px 15px rgba(0, 0, 0, .65));
}

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

Затем речь идет о том, как предотвратить слишком острые края.До обработки край книги выглядит так, как показано на изображении ниже.Поскольку изображение сжато, деталей не видно.Вот прямое введение в решение для предотвращения резкости краев. Сложите два изображения вместе, нижнее изображение размыто на 1 пиксель, а радиус границы верхнего изображения установлен на 2 пикселя, и все готово.

Дисплей готовой продукции

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

Что, ты хочешь сделать книгу, которая может перелистывать страницы?

Отправиться в Канканturn.jsреализация^turnjs. Эффект показан ниже, в котором также используется эффект Френеля.

Подробнее

Надеюсь, эта статья поможет вам, я бионический лев, увидимся в следующем выпуске~

Хотите увидеть, как создавалась эта статья? ты можешь получить от меняблог-проектНайдите ответ в; Добро пожаловать в Star & Follow; пожалуйста, заходите ко мне большеонлайн-блог, верстка очень хороша~