Вернуть деньги

понедельник, 19 августа 2024 г.

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

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

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

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

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

📖 Читать нас

🎓 Учиться у нас

Веб-версия

Вы получили это письмо, потому что подписались на нашу рассылку. Если вы больше не хотите получать наши письма, нажмите здесь.

Новости от Политнавигатор за последний час

Политнавигатор за последний час опубликовал:

19.08.2024 @ 10:36
ВСУ сделали ставку на тактику басмачей и Махно

В своем вторжении в Курскую область Украина не изобрела ничего нового. Об этом в эфире признанного иноагентом видеоблога «Редакция» заявил военный эксперт Валерий Ширяев, передаёт корреспондент «ПолитНавигатора». «Была применена современная натовская тактика, прогрессивная, которая в условиях полного превосходства дает замечательные результаты, что мы видели по войнам Соединенных Штатов на Ближнем Востоке, особенно против Саддама Хусейна, ровно так же [...]

19.08.2024 @ 10:17
Украина усугубила свое положение, увеличив фронт

Украина в наступлении на Курскую область не имеет военной цели, которой она могла бы достичь. При этом украинское руководство своими же руками создало себе проблемы. Об этом в эфире признанного иноагентом видеоблога «Редакция» заявил военный эксперт Валерий Ширяев, передаёт корреспондент «ПолитНавигатора». «Впереди нет военной цели, потому что перед нами своими собственными руками командование Украины увеличило ту самую зону [...]

Вы получили это письмо, так как просили уведомлять вас о появлении новых записей.
С уважением, Subscribe2 Sender

понедельник, 19 августа 2024 г.

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

Новости от Политнавигатор за последний час

понедельник, 19 августа 2024 г.