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

MasterNik / 19 марта 2022 г. / 2136

Если вы заметили, большинство наших статей затрагивает тему оптимизации загрузки сайтов - либо явно пишем про оптимизацию, либо через приведение примеров каких-то эффеков, которые заменят аналогичные, но использующие различные библиотеки и 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.