» » Расширения для дизайна на браузер

Расширения для дизайна на браузер

Раньше не обращала внимания на расширения для дизайна блога, оказывается зря. С этими расширениями (плагинами) можно не только легко сменить дизайн, посмотрев его на блоге, но и подучить CSS и XTML коды. Расширения напоминают визуальный редактор, с помощью которого можно изменить что-то на своём блоге, посмотреть, как выглядит изменение, скопировать код и вставить его в шаблон в нужном месте. Постоянно расширения в браузере не нужны, их можно закрывать на время с помощью Менеджера расширений, а по мере надобности включать.
Более подробно я расскажу о плагине Code Cola, а остальные аналогичные просто перечислю. Они аналогичны в работе, просто разный дизайн у программ, выбирайте с каким расширением удобно будет работать и устанавливайте.

Code Cola

Сперва установим расширение, идём в магазин с расширениями, устанавливаем плагин. Расширение на английском языке, но интуитивно всё понятно, тем более коды пишутся на английском языке.
Code Cola
Нажимаем на значок расширения, затем нажимаем на тот объект, который нужно изменить или просмотреть, он подкрасится голубым цветом. Открывается меню расширения.
Открывается меню расширения
Всего 18 разделов для смены дизайна, но этого вполне достаточно. Что можно менять:
  1. шрифт
  2. размер шрифта
  3. передвигать блок вверх, вниз
  4. менять цвет шрифта
  5. выбирать для шрифта наклон, толщину
  6. как располагать текст или блок — по центру, влево или вправо
  7. сделать тень текста
  8. сделать обводку текста
И многое другое, например: тень блока, градиент, передвигать блок вверх, вниз, вправо, влево и так далее.
И многое другое
  1.  Значок лупы — первая вкладка меню, где можно делать изменения
  2. Нажав эту вкладку — появится код изменений
  3. Можно просмотреть код страницы
  4. Сохранить изменения для дальнейшего просмотра
  5. Не знаю для чего эта кнопка, но меня перенесло на пустую страницу 
  6. Страница с информацией
  7. Отменить изменения
  8. Просмотреть изменения
  9. Этот ползунок открывает все спрятанные инструменты
Треугольник отмеченный кружком, открывает отдельно у каждой вкладке инструменты.
Если поставить галочку на инструментах, то ползунки будут двигаться и менять размеры синхронно.
инструмент
Что бы отменить все изменения и убрать меню расширения — обновите страницу.

Исследовать элемент в браузере

Кстати, что-то подобное есть и в браузерах — Яндекс Браузер, Гугл Хром, Опера и т.д., правда инструмент не такой удобный, но всё же. Вызываем в браузере контекстное меню на странице с нужным элементом и выбираем Исследовать элемент.
Вызываем в браузере контекстное меню
 Открывается код выделенного элемента, его можно просмотреть или изменить.
код выделенного элемента

Другие расширения для дизайна

Domscope.com - отладка дизайна для мобильного интернета
Cssviewer - просмотр кода любого элемента на странице
Visual Inspector - просматривает код
Css-shack - платный инструмент, но есть пробный период
Live editor for CSS
Less & Sass - Magic CSS 
Dimensions - без проблем измерит все нужные вам объекты.
Google Font Previewer for Chrome - шрифты
Создатель палитры - палитра из любого фото
Fontface Ninja - распознаёт любой шрифт

Ваши комментарии:

Комментарии со спамом удаляются.