Блог

Несколько полезных 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.

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

  • Анимация для текста на CSS

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

  • Анимационные указатели прокрутки страницы

    Такие указатели чаще всего применяют на первом экране Главной страницы сайта, когда на ней размещена полноэкранная картинка, видео или слайдер. Чтобы показать Пользователю, что основной контент расположен ниже, в нижней части экрана размещают стрелку, направленную вниз. Чтобы привлечь к ней дополнительное внимание, её делаю анимационный...

  • Бесплатный ФРОНТЭНД

    Представляю вашему вниманию бесплатные неоновые эффекты для текста на CSS...

  • 4 свойства сетки CSS для большинства ваших потребностей в макетировании

    CSS Grid предоставляет нам мощную систему верстки для веб-сайтов. То, что мы собираемся сделать сейчас, - это обратный подход, чтобы показать вам наименьший возможный набор свойств сетки, которые вам нужно знать, чтобы удовлетворить большинство ваших потребностей в макете.

  • Разные "вкусняшки" на CSS и HTML5 для начинающих вебдизайнеров

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

Наши услуги по созданию сайтов

Веб дизайн

Разработка дизайна и создание интернет-сайта.

Поддержка сайта

Поддержка работоспособности. Написание текстов и статей. Наполнение товарами.

Готовый дизайн

Готовые шаблоны интернет-магазинов и корпоративных сайтов на HostCMS.

Контекстная реклама

Настройка и ведение рекламной кампании в Директ