Новые сервисы на сайте — проверка адаптивности и генератор

03 апреля 16:58 2013

Добрый день дорогие друзья. Хочу поделиться вами замечательной новостью — я запустил два новых онлайн-сервиса, для всех моих читателей и не только.

Новые сервисы на сайте

Сейчас опишу каждый подробнее.

1. Проверка Адаптивного дизайна

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

Проверка Адаптивного дизайна

И так, встречайте — Сервис по проверке адаптивного дизайна.

Принцип работы очень простой – тестируемый сайт открывается в нескольких iFrame окнах, которые независимы друг от друга. А каждое отдельное окно настроено под свою ширину экрана, что в итоге даёт нам несколько окон браузеров в одном окне браузере. Извините за тавтологию, но грубо говоря — так это и работает.

PS: У меня на блоге не адаптивный дизайн, поэтому на нём вы не сможете увидеть все возможности сервиса.

Друзья, если вас интересует Full Stack Web Developer, то получить всю необходимую информацию вы сможете на интернет-ресурсе limitless.pro.

Так же вы можете ещё проверять адаптивность, с помощью приложений для браузера Google Ghrome, подробнее тут.

2. Генерация кнопок на CSS3

Второй на очереди — это сервис по онлайн генерации кнопок. С помощью него вы сможете:

  • Подобрать нужный размер для кнопки;
  • Сделать сразу 3 вида кнопок — простой режим, наведение (hover) и нажатие;
  • Подобрать цвет, тень, свечение, прозрачность как кнопки, так и текста на ней;
  • Ну и в конце, получить готовый код, который надо просто добавить в файл CSS и HTML.

Генерация кнопок на CSS3

В общем, очень полезный сервис, для любого верстальщика. Вам теперь не придется в ручную подбирать цвета, высоту и размер кнопок, теперь всё это можно делать онлайн — пользуйтесь!

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

В мыслях ещё очень много идей и скорей всего в ближайшее время я что-нибудь новенькое прикручу :). На этом всё, спасибо за внимание, пользуйтесь сервисами и рассказывайте друзьям.