​bouncejs.com - конструктор CSS-анимаций

Является JavaScript-файлом и предназначен для создания анимаций на CSS3. На сайте можно выбрать шаблон, настроить параметры анимации, а после скопировать URL-ссылку на демонстрационный результат. И соответственно поделиться им. Так же можно просто скачать результат сгенерированной анимации в виде CSS-кода.

#библиотека #css

​Skeleton - легковесный CSS-фреймворк

Представляет собой стартовый шаблон и 2 файла стилей: normalize.css и skeleton.css. Последний содержит всего 400 строк кода в несжатом виде. Он включает в себя сеточную систему и стили для стандартных HTML-элементов(ссылки, кнопки, таблицы, формы и т.п.).

#библиотека

​Sticker.js - эффект отклеивающегося стикера

Представляет собой простую JavaScript-библиотеку, которая создает анимированный эффект отклеивания стикера у выбранного элемента. Не требует дополнительных зависимостей. Поддерживается всеми популярными браузерами. Распространяется по лицензии MIT. Сам эффект отклеивания показан на скриншоте ниже.

#библиотека #javascript

​Parallax.js - эффект параллакса на сайте

Работает как в браузере, так и на смартфонах. Ориентация эффекта в одном случае зависит от позиции курсора, а во втором от положения устройства. Если вы не знаете, что означает этот эффект, то просто перейдите на сайт разработчиков. Там весьма наглядно и красиво показано. Сама библиотека весьма популярна и включает обширные настройки для создания нужного эффекта.

#библиотека #javascript

​jsnice.org - преобразует JavaScript-код в читабельный вид

Сервис анализирует загруженный JavaScript код и превращает его в человеческий вид, переименовывая переменные и параметры. Сервис использует данные, основанные на сотнях open source проектах.

#сайт #javascript

​type.method.ac - настройка межбуквенного расстояния

Это игра, которая развивает восприятие правильного расстояния между буквами в зависимости от их формы. Ваша задача подвинуть буквы в правильное положение и нажать кнопку "Next". После этого покажется верный результат, ваши баллы и ошибки. Очень полезно для дизайнеров и фронтендщиков при применении CSS-свойства letter-spacing.

#сайт #css

​pxtoem.com - конвертер из PX в EM

Сайт представляет собой онлайн калькулятор преобразования из PX в EM и обратно, а так же наглядную таблицу конвертации. Помимо пикселей и EM в таблице представлены значения в процентах и PT. Для подсчета значений от 6 до 24 пикселей достаточно в левой таблице выбрать значение шрифта по умолчанию.

#сайт #css

​d3js.org - библиотека визуализация данных

Является большим и мощным инструментов для интерактивной визуализации сложных данных. Представляет собой JavaScript-библиотеку. Включает в себя множество модулей, каждый из которых решает свою задачу. На сайте показаны некоторые примеры сложной визуализации. В противовес своим возможностям, является не простой библиотекой для понимания и изучения.

#библиотека #javascript

Zeplin.io - лучший помощник для дизайнера и верстальщика

Последний опрос показал, что вам интересен более подробный обзор сервиса zeplin.io. Собственно его мы и подготовили.

👨🏻‍💻 ИЗУЧИТЬ УРОК | #статья

​swiperjs.com - мобильный слайдер

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

#библиотека #javascript

​fonts.google.com – шрифты для сайтов

Сайт содержит одну из крупнейших коллекций шрифтов, адаптированных к использованию в веб разработке. На сайте представлено более 1000 различных семейств шрифтов, в том числе с поддержкой русского языка. Доступны удобные фильтры и наглядный предпросмотр шрифтов. Присутствует возможность скачать как отдельный шрифт, так и архив с несколькими семействами.

#сайт #шрифты

​PagePiling.js — прокрутка разделов на странице наложенных друг на друга

Библиотека позволяет делать удобные переходы при скроле между блоками. Эффект анимации выглядит особенно красиво на сенсорных устройствах. Библиотека работает как во всех современных браузерах, так и в более старых версиях. Например, IE 8 либо Opera 12. Наглядный эффект показан на самом сайте библиотеки.

#библиотека #javascript

​bulma.io - адаптивный CSS- фреймворк

Он основан на Flexbox для максимально удобной резиновой верстки. Не требует использования JavaScript библиотеки. Для работы достаточно подключить CSS-файл. Очень прост в изучении. Большинство разработчиков начинает его использовать спустя первые минуты знакомства. Включает большое количество SASS переменных для гибкой настройки.

#фреймворк #css

Pixi JS - библиотека для создания и управления графикой в браузере

Кроссплатформенный 2D-движок с открытым исходным кодом, которая помогает создавать игры и интерактивные веб-сайты на основе анимации. Disney - один из многих, которые используют его для создания своего цифрового контента.

Pixi надежен и прост, поскольку он скрывает функциональность некоторых из самых сложных функций в простой, готовой к использованию библиотеке. Если вы знакомы с Adobe Flash, вам будет проще изучить Pixi.

#библиотека #javascript

Live server - расширение VS Code для автообновления страницы

Внести изменения в редакторе кода, переключиться в браузер и обновить, чтобы увидеть изменения. Это бесконечный цикл разработчика, но что, если ваш браузер будет автоматически обновляться каждый раз, когда вы вносите изменения? Вот где на помощь приходит Live Server!

Он также запускает ваше приложение на локальном сервере. Есть некоторые вещи, которые вы можете протестировать только при запуске приложения с сервера, так что это приятное преимущество.

#расширение #vscode

Красивые анимации с bounce.js

Bounce.js - это библиотека JS для создания красивой анимации ключевых кадров на основе CSS3. Инструмент на bouncejs.com позволяет вам создавать статические ключевые кадры, которые можно использовать без какого-либо дополнительного JS, но если вы хотите, чтобы ваше приложение генерировало их на лету, вы можете использовать библиотеку bounce.js.

👨🏻‍💻 ИЗУЧИТЬ УРОК | #статья

Color Hunt - сервис для выбора цветовых палитр

Color Hunt - это бесплатная и открытая платформа с тысячами цветовых палитр, подобранных вручную. Имеется система лайков, с помощью которой можно сохранить себе цвет и увидеть, какие палитры понравились большинству.

Каждый цвет отображается в формате hex, что облегчает его использование. Есть фильтр где можно выбрать палитры по разным тематикам: закат, зима, лето, рождество, неон, ретро и др.

#сайт #цвета

Sass - метаязык на основе CSS

Sass - самый зрелый и надежный язык расширений CSS. Он позволяет использовать переменные, вложенные правила, миксины, функции и многое другое с полностью совместимым с CSS синтаксисом.

Он простой и легкий в использовании интерфейсный инструмент для написания любого кода, имеет множество полезных функций для управления цветами. Sass помогает сохранять большие таблицы стилей хорошо организованными и упрощает совместное использование дизайна внутри и между проектами.

#препроцессор #css