Несколько полезных CSS-трюков для Front-end разработчиков

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

1. Эффект набора текста Typing

В этом примере используются свойства animation and @keyframes для достижения эффекта пишущей машинки. Специально для этой демонстрации используется steps() свойство, чтобы сегментировать текстовую анимацию. Во-первых, указывем номер steps() , который в нашем случае является длиной символа для текста, который хотим анимировать. И, во-вторых, используем @keyframes , чтобы объявить, когда анимация начнется. Например, если вы написали другое слово после “Эффекта ввода текста”, анимация не будет работать, если не изменить номер steps() в фрагменте CSS.

HTML

CSS

.typing < height: 80vh; display: flex; align-items: center; justify-content: center; >.typing-effect < width: 22ch; animation: typing 2s steps(22), effect .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em; >@keyframes typing < from < width: 0 >> @keyframes effect < 50% < border-color: transparent >>

2. Тень для прозрачных изображений

Вы когда-нибудь пытались добавить box-shadow к прозрачному изображению PNG только для того, чтобы оно выглядело так, как будто вы добавили границу? Решение для добавления теневых эффектов для прозрачных изображений заключается в использовании drop-shadow . То, как это работает, заключается в том, что drop-shadow свойство следует за альфа-каналами данного изображения. Таким образом, тень основана на форме внутри изображения, а не отображается за его пределами.

HTML

 
 
 
box-shadow
  
 
 
drop-shadow
  
 

CSS

.transparent-shadow < height: 80vh; display: flex; align-items: center; justify-content: center; >.margin-right < margin-right: 2em; >.margin-bottom < margin-bottom: 1em; >.align-center < text-align: center; >.box-shadow < box-shadow: 2px 4px 8px #3723a1; >.drop-shadow

3. Простая подсказка с использованием attr()

• Используем tooltip class , чтобы указать, какой элемент будет всплывающей подсказкой. Вы можете стилизовать это так, как вам нравится, в демонстрации использовался dotted border-bottom .
• Далее создаем :before псевдо-элемент, который будет содержать attr() функцию контента и ее спецификацию. В этом случае мы называем это tooltip-data .
• И, наконец, мы создаем :hover псевдокласс, который будет устанавливать opacity to 1 всякий раз, когда кто-то наводит на текст с подсказкой.

Кроме того, нужно включить пользовательский стиль. В зависимости от данных во всплывающей подсказке вам может потребоваться настроить ширину, а также поля. И как только вы все это настроите, вы можете повторно использовать класс tooltip-data attr() в любой части вашего дизайна.

HTML

 
HTML/CSS tooltip
 
Hover Here to see the tooltip.
 
You can also hover here to see another example.
 

CSS

.tooltip < position: relative; border-bottom: 1px dotted black; >.tooltip:before < content: attr(tooltip-data); position: absolute; width: 250px; background-color: #efba93; color: #fff; text-align: center; padding: 15px; line-height: 1.1; border-radius: 5px; z-index: 1; opacity: 0; transition: opacity .5s; bottom: 125%; left: 50%; margin-left: -60px; font-size: 0.70em; visibility: hidden; >.tooltip:after < content: ""; position: absolute; bottom: 75%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; opacity: 0; transition: opacity .5s; border-color: #000 transparent transparent transparent; visibility: hidden; >.tooltip:hover:before, .tooltip:hover:after

4. Элементы стиля с :is() и :where()

Одним из способов работы современных CSS-фреймворков является использование conditional logic selectors . Другими словами, свойства :is() и :where() можно использовать для стилизации сразу нескольких элементов дизайна. Но, что более важно, можно использовать эти свойства для запроса элементов, которые в противном случае пришлось бы указывать индивидуально. Приведенный ниже фрагмент CSS включает в себя несколько примеров. Также добавлены комментарии, чтобы объяснить, что делает каждый запрос.

CSS

/* этот запрос выберет элемент b в заголовке и изменит его цвет. */ :where(h2,h3,h4) > b < color: yellow; >/* здесь мы запрашиваем элемент абзаца для нижнего колонтитула, вложенного в статью. это позволяет нам выбирать определенные части дизайна и стилизовать их соответствующим образом. */ article :is(footer) > p < color: black; >/* хотите создавать различные стили одновременно? свойство :where можно использовать для выбора определенных элементов в динамическом стиле темы. вы можете дополнительно вложить элементы, например, с помощью specify (button,a). */ .dark-button-style :where(button) < background-color: red; >/* приведенный выше запрос также работает для выбора нескольких стилей одновременно */ :is(.dark-button-style, .red-button-style) :where(button) < color: red; >/* здесь мы выбираем элемент h2, который находится внутри определенного элемента div */ :is(h2):where(.content-title) < text-transform: uppercase; >/* мы можем еще больше улучшить запрос, применив изменения к определенному подмножеству */ .title-area:is(h2:is(.content-title))

5. Выпадающий список аккордеона с использованием ключевых кадров

Проблема с библиотеками (JavaScript, jQuery, Bootstrap и т.д.) заключается в том, что приходится загружать всю библиотеку даже для небольших функций. К счастью, многие CSS-трюки, которые рассмотрели выше, обходят это требование. Как и пример с аккордеоном.

Если вы внимательно посмотрите на текущие тенденции веб-дизайна, вам не потребуется много времени, чтобы найти аккордеоны на целевых страницах. Это такой простой способ сконденсировать контент, который в противном случае занимал бы пространство дизайна. Часто задаваемые вопросы, особенности продукта, советы по использованию – внутри аккордеона можно поместить множество типов информации. И этот фрагмент демонстрирует его реализацию в чистом CSS.

HTML

 
 
Accordion Tab #1
 
your text goes here
 
 
 
Accordion Tab #2
 
your text goes here
 
 
 
Accordion Tab #3
 
your text goes here
 
 
 

CSS

/* .tab-content can be styled as you like */ main < max-width: 400px; margin: 0 auto; >p < text-align: justify; font-family: monospace; font-size: 13px; >summary < font-size: 1rem; font-weight: 600; background-color: #f3f3f3; color: #000; padding: 1rem; margin-bottom: 1rem; outline: none; border-radius: 0.25rem; cursor: pointer; position: relative; >details[open] summary ~ * < animation: sweep .5s ease-in-out; >@keyframes sweep < 0% 100% > details > summary::after < position: absolute; content: "+"; right: 20px; >details[open] > summary::after < position: absolute; content: "-"; right: 20px; >details > summary::-webkit-details-marker

6.Боковая панель с эффектом наведения

HTML

 
  
Hover over the sidebar
 
Also work with Tab selector (for accessibility)
 
 

CSS

.css-dynamic-sidebar < overflow: hidden; position: relative; height: 15em; max-width: 15em; margin: auto; >.site-content < margin: auto; >nav < display: flex; flex-direction: column; position: absolute; right: 100%; padding: 1em; background-color: #f3f3f3; transform: translateX(1em); transition: 0.2s transform; >nav:hover, nav:focus-within < transform: translateX(100%); >a < white-space: pre; color: black; >p

Выбор между CSS и JavaScript

CSS-советы и трюки, приведённые в статье, подчеркивают потенциал отсутствия необходимости JavaScript для определенных функций дизайна. И, самое приятное, что мы можем реализовывать эти трюки практически в любом дизайне.

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

Источник

Трюки CSS и JavaScript, которые вдохнут жизнь в ваш статический сайт

Последние несколько недель я работал над своим сайтом и хотел придать ему некоторый динамизм. Эта статья не о создании веб-страницы. Я покажу готовые сниппеты с объяснениями.

3D-анимация на JS

Первый трюк — замечательный трёхмерный эффект на JS.

Как видите, когда указатель мыши проходит по этой «карточке», элементы внутри нее обретают трёхмерность.

Как это делается

Сначала создаётся HTML div:

 
 
 
Hackerone
 
Started on 6/20 Signal : 5.67 Reputation : 360 Impact : 26.25
 
 
 

Здесь у нас есть основной класс (card) и два других класса внутри card (header and info). Header будет классом, содержащим изображение (в нашем примере — логотип Medium), а info будет содержать текст в карточке. Теперь давайте добавим CSS, чтобы карта выглядела лучше.

Здесь я объявил высоту, ширину, границу, отступ и тень. Обновите страницу, и вы увидите результаты. Последний шаг — добиться 3D-эффекта при наведении курсора мыши на карту. Для этого я воспользовался JS:

// declaring variables const card = document.querySelector(".card"); const title = document.querySelector(".title"); const header = document.querySelector(".header img"); const description = document.querySelector(".info h3"); // Animate In card.addEventListener("mouseenter", (e) => < card.style.transition = "none"; title.style.transform = "translateZ(3px)"; header.style.transform = "translateZ(3px) rotateZ(0deg)"; description.style.transform = "translateZ(3px)"; >); // Animate Out card.addEventListener("mouseleave", (e) => < card.style.transition = "all 0.5s ease"; card.style.transform = `rotateY(0deg) rotateX(0deg)`; title.style.transform = "translateZ(0px)"; header.style.transform = "translateZ(0px) rotateZ(0deg)"; description.style.transform = "translateZ(0px)"; >); 

1. Объявите переменные.
2. Создайте два прослушивателя событий для card.
3. В mouseenter переведите Z на 3 пикселя для title, header и description. Вы также можете решить, вращать эти элементы или нет (rotateZ).
4. По событию mouseleave верните всё в нормальное состояние.

Откройте для себя Vanta.js для анимации фона

Устали от статичных цветов и изображений на фоне веб-страницы? VantaJs разработана, чтобы оживить фон:

Как это делается

Это довольно просто. Добавьте в HTML такой код:

Чтобы переключаться между ними, измените VANTA.GLOBE на VANTA.[Backgroundname]. Конечно, перед этим нужно добавить соответствующий cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.[backgroundname].min.js.

ScrollReveal

Для тех, кто не знал об этой фантастической библиотеке JS, ScrollReveal может отображать элементы при прокрутке веб-страницы:

Как это делается

ScrollReveal().reveal('.htmlclass',< delay: 400 >)

Код отобразит элемент с классом .htmlclass с задержкой 400мс при прокрутке страницы.

Изменение размера и цвета букв

Этот небольшой трюк с CSS действительно впечатляет при правильном использовании:

Как это делается

Создайте несколько новых HTML-элементов span и укажите их класс:

3. Применяя CSS :hover, мы изменяем размер букв и их цвет:

Теперь, когда вы наведёте указатель на буквы, вы увидите, как они меняют размер и цвет. Чтобы добиться еще более динамичного эффекта, я предлагаю создать отдельный класс для каждой буквы с разными размерами и цветами. Кроме того, вы можете применить CSS :hover к каждому типу элемента в HTML. Например, я тоже применил его к своей контактной форме:

Свойство animation

Дополнили материал описанием свойства из статьи Криса Койера.

Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как color, background-color, height, или width. Каждая анимация должна быть определена с помощью @keyframes, которое затем вызывается с помощью свойства animation, например:

.element < animation: pulse 5s infinite; >@keyframes pulse < 0% < background-color: #001F3F; >100% < background-color: #FF4136; >>

Каждое правило @keyframes определяет, что должно происходить в определённые моменты анимации. Например, 0 % — это начало анимации, а 100 % — её конец. Этими ключевыми кадрами можно управлять либо с помощью сокращённого свойства animation, либо с помощью его восьми подсвойств, чтобы обеспечить больший контроль над ключевыми кадрами.

Подсвойства

• animation-name: объявляет имя правила @keyframes, которым нужно управлять.
• animation-duration: продолжительность одного цикла анимации.
• animation-time-function: устанавливает предустановленные кривые ускорения, такие как ease или linear.
• animation-delay: время между загрузкой элемента и началом анимационной последовательности (интересные примеры).
• animation-direction: устанавливает направление анимации после цикла. Его значение по умолчанию сбрасывается в каждом цикле.
• animation-iteration-count: сколько раз должна быть выполнена анимация.
• animation-fill-mode: устанавливает, какие значения применяются до/после анимации.
  Например, вы можете установить последнее состояние анимации так, чтобы оно оставалось на экране, или можете настроить его на переключение назад, когда анимация началась.
• animation-play-state: приостановить/воспроизвести анимацию.

@keyframes stretch < /* declare animation actions here */ >.element < animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; >/* is the same as: */ .element

Вот полный список значений, которые может принимать каждое из этих вложенных свойств:

animation-timing-function	ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))
animation-duration	Xs или Xms
animation-delay	Xs или Xms
animation-iteration-count	X
animation-fill-mode	forwards, backwards, both, none
animation-direction	normal, alternate
animation-play-state	paused, running, running

Несколько шагов

Если анимация имеет одинаковые начальные и конечные свойства, полезно разделять запятыми значения 0 и 100 % внутри @keyframes:

Несколько анимаций

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

Производительность

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

Какие свойства можно анимировать?

На MDN есть список свойств CSS, которые могут быть анимированы. Они имеют тенденцию быть цветами и числами. Пример неанимируемого свойства — background-image.

Поддержка браузерами

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

Префиксы

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

.element < -webkit-animation: KEYFRAME-NAME 5s infinite; -moz-animation: KEYFRAME-NAME 5s infinite; -o-animation: KEYFRAME-NAME 5s infinite; animation: KEYFRAME-NAME 5s infinite; >@-webkit-keyframes KEYFRAME-NAME < 0% < opacity: 0; >100% < opacity: 1; >> @-moz-keyframes KEYFRAME-NAME < 0% < opacity: 0; >100% < opacity: 1; >> @-o-keyframes KEYFRAME-NAME < 0% < opacity: 0; >100% < opacity: 1; >> @keyframes KEYFRAME-NAME < 0% < opacity: 0; >100% < opacity: 1; >>

Такие трюки подойдут для того, чтобы вдохнуть жизнь в ваш сайт-визитку или сайт пет-проекта, над которым вы работаете. Если у вас есть какие-то свои трюки — призываю делиться ими в комментах. И не забывайте о промокоде HABR, который дает дополнительную скидку 10% к той, что указана на баннере.

Источник