3D Carousel – это слайдер для показа карточек на сайте, который имеет объемную перспективу и удобное переключение. На карточки можно поместить любой текст или изображения.

Сайтодел | #сниппет #css

🌐 Howler.js – библиотека JavaScript для работы с аудио

Эта библиотека делает работу со звуком в языке JavaScript простой и надежной на всех платформах. Ее преимущества – это упрощенный API, поддержка большого количества аудиоформатов, совместимость с разными браузерами и отсутствие внешних зависимостей.

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

Библиотека позволяет регулировать звук, включать и отключать его, а также делать плавное затухание. Вы можете также воспроизводить несколько звуков одновременно.

Сайтодел | #библиотека #javascript

CSS glowing icons – подсветка для иконок. Благодаря этому инструменту иконки известных приложений подсвечиваются и бесперерывно меняют свой цвет.

Сайтодел | #сниппет #css

🖥 Art gallery app UI - многоэкранный макет мобильного приложения картинной галереи. Включает 4 экрана: наборы досок, просмотр галереи, отображение картины и полное описание произведения.

Сайтодел | #макет #figma

⌨️ Как задать стиль для границы в CSS?

За это отвечает свойство border-style. Оно указывает, в каком виде отображать границу.

Свойство имеет такие значения, как dotted (точки), dashed (пунктир), solid (сплошной), double (двойной) и так далее.

Границы также могут отсутствовать (none) или быть скрытыми (hidden). Эти значения можно применять в hover-эффектах, например, когда при наведении курсора граница исчезает.

Сайтодел | #код #css

💾 CSS Goey footer – динамичная анимация для футера. Яркие красные капли поднимаются вверх и создают ощущение испарения. Такой футер привлечет внимание пользователей и станет украшением сайта.

Сайтодел | #сниппет #css

🖥 UI mobile app by Omega – макет мобильного приложения для банковской системы. Отличительная черта – красивые градиенты, темный фон, а также обтекаемые формы карты и иконок.

Сайтодел | #макет #figma

⌨ Cвойство text-shadow для добавления тени к тексту в CSS

Придать тексту эффект тени в языке CSS можно при помощи свойства text-shadow, которое имеет несколько значений:

- первое значение (4px) - смещение тени по оси Х
- второе значение (6px) - смещение тени по оси Y
- третье значение (8px) - радиус размытия тени
- четвертое значение (#1826b0) - цвет тени

CSS допускает использование сразу нескольких теней для одного текста. В этом случае группы значений пишут через запятую.

Сайтодел | #код #css

💾 Parallax Photo Carousel – галерея для изображений с 3D-эффектом. Фотографии подсвечиваются при наведении курсора, а компактное расположение поможет разместить в один ряд сразу пять фотографий.

Сайтодел | #сниппет #css

🌐 Go.js – библиотека JavaScript для создания интерактивных диаграмм

Эта библиотека позволяет создавать графики и диаграммы с помощью языков JavaScript и TypeScript. С помощью Go.js можно создавать блок-схемы, различные типы диаграмм, а также инструменты проектирования и планирования.

Ввод данных в Go.js осуществляется с помощью инструментов, которые можно настроить и расширить, чтобы предоставить вашим пользователям необходимое взаимодействие. Go.js реализует ряд распространенных команд и горячих клавиш, которые можно выбирать самостоятельно.

Другие важные особенности Go.js – это привязка и синхронизация данных, а также совместимость с такими популярными фреймворками, как Vue, React и Angular.

Сайтодел | #библиотека #javascript

⌨️ Свойство align-self в CSS

Это свойство выравнивает какой-либо элемент внутри flex-контейнера. Выравнивание происходит вдоль поперечной оси.

Свойство имеет такие значения, как:
flex-start - блок прижимается к началу поперечной оси
flex-end - блок прижимается к концу поперечной оси
center - блок находится по центру поперечной оси
baseline - блок выравнивается по базовой линии текста
stretch - блок растягивается по всему свободному пространству

По умолчанию свойство align-self принимает значение auto.

Сайтодел | #код #css

💾 ScrollTrigger – красивый эффект перемотки экрана с подвижными элементами. Во время прокрутки горы и облака смещаются не целиком, а по отдельным слоям.

Сайтодел | #сниппет #css

🖥 Travel Application – дизайн мобильного приложения для путешественников. Отличительные особенности – фотографии с закругленными углами, минималистичный дизайн и понятный интерфейс.

Сайтодел | #макет #figma

💾 Gradient – интересная цветовая анимация для дизайна сайтов и приложений. Разноцветные блики перемещаются по экрану и смешиваются между собой. Такой эффект привлекает внимание и делает страницу интереснее.

Сайтодел | #сниппет #css

⌨ Свойство max-width в CSS

Это свойство позволяет установить максимальную ширину элемента. Значениями max-width могут быть пиксели, проценты или иные единицы измерения, которые поддерживает CSS.

Свойство max-width позволяет держать какой-либо элемент в установленных границах. Это бывает нужно для статичных частей сайта, которые не меняют свой размер относительно других элементов.

Сайтодел | #код #css

🖥 Tracking App – макет сервиса для отслеживания заказов. Приложение выполнено в красивом светло-оранжевом цвете и включает в себя наглядную карту с маршрутами следования товаров.

Сайтодел | #макет #figma

💾 FlexHoverSlider – эстетичный слайдер, в котором при наведении курсора на элемент всплывает блок с текстом, а заголовок переворачивается горизонально. Анимация быстрая и подвижная – это точно понравится пользователю сайта!

Сайтодел | #сниппет #css

🖥 Food Delivery Application – дизайн для интернет-магазина еды. В приложение встроен удобный поиск, есть карточки товаров с описаниями, указывается калорийность продукта и время доставки.

Сайтодел | #макет #figma

💾 Confetti Button – анимация для кнопки Submit. При нажатии появляются конфетти и зеленая галочка на самой кнопке.

Сайтодел | #сниппет #css

Дизайнишь в FIGMA?

11 апреля пройдёт Бесплатный, поддерживающий марафон по веб-дизайну, на котором узнаешь:

💡Какие этапы нужно пройти, чтобы начать карьеру в 2022?
💡Как развиваться в текущих реалиях?
💡Как искать работу в студии и на фрилансе?
💡Каким должно быть рабочее портфолио?

🎁 По результату марафона у тебя есть:
+ Новая работа в портфолио
+ Шаблон для презентации любой работы в портфолио
+ Пособие на 44 страницы по источникам
+ Пособие по книгам + пособие по референсам

Забирай бесплатный билет ➡️ https://design-figma.ru/r/reg18_1

🖥 Smart Animate – дизайн приложения для прослушивания музыки. Оно включает в себя все основные функции плеера и выполнено в традициях минимализма.

Сайтодел | #макет #figma