Вернуть деньги: 50 источников вдохновения для UI/UX-дизайнеров и фронтендеров

🏛️ 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;
}

🎓☕ Подтянуть свои знания по Java вы можете на нашем телеграм-канале «Библиотека Java для собеса»

С помощью этих инструментов можно создавать, к примеру:

Плавные переходы цветов.
Изменение размеров и форм элементов.
Движение элементов по экрану.
Появление и исчезновение элементов.
Вращение и наклон элементов.
Анимации загрузки (спиннеры).
Параллакс-эффекты.

Но проще воспользоваться специальными библиотеками анимационных эффектов на CSS – вот подборка лучших:

Animate.css – готовая библиотека кросс-браузерных анимаций для использования в любых проектах.
Magic CSS animations – набор простых анимаций для включения в веб-проекты или приложения.
Animista – библиотека с возможностью протестировать и скачать только нужные анимации.

На Animista легко выбрать нужный эффект

Epic Spinners – набор оригинальных спиннеров для использования в проектах на Vue.js.
Whirl – большая коллекция интересных CSS-анимаций загрузки различного типа: дуги, отскоки, преследования, цветовые диапазоны и др.
Three Dots – набор CSS-анимаций загрузки, созданных с использованием только одного элемента (точки).
Mimic.css – коллекция анимационных эффектов для текста.
Hover.css – набор эффектов для оживления ссылок, кнопок, иконок, логотипов, SVG и изображений.
CSS Animation Kit – набор анимаций на чистом CSS и HTML.

CSS Animation Kit включает много эффектов, их можно протестировать прямо на сайте

➕➕🧩 Интересные задачи по C++ для практики можно найти на нашем телеграм-канале «Библиотека задач по С++»

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 можно найти пример дизайна для любой ниши

🦫🎓 Подтянуть свои знания по Go вы можете на нашем телеграм-канале «Библиотека Go для собеса»

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-платформ

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

🧩☕ Интересные задачи по Java для практики можно найти на нашем телеграм-канале «Библиотека задач по Java»

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;
}

~ – выбирает и стилизует последующие элементы с использованием комбинатора общего родства. Например, так можно применить стиль к абзацам, идущим после заголовков второго уровня:

h2 ~ p {
color: blue;
}

:not(.special) – выбирает и стилизует элементы, не имеющие указанного класса:

li:not(.special) {
font-style: italic;
}

Адаптивный размер шрифта в зависимости от размера экрана:

h1 {
font-size: 5vw;
}

Центрирование элементов как по вертикали, так и по горизонтали:

.container {
display: grid;
place-items: center;
}

Увеличение размера элемента при наведении курсора:

button:hover {
transform: scale(1.05);
transition: transform 0.3s ease-in-out;
}

➕➕🎓 Подтянуть свои знания по C++ вы можете на нашем телеграм-канале «Библиотека С++ для собеса»

Кастомный курсор:

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);
}

🦫🧩 Интересные задачи по Go для практики можно найти на нашем телеграм-канале «Библиотека задач по Go»

Создание контура вокруг текста:

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;
}

Автор рассылки: Наталья Кайда

Понравилась ли вам эта рассылка?

Очень понравилась

Не понравилась