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

Эта высокоуровневая библиотека предназначена для построения интерактивных диаграмм. Все графики в Plotly.js можно настраивать: вы можете выбрать большое количество точек, цвета, подписи, метки, а также применить масштабирование и панорамирование.

Plotly.js дает возможность создавать точечные и линейные графики, круговые и пузырьковые диаграммы, гистограммы, различного вида шкалы и другие графические способы передачи данных. Она поддерживает анимацию графиков и создание 3D-моделей.

Библиотека подходит для работы с большим количеством данных. Plotly.js совместима с разными браузерами и позволяет экспортировать изображения диаграмм. Изображения 3D создаются при помощи WebGL.

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

💾 Login Form – эффектная анимация для кнопки «отправить» в форме. При наведении курсора кнопка загорается ярким светом.

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

⌨ Создание стилей для ссылок при помощи CSS

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

Чаще всего при нажатии на ссылку изменяется ее цвет. Например, в браузерах Yandex и Google посещенные ссылки приобретают фиолетовый цвет.

Задать стили для ссылок можно при помощи псевдоклассов. Они пишутся в CSS через двоеточие после названия селектора:

selector:pseudo-class {
property:value;
}

Применим два псевдокласса для тега <a>, в котором находится ссылка:

/* непосещенная ссылка */
a:link {
color: #100873;
}

/* посещенная ссылка */
a:visited {
color: #750062;
}

В этом примере непосещенная ссылка имеет синий цвет, но при переходе по адресу она становится фиолетовой.

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

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