🏛️ 13 библиотек для создания CSS-анимации
|
CSS-анимации обычно более производительны, чем аналогичные эффекты, созданные с помощью JavaScript. Они также проще в реализации и поддерживаются большинством современных браузеров. Для создания CSS-анимаций используют несколько инструментов. transition (переходы) плавно изменяют свойства элемента при изменении его состояния. |
button { background-color: blue; transition: background-color 0.3s ease; } button:hover { background-color: red; } |
transform (трансформации) для изменения формы, размера и положения элементов. |
.box:hover { transform: scale(1.1) rotate(10deg); } |
@keyframes и animation позволяют создавать сложные, многошаговые анимации. |
@keyframes slide { 0% { left: 0; } 100% { left: 100px; } } .sliding-element { position: relative; animation: slide 2s ease infinite; } |
CSS-переменные можно использовать для динамического изменения значений в анимациях. |
:root { --move-distance: 50px; } .box { transform: translateX(var(--move-distance)); } |
Псевдоклассы и псевдоэлементы позволяют запускать анимации при определенных состояниях элемента. |
.box:hover::after {
content: '';
animation: appear 0.5s forwards;
} |
С помощью этих инструментов можно создавать, к примеру: |
Плавные переходы цветов. Изменение размеров и форм элементов. Движение элементов по экрану. Появление и исчезновение элементов. Вращение и наклон элементов. Анимации загрузки (спиннеры). Параллакс-эффекты.
|
Но проще воспользоваться специальными библиотеками анимационных эффектов на CSS – вот подборка лучших: |
На Animista легко выбрать нужный эффект |
Epic Spinners – набор оригинальных спиннеров для использования в проектах на Vue.js. Whirl – большая коллекция интересных CSS-анимаций загрузки различного типа: дуги, отскоки, преследования, цветовые диапазоны и др. Three Dots – набор CSS-анимаций загрузки, созданных с использованием только одного элемента (точки). Mimic.css – коллекция анимационных эффектов для текста. Hover.css – набор эффектов для оживления ссылок, кнопок, иконок, логотипов, SVG и изображений. CSS Animation Kit – набор анимаций на чистом CSS и HTML.
|
CSS Animation Kit включает много эффектов, их можно протестировать прямо на сайте |
LDRS – анимированные индикаторы загрузки и спиннеры. AnimatiSS – большая коллекция качественных CSS-анимаций с возможностью копирования кода одним кликом. -
imagehover.css – CSS-библиотека для легкой реализации эффектов масштабирования при наведении на изображения. SpinKit – набор простых и элегантных CSS/HTML-спиннеров, код которых можно скопировать одним кликом.
|
Приглашаем вас на вебинар «Как меняется математика в разных индустриях: от мобильных игр к фондовым рынкам», который состоится 22 августа в 20:00 по МСК, где вы сможете: - Узнать, как математические методы влияют на мобильные игры и фондовые рынки.
- Понять различия в математических подходах в разных сферах бизнеса.
- Изучить реальные кейсы применения математики в GameDev и финансах.
- Оценить, какие математические знания необходимы для успешной карьеры в Data Science.
|
🕊️ Источники вдохновения для UI/UX-дизайнеров и фронтендеров: 50 полезных ресурсов
|
Websitevice – новая, часто обновляемая галерея с широким спектром примеров веб-дизайна. Удобная фильтрация по категориям. One Page Love – коллекция высококачественных одностраничных сайтов и лендингов. Landingfolio – большая коллекция красивых лендингов, оптимизированных для маркетинга. Lapa Ninja – тщательно отобранные примеры веб-дизайна с полными скриншотами страниц. Godly – обширная галерея с анимированными превью сайтов, мобильных и десктопных приложений. Siteinspire – объемная коллекция лучших веб-дизайнов с удобной сортировкой. - Maxibestof – огромная подборка примеров, курируемая опытным дизайнером.
|
На Maxibestof можно найти пример дизайна для любой ниши |
InspoVault – фокусируется на качестве, а не количестве примеров, в основном в минималистичном и креативном стилях. Landing Gallery – специализируется на эффектных лендингах. SEE + SAW – галерея с динамичными видеопревью сайтов. Design Vault – коллекция вдохновляющих примеров веб-дизайна и UI, включает мобильные версии. Httpster – демонстрирует лучшие веб-дизайны с акцентом на типографику и простоту. Site of Sites – галерея с крупными превью и удобными тегами. Landings – источник вдохновения для лендингов SaaS, мобильных приложений и стартапов. Web Design Inspiration – обширная библиотека со множеством фильтров – по индустрии, типу, стилю, цветовой схеме и т. п. Curated – галерея с видеопревью вместо длинных скриншотов. Admire The Web – коллекция дизайнов в современном минималистическом стиле. Designspiration – охватывает широкий спектр направлений дизайна, включая веб. Best Website Gallery – тщательно отобранная коллекция с фильтрацией по платформам и CMS. Lookup – галерея UI-компонентов и лендингов. Unmatched Style – обширная галерея креативных примеров веб-дизайна. Saaspo – объемная галерея дизайна для SaaS-сайтов.
|
SaaS Landing Page – еще одна коллекция лендингов для SaaS-проектов. Best Agency Sites – фокусируется на сайтах всевозможных агентств. Dark Mode Design – демонстрирует лучшие примеры сайтов с темным дизайном. Ecomm Design – источник вдохновения для дизайна e-commerce сайтов. StoreFront – еще одна большая коллекция e-commerce примеров. Personal Sites – лучшие примеры личных сайтов. Killer Portfolio – специализируется на эффектных и броских портфолио. Pafolios – галерея вдохновения для портфолио различных специалистов. Unsection – демонстрирует лучшие примеры UI-элементов. Web Interactions Gallery – собрание самых красивых веб-анимаций. Dead Simple Sites – галерея ультраминималистичных сайтов с дизайном, выполненным по принципу «чем меньше, тем лучше». Minimal Gallery – коллекция сайтов с простым, но интересным дизайном. Siiimple – вдохновение для минималистичного CSS-дизайна. Brutalist Websites – необычные и экспериментальные дизайны. Footer – специализируется на дизайне эффектных футеров. Navbar Gallery – полностью посвящен дизайну навигационных панелей. Landing Love – представляет обширную коллекцию сайтов с интенсивной анимацией. Hover States – библиотека экспериментальных и сюррных веб-дизайнов. The Whimsical Web – собрание причудливых и забавных веб-дизайнов. Recent Design – показывает последние тренды в UI/UX-дизайне из социальных сетей. A-fresh Website – огромная библиотека лучших примеров веб-дизайна и UI-компонентов. Dark – коллекция сайтов с элегантным темным дизайном.
|
Dark специализируется на темном дизайне, как и аналогичный проект Dark Mode Design |
Landbook – обширная галерея идей с фильтрами по стилю, типографике, индустрии, типу сайта и т. д. Refero Design – библиотека дизайн-вдохновения, включающая UI/UX-элементы и шрифты. Layers – платформа для демонстрации дизайн-проектов, кейсов и концепций, во многом похожая на Dribbble. Awwwards – подборка выдающихся дизайнов, оцененных экспертами. CSS Design Awards – галерея работ ведущих дизайнеров, заслуживших признание коллег. CSS Nectar – платформа для демонстрации и оценки дизайн-проектов.
|
Среди победителей есть российские дизайнеры |
🦊 25 полезных CSS-хитростей
|
scroll-behavior: smooth – делает прокрутку страницы плавной: |
html {
scroll-behavior: smooth;
}
|
a[href^="https"] – позволяет стилизовать внешние ссылки отдельно от внутренних: |
a[href^="https"] {
color: dodgerblue;
}
|
~ – выбирает и стилизует последующие элементы с использованием комбинатора общего родства. Например, так можно применить стиль к абзацам, идущим после заголовков второго уровня: |
:not(.special) – выбирает и стилизует элементы, не имеющие указанного класса: |
li:not(.special) {
font-style: italic;
}
|
Адаптивный размер шрифта в зависимости от размера экрана: |
Центрирование элементов как по вертикали, так и по горизонтали: |
.container {
display: grid;
place-items: center;
}
|
Увеличение размера элемента при наведении курсора: |
button:hover {
transform: scale(1.05);
transition: transform 0.3s ease-in-out;
}
|
button {
cursor: url('custom-cursor.png'), auto;
}
|
Точная настройка параметров насыщенности, ширины и наклона шрифта: |
body {
font-family: 'Inter', sans-serif;
font-variation-settings: 'wght' 700, 'wdth' 75;
}
|
Ограничение текста определенным количеством строк: |
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
|
Настройка внешнего вида полосы прокрутки под дизайн сайта: |
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: darkgrey;
border-radius: 10px;
}
::-webkit-scrollbar-track {
background-color: lightgrey;
}
|
Автоматическое выравнивание колонок по высоте: |
.container {
display: flex;
}
.column {
flex: 1;
}
|
Закрепление фонового изображения при прокрутке: |
.hero {
background-image: url('background.jpg');
background-attachment: fixed;
background-size: cover;
}
|
Создание сложных макетов с минимальным количеством кода: |
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
|
Определение предпочтения пользователя по цветовой схеме (светлая/темная) на основе системных настроек: |
:root {
--bg-color: white;
--text-color: black;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: black;
--text-color: white;
}
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
|
Создание контура вокруг текста: |
h1 {
-webkit-text-stroke: 2px black;
color: white;
}
|
Закрепление элемента при прокрутке: |
header {
position: sticky;
top: 0;
background-color: white;
z-index: 1000;
}
|
button {
border: 5px solid transparent;
background-image: linear-gradient(to right, red, blue);
background-clip: border-box;
border-radius: 10px;
}
|
Создание элемента сложной формы: |
div {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background-color: teal;
}
|
Масштабирование изображений в контейнерах разного размера: |
img {
width: 100%;
height: 100%;
object-fit: cover;
}
|
text-underline-offset – задает расстояние между текстом и линией подчеркивания (пригодится, когда некоторые буквы выходят за нижнюю границу строки): |
.nav-link:hover {
text-decoration: underline 2px solid green;
text-underline-offset: 6px;
}
|
inset – сокращенное свойство для задания положения элемента сразу с четырех сторон: |
.positioned-element {
inset: 5px 3px 1px 4px;
}
|
object-position – используется вместе с object-fit: cover для контроля того, какая часть изображения будет отображаться при обрезке: |
.image {
height: 350px;
width: 500px;
object-fit: cover;
object-position: center bottom;
}
|
Добавление отступа сверху при прокрутке к определенному элементу страницы (полезно, когда у вас есть фиксированное меню сверху, и вы не хотите, чтобы оно перекрывало содержимое при переходе по якорным ссылкам): |
#section-header {
scroll-margin-top: 100px;
}
|
|
|
Понравилась ли вам эта рассылка? |
|
|
Вы получили это письмо, потому что подписались на нашу рассылку. Если вы больше не хотите получать наши письма, нажмите здесь.
|
|
|
|
