This media is not supported in your browser
VIEW IN TELEGRAM
👨💻 [Урок 64] Зацикленная анимация
Привет, сайтоделы! Как ваши делишки? Перед новым годом решил порадовать вас парочкой новых уроков. Сегодня рассмотрим крутую анимацию главного блока.
Анимация простая, материалы прикрепляю ниже. Изучаем!)
ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
Привет, сайтоделы! Как ваши делишки? Перед новым годом решил порадовать вас парочкой новых уроков. Сегодня рассмотрим крутую анимацию главного блока.
Анимация простая, материалы прикрепляю ниже. Изучаем!)
ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
Приветствую сайтодел! 👋
Тяжелый 2020 год закончился. Ты уже вступил в новый перспективный 2021 год. Я уверен, он будет лучше, продуктивней и в разы эффективней для тебя.
Так как от Нового Года мы всегда ожидаем чего-то интересного, нового и перспективного, то я решил сделать для тебя соответствующий сюрприз - расширение тематики канала.
Теперь я буду делиться с тобой всеми своими знаниями веб-разработки: полезные библиотеки, креативные решения во фронтенде, популярные инструменты, инновации в области создания сайтов и все что связано с этой сферой.
Это лишь малая доля от планируемого контента. Часть из которого уже готова и скоро будет опубликована на канале. Поэтому не забудь купить кофе, оплатить интернет и ожидай скорую публикацию нового поста.
Тяжелый 2020 год закончился. Ты уже вступил в новый перспективный 2021 год. Я уверен, он будет лучше, продуктивней и в разы эффективней для тебя.
Так как от Нового Года мы всегда ожидаем чего-то интересного, нового и перспективного, то я решил сделать для тебя соответствующий сюрприз - расширение тематики канала.
Теперь я буду делиться с тобой всеми своими знаниями веб-разработки: полезные библиотеки, креативные решения во фронтенде, популярные инструменты, инновации в области создания сайтов и все что связано с этой сферой.
Это лишь малая доля от планируемого контента. Часть из которого уже готова и скоро будет опубликована на канале. Поэтому не забудь купить кофе, оплатить интернет и ожидай скорую публикацию нового поста.
Редактор "Sublime Text"
В этом уроке я расскажу тебе об отличном редакторе для разработчиков под названием "Sublime Text". Его еще относят не просто к редакторам, а интегрированным средам разработки. То есть "редактор на батарейках".
👨🏻💻 ИЗУЧИТЬ УРОК | #sublime
В этом уроке я расскажу тебе об отличном редакторе для разработчиков под названием "Sublime Text". Его еще относят не просто к редакторам, а интегрированным средам разработки. То есть "редактор на батарейках".
👨🏻💻 ИЗУЧИТЬ УРОК | #sublime
Telegraph
Редактор "Sublime Text"
В этом уроке я расскажу тебе об отличном редакторе для разработчиков под названием "Sublime Text". Его еще относят не просто к редакторам, а интегрированным средам разработки. Для скачивания достаточно перейти на официальный сайт и нажать кнопку "DOWNLOAD…
Молниеносная верстка при помощи плагина "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.
#сервис
