Молниеносная верстка при помощи плагина "Emmet"
Этот плагин многократно увеличивает продуктивность написания кода за счет преобразования простых аббревиатур хештегов в полноценные куски.
В уроке я продемонстрирую как установить и начать использовать его в работе.
👨🏻💻 ИЗУЧИТЬ УРОК | #emmet
Этот плагин многократно увеличивает продуктивность написания кода за счет преобразования простых аббревиатур хештегов в полноценные куски.
В уроке я продемонстрирую как установить и начать использовать его в работе.
👨🏻💻 ИЗУЧИТЬ УРОК | #emmet
Telegraph
Молниеносная верстка при помощи плагина "Emmet"
В этом уроке я продемонстрирую тебе как установить плагин "Emmet" в редакторе "Sublime Text 3", а так же основы его применения. Этот плагин многократно увеличивает продуктивность написания кода за счет преобразования простых аббревиатур хештегов в полноценные…
Подсветка и выбор цветов в CSS-файлах
В текущем уроке я покажу тебе как улучшить работу с цветами в CSS-файлах при помощи двух плагинов: "Color Highlighter" и "ColorPicker".
👨🏻💻 ИЗУЧИТЬ УРОК | #css
В текущем уроке я покажу тебе как улучшить работу с цветами в CSS-файлах при помощи двух плагинов: "Color Highlighter" и "ColorPicker".
👨🏻💻 ИЗУЧИТЬ УРОК | #css
Telegraph
Подсветка и выбор цветов в CSS-файлах
В текущем уроке я покажу тебе как улучшить работу с цветами в CSS-файлах при помощи двух плагинов. Для начала обрати внимание, как цвета отображаются сейчас. Они выглядят в формате RGB кодировки. Визуально не понятно где какой цвет указан. Но я покажу как…
Выравнивание кода в Sublime Text
Код в Sublime отображается весьма наглядно и приятно. Но это все равно можно улучшить. Например, за счет выравнивания.
Как? Расскажу в этом уроке!
👨🏻💻 ИЗУЧИТЬ УРОК | #sublime
Код в Sublime отображается весьма наглядно и приятно. Но это все равно можно улучшить. Например, за счет выравнивания.
Как? Расскажу в этом уроке!
👨🏻💻 ИЗУЧИТЬ УРОК | #sublime
Telegraph
Выравнивание кода в Sublime Text
Наглядное отображение кода значительно увеличивает его восприятие, скорость написания и комфорт разработки. Представь, что ты сел писать код в редакторе, который не поддерживает подсветку синтаксиса, а для минификации размера файла, код необходимо писать…
Автоматическая перезагрузка страницы в браузере при сохранении файла
В этом уроке я расскажу тебе о полезном плагине "LiveReload", при помощи которого после сохранения файла, происходит автоматическая перезагрузка страницы.
👨🏻💻 ИЗУЧИТЬ УРОК | #sublime #html
В этом уроке я расскажу тебе о полезном плагине "LiveReload", при помощи которого после сохранения файла, происходит автоматическая перезагрузка страницы.
👨🏻💻 ИЗУЧИТЬ УРОК | #sublime #html
Telegraph
Автоматическая перезагрузка страницы в браузере при сохранении файла
В этом уроке я расскажу тебе о полезном плагине для "Sublime Text 3", при помощи которого после сохранения файла происходит автоматическая перезагрузка страницы в браузере. Таким образом не надо после каждого обновления страницы сохранять её, переходить в…
ColorZilla - расширение для выбора цвета на сайте
Является аналогом пипетки в Photoshop. Может быть установлено в Firefox либо Chrome. Вызывается простым нажатием на кнопку расширения. Поддерживает историю цветов, анализ палитры на сайте и автоматическое копирование цвета в буфер обмена.
#расширение
Является аналогом пипетки в Photoshop. Может быть установлено в Firefox либо Chrome. Вызывается простым нажатием на кнопку расширения. Поддерживает историю цветов, анализ палитры на сайте и автоматическое копирование цвета в буфер обмена.
#расширение
Atom - редактор кода
Бесплатный текстовый редактор с открытым исходным кодом для Linux, macOS, Windows с поддержкой плагинов, написанных на Node.js, и встраиваемых под управлением Git. Большинство плагинов имеют статус свободного программного обеспечения, разрабатываются и поддерживаются сообществом.
#редактор
Бесплатный текстовый редактор с открытым исходным кодом для Linux, macOS, Windows с поддержкой плагинов, написанных на Node.js, и встраиваемых под управлением Git. Большинство плагинов имеют статус свободного программного обеспечения, разрабатываются и поддерживаются сообществом.
#редактор
CSS Gradient - генератор CSS-градиентов
Включает в себя минимум необходимых настроек: тип, количество переходов, их позиции, HEX/RGBA кодировки цветов, угол наклона и прозрачность. Результат отображается ниже в виде CSS стилей градиента. Для совместимости с IE6+ присутствует соответствующая кнопка.
#генератор #css
Включает в себя минимум необходимых настроек: тип, количество переходов, их позиции, HEX/RGBA кодировки цветов, угол наклона и прозрачность. Результат отображается ниже в виде CSS стилей градиента. Для совместимости с IE6+ присутствует соответствующая кнопка.
#генератор #css
1001freefonts - сайт со шрифтами
Вопреки своему названию, на сайте содержится более 10000 различных шрифтов. Их можно сортировать по стилю, названию и новизне. Присутствует превью по введенному тексту. Пример показан на скриншоте. Большая часть шрифтов доступна для бесплатного использования.
#сайт #шрифты
Вопреки своему названию, на сайте содержится более 10000 различных шрифтов. Их можно сортировать по стилю, названию и новизне. Присутствует превью по введенному тексту. Пример показан на скриншоте. Большая часть шрифтов доступна для бесплатного использования.
#сайт #шрифты
animejs.com - библиотека для анимаций
Предназначена для добавления анимации HTML и SVG объектам на веб-странице. Является легковесной и простой библиотекой с наглядной документацией. Поддерживает как обычные перемещения, так и параметрические, циклы и привязки к таймлайну.
#библиотека #javascript
Предназначена для добавления анимации HTML и SVG объектам на веб-странице. Является легковесной и простой библиотекой с наглядной документацией. Поддерживает как обычные перемещения, так и параметрические, циклы и привязки к таймлайну.
#библиотека #javascript
tinypng.com - сайт сжатия изображений
Сервис сжимает присланные фотографии до максимально допустимого размера, но с минимальной потерей качества. Работает с PNG и JPEG форматами. Все излишние метаданные так же удаляются у файлов. У PNG изображений сохраняется поддержка прозрачности.
#сайт
Сервис сжимает присланные фотографии до максимально допустимого размера, но с минимальной потерей качества. Работает с PNG и JPEG форматами. Все излишние метаданные так же удаляются у файлов. У PNG изображений сохраняется поддержка прозрачности.
#сайт
WhatFont - расширение, определяющее шрифт текста на сайте
Для этого достаточно установить само расширение, запустить его и навести курсор мыши на необходимый текст. Отобразится всплывающее окно с описанием шрифта: семейство, стиль начертания, размер, цвет, алфавит в виде больших и маленьких букв.
#расширение
Для этого достаточно установить само расширение, запустить его и навести курсор мыши на необходимый текст. Отобразится всплывающее окно с описанием шрифта: семейство, стиль начертания, размер, цвет, алфавит в виде больших и маленьких букв.
#расширение
На какой из последних постов подготовить статью?
Anonymous Poll
14%
ColorZilla - расширение для выбора цвета на сайте
26%
Atom - редактор кода
16%
CSS Gradient - генератор CSS-градиентов
12%
1001freefonts - сайт со шрифтами
34%
animejs.com - библиотека для анимаций
10%
tinypng.com - сайт сжатия изображений
10%
WhatFont - расширение, определяющее шрифт текста на сайте
28%
Лучше следующий пост, а не статью
Библиотека для анимаций "Anime.js"
По результатам проведенного голосования, вы выбрали статью на тему создания анимаций при помощи библиотеки "Anime.js". Собственно приступаем к её изучению!
👨🏻💻 ИЗУЧИТЬ УРОК | #статья
По результатам проведенного голосования, вы выбрали статью на тему создания анимаций при помощи библиотеки "Anime.js". Собственно приступаем к её изучению!
👨🏻💻 ИЗУЧИТЬ УРОК | #статья
Telegraph
Библиотека для анимаций "Anime.js"
По результатам проведенного голосования, вы выбрали статью на тему создания анимаций при помощи библиотеки "Anime.js". Собственно приступаем к её изучению "Anime.js" предназначена для добавления динамичной анимации HTML и SVG элементам страницы. Функционал…
zeplin.io - лучший помощник для дизайнера и верстальщика
Позволяет создавать проект с макетами различных разрешений. Отступы и размеры элементов отображаются при наведении мышки. При выделении элемента сбоку появляется блок с его CSS-стилями, которые можно копировать и сразу вставлять в код проекта. Сервис позволяет экспортировать в себя проекты созданные в Photoshop, Sketch, Adobe XD и Figma.
#сервис
Позволяет создавать проект с макетами различных разрешений. Отступы и размеры элементов отображаются при наведении мышки. При выделении элемента сбоку появляется блок с его CSS-стилями, которые можно копировать и сразу вставлять в код проекта. Сервис позволяет экспортировать в себя проекты созданные в Photoshop, Sketch, Adobe XD и Figma.
#сервис
materialpalette.com - генератор палитры в стиле материального дизайна
Сайт генерирует палитру Material Design на основе выбранных цветов. Отображает окно интерфейса для предпросмотра. Позволяет как скопировать отдельно RGB кодировку цвета, так и всю палитру в различных форматах. Например: CSS, SASS, LESS, SVG и PNG.
#сайт #палитра
Сайт генерирует палитру Material Design на основе выбранных цветов. Отображает окно интерфейса для предпросмотра. Позволяет как скопировать отдельно RGB кодировку цвета, так и всю палитру в различных форматах. Например: CSS, SASS, LESS, SVG и PNG.
#сайт #палитра
squoosh.app - оптимизатор изображений
Сайт оптимизирует размер изображения с минимальной потерей качества. Значение сжатия можно регулировать от 0 до 100 процентов. Экран сайта делится ползунком на две части. Слева отображается оригинальное изображение, справа оптимизированное. Ползунок можно перемещать для наглядности.
#сайт
Сайт оптимизирует размер изображения с минимальной потерей качества. Значение сжатия можно регулировать от 0 до 100 процентов. Экран сайта делится ползунком на две части. Слева отображается оригинальное изображение, справа оптимизированное. Ползунок можно перемещать для наглядности.
#сайт
Balsamiq Mockups - позволяет создавать макеты интерфейсов
Сервис предназначен для прототипирования пользовательских интерфейсов. В частности веб-сайтов, мобильных и десктопных приложений. Включает в себя стандартный набор наиболее популярных элементов интерфейсов. Поддерживает сохранения макета в виде PNG-картинки либо PDF-файла.
#программа
Сервис предназначен для прототипирования пользовательских интерфейсов. В частности веб-сайтов, мобильных и десктопных приложений. Включает в себя стандартный набор наиболее популярных элементов интерфейсов. Поддерживает сохранения макета в виде PNG-картинки либо PDF-файла.
#программа
coolors.co - генератор цветовой палитры
Основная зона сайта представляет собой цветовые столбцы. При клике на каждый столб отображается палитра от самого темного оттенка указанного цвета, до самого светлого. Сформированную палитру можно экспортировать во множество разных форматов: CSS, SVG, ASE, изображение, PDF-файл и т.п. Так же можно сгенерировать цветовую палитру по загруженному фото.
#сервис
Основная зона сайта представляет собой цветовые столбцы. При клике на каждый столб отображается палитра от самого темного оттенка указанного цвета, до самого светлого. Сформированную палитру можно экспортировать во множество разных форматов: CSS, SVG, ASE, изображение, PDF-файл и т.п. Так же можно сгенерировать цветовую палитру по загруженному фото.
#сервис
www.lastpass.com/username-generator - генератор безопасного логина
Сайт позволяет сгенерировать случайный логин по заданным параметрам. На выбор предоставляется 3 стандартных варианта: легкий для произношения, легкий для чтения и содержащий все допустимые символы. Какие именно, можно так же указать: нижний регистр, верхний регистр, числа и специальные символы. Допустимая длина от 1 до 50 символов.
#сайт
Сайт позволяет сгенерировать случайный логин по заданным параметрам. На выбор предоставляется 3 стандартных варианта: легкий для произношения, легкий для чтения и содержащий все допустимые символы. Какие именно, можно так же указать: нижний регистр, верхний регистр, числа и специальные символы. Допустимая длина от 1 до 50 символов.
#сайт
cssminifier.com - онлайн CSS-минификатор
Сайт оптимизирует предоставленный CSS-код убирая из него все лишнее: пробелы, переносы строк, комментарии и т.п. Имеет удобный и минималистичный интерфейс: окно ввода стилей, окно результата и кнопки взаимодействия. Позволяет как скопировать результат в виде текста, так и скачать в качестве файла.
#сайт #css
Сайт оптимизирует предоставленный CSS-код убирая из него все лишнее: пробелы, переносы строк, комментарии и т.п. Имеет удобный и минималистичный интерфейс: окно ввода стилей, окно результата и кнопки взаимодействия. Позволяет как скопировать результат в виде текста, так и скачать в качестве файла.
#сайт #css
fontstorage.com/ru/ - бесплатные шрифты
Представляет собой большую коллекцию бесплатных шрифтов. Включает обширный список настроек для онлайн подбора шрифта: начертание, семейство, поддержка языка, размер и так далее. В разделе "ПОЛИГОН" можно наглядно подобрать несколько шрифтов и увидеть, как они будут сочетаться на одной странице.
#сайт #шрифты
Представляет собой большую коллекцию бесплатных шрифтов. Включает обширный список настроек для онлайн подбора шрифта: начертание, семейство, поддержка языка, размер и так далее. В разделе "ПОЛИГОН" можно наглядно подобрать несколько шрифтов и увидеть, как они будут сочетаться на одной странице.
#сайт #шрифты
