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

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

В этом примере используются свойства animation
and @keyframes
для достижения эффекта пишущей машинки.
Специально для этой демонстрации используется steps()
свойство, чтобы сегментировать текстовую анимацию. Во-первых, указывем номер steps()
, который в нашем случае является длиной символа для текста, который хотим анимировать.
И, во-вторых, используем @keyframes
, чтобы объявить, когда анимация начнется. Например, если вы написали другое слово после “Эффекта ввода текста”, анимация не будет работать, если не изменить номер steps()
в фрагменте CSS.
HTML
<div class="typing"> <div class="typing-effect"> Typing effect for text </div> </div>
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
<div class="transparent-shadow"> <div class="margin-right"> <div class="margin-bottom align-center"> box-shadow </div> <img class="box-shadow" src="/img/logo.png" alt="box-shadow example (transparent)"> </div> <div> <div class="margin-bottom align-center"> drop-shadow </div> <img class="drop-shadow" src="/img/logo.png" alt="drop-shadow example (transparent)"> </div> </div>
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 { filter: drop-shadow(2px 4px 8px #3723a1); }
3. Простая подсказка с использованием attr()
Для создания всплывающих подсказок требуется подключение различных плагинов, которые увеличивают объём загружаемых данных. Это можно избежать, воспользовавшись
attr()
.
Работает это довольно просто:
- Используем
tooltip class
, чтобы указать, какой элемент будет всплывающей подсказкой. Вы можете стилизовать это так, как вам нравится, в демонстрации использовалсяdotted border-bottom
. - Далее создаем
:before
псевдо-элемент, который будет содержатьattr()
функцию контента и ее спецификацию. В этом случае мы называем этоtooltip-data
. - И, наконец, мы создаем
:hover
псевдокласс, который будет устанавливатьopacity to 1
всякий раз, когда кто-то наводит на текст с подсказкой.
Кроме того, нужно включить пользовательский стиль. В зависимости от данных во всплывающей подсказке вам может потребоваться настроить ширину, а также поля. И как только вы все это настроите, вы можете повторно использовать класс tooltip-data attr()
в любой части вашего дизайна.
HTML
<h1> HTML/CSS tooltip </h1> <p> Hover <span class="tooltip" tooltip-data="Tooltip Content">Here</span> to see the tooltip. </p> <p> You can also hover <span class="tooltip" tooltip-data="This is another Tooltip Content">here</span> to see another example. </p>
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 { opacity: 1; visibility: visible; }
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)) { font-weight: 900; }
5. Выпадающий список аккордеона с использованием ключевых кадров
Проблема с библиотеками (JavaScript, jQuery, Bootstrap и т.д.) заключается в том, что приходится загружать всю библиотеку даже для небольших функций. К счастью, многие CSS-трюки, которые рассмотрели выше, обходят это требование. Как и пример с аккордеоном.
Если вы внимательно посмотрите на текущие тенденции веб-дизайна, вам не потребуется много времени, чтобы найти аккордеоны на целевых страницах. Это такой простой способ сконденсировать контент, который в противном случае занимал бы пространство дизайна. Часто задаваемые вопросы, особенности продукта, советы по использованию – внутри аккордеона можно поместить множество типов информации. И этот фрагмент демонстрирует его реализацию в чистом CSS.
HTML
<main> <details open> <summary>Accordion Tab #1</summary> <div class="tab-content"> <p>your text goes here</p> </div> </details> <details> <summary>Accordion Tab #2</summary> <div class="tab-content"> <p>your text goes here</p> </div> </details> <details> <summary>Accordion Tab #3</summary> <div class="tab-content"> <p>your text goes here</p> </div> </details> </main>
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% {opacity: 0; margin-top: -10px} 100% {opacity: 1; margin-top: 0px} } details > summary::after { position: absolute; content: "+"; right: 20px; } details[open] > summary::after { position: absolute; content: "-"; right: 20px; } details > summary::-webkit-details-marker { display: none; }
6.Боковая панель с эффектом наведения
HTML
<div class="css-dynamic-sidebar"> <nav> <a class="" href="#">Menu #1</a> <a class="" href="#">Menu #2</a> <a class="" href="#">Menu #3</a> </nav> <div class="site-content"> <p>Hover over the sidebar</p> <p>Also work with Tab selector (for accessibility)</p> </div> </div>
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 { font-size: 2em; font-family: monospace; text-align: center; }
Выбор между CSS и JavaScript
CSS-советы и трюки, приведённые в статье, подчеркивают потенциал отсутствия необходимости JavaScript для определенных функций дизайна. И, самое приятное, что мы можем реализовывать эти трюки практически в любом дизайне.
Конечно не стоит ожидать, что такие сниппеты устранят необходимость в фреймворках или библиотеках. Но приятно, что CSS движется в направлении, где сложные дизайнерские эффекты могут быть достигнуты без написания функций JavaScript.