В последних двух статьях этой серии из трех частей мы играли с градиентами, чтобы сделать действительно аккуратное украшение изображения, используя только outline имущество. Это может показаться странным, потому что мы обычно используем outline нарисовать простую линию вокруг элемента — вроде как border но он может рисовать только все четыре стороны одновременно и не является частью блочной модели.
Однако мы можем сделать с ним больше, и это то, с чем я хочу поэкспериментировать в этой статье.
Серия Необычные имиджевые украшения
Начнем с нашего первого примера — оверлея, который исчезает при наведении с классной анимацией:
Мы могли бы добиться этого, добавив дополнительный элемент поверх изображения, но это то, что мы бросаем себе вызов. не делать в этой серии. Вместо этого мы можем обратиться к CSS outline свойство и рычаг, что он может иметь отрицательное смещение и может перекрывать свой элемент.
img {
--s: 250px; /* the size of the image */
--b: 8px; /* the border thickness*/
--g: 14px; /* the gap */
--c: #4ECDC4;
width: var(--s);
aspect-ratio: 1;
outline: calc(var(--s) / 2) solid #0009;
outline-offset: calc(var(--s) / -2);
cursor: pointer;
transition: 0.3s;
}
img:hover {
outline: var(--b) solid var(--c);
outline-offset: var(--g);
}Уловка состоит в том, чтобы создать outline толщиной, равной половине размера изображения, затем сместите его на половину размера изображения с отрицательным значением. Добавьте немного полупрозрачности с цветом, и у нас есть наложение!
Остальное то, что происходит на :hover. Мы обновляем outline и переход между обоими контурами создает крутой эффект наведения. Та же техника может быть использована для создания эффекта затухания, когда мы не перемещаем outline но сделать его прозрачным.
Вместо того, чтобы использовать половину размера изображения в этом, я использую очень большой outline значение толщины (100vmax) при применении маски CSS. При этом больше не нужно знать размер изображения — этот трюк работает для всех размеров!
Вы можете столкнуться с проблемами при использовании 100vmax как большое значение в Safari. Если это так, рассмотрите предыдущий трюк, где вы заменяете 100vmax с половиной размера изображения.
Мы можем пойти еще дальше! Например, вместо того, чтобы просто обрезать лишнее outline, мы можем создавать формы и применять причудливую анимацию раскрытия.
Круто, да? outline это то, что создает желтое наложение. clip-path обрезает лишнее outline чтобы получить форму звезды. Затем при наведении мы делаем цвет прозрачным.
О, ты хочешь сердечки вместо этого? Мы точно можем это сделать!
Представьте себе все возможные комбинации, которые мы можем создать. Все, что нам нужно сделать, это нарисовать фигуру с маской CSS и/или clip-path и объедините его с outline обманывать. Одно решение, безграничные возможности!
И, да, мы определенно можем анимировать и это. Не будем забывать, что clip-path можно анимировать и mask опирается на градиенты — то, что мы очень подробно рассмотрели в первых двух статьях этой серии.
Я знаю, анимация немного глючит. Это скорее демонстрация для иллюстрации идеи, а не «конечный продукт», который будет использоваться на производственной площадке. Мы бы хотели оптимизировать вещи для более естественного перехода.
Вот демонстрация, которая использует mask вместо. Это тот, которым я дразнил тебя в конце последняя статья:
Знаете ли вы, что outline свойство было способно на столько удивительности? Добавьте его в свой набор инструментов для причудливых украшений изображений!
Соедините все вещи!
Теперь, когда мы изучили множество трюков с использованием градиентов, масок, обрезки и контура, пришло время для грандиозного финала. Давайте завершим эту серию, объединив все, что мы узнали за последние несколько недель, чтобы продемонстрировать не только методы, но и продемонстрировать, насколько гибкими и модульными являются эти подходы.
Если вы впервые видите эти демонстрации, вы можете предположить, что для их реализации используется куча дополнительных оболочек div и псевдоэлементов. Но все происходит прямо на
Подведение итогов
Ну, господи, спасибо, что тусовались со мной в этой серии из трех частей последние несколько недель. Мы изучили множество различных техник, которые превращают простые изображения в нечто привлекательное и интерактивное. Будете ли вы использовать все, что мы рассмотрели? Конечно нет! Но я надеюсь, что это было хорошим упражнением для вас, чтобы изучить расширенные возможности использования функций CSS, таких как градиенты, mask, clip-pathи outline.
И мы сделали все только с одним
