Проблема...
На многих сайтах студий, дизайнеров, да и просто причастных к вебу людей, можно увидеть скриншоты сайтов в красивой рамке браузера.
И, почти всегда эти рамки являются частью картинки, и если необходимо добавить ещё одно изображение или заменить название в адресной строке, то нужно открывать какой-нибудь графический редактор и добавлять плашки сверху, снизу, сбоку. Так было ровно до сегодняшнего дня.
...и решение!
Вандер Браузер — это обёртка для скриншотов. С помощью него можно легко и просто разместить на своем сайте макет, картинку, фотографию или любую другую графику в красивой рамке браузера.
Отличительная особенность Вандера — его неприхотливость к изображениям и окружающей его вёрстке. Он масштабируется в зависимости от ширины изображения и занимает мало места в коде (особенно когда CSS вынесен отдельно). Однако это ещё не всё. Можно настроить внешний вид браузера — поменять цветовую гамму самого браузера и тени, чтобы он хорошо смотрелся на любом фоне и в любом дизайне.
WonderBrowser.ru
Пользоваться генератором очень просто, достаточно указать ссылку на изображение и получить готовый код. Остальные параметры (название, адресная строка, цвет, тень, прозрачность...) заполняются по желанию.
Код можно получить в двух форматах: «всё в себе» и «код отдельно — стили отдельно». При первом варианте получается небольшая простынка кода, но ей удобно пользоваться, если нет доступа к CSS, или же тег style запрещён в вашем WYSIWYG-редакторе.
Второй вариант более удобен тем, что html-код получается небольшим, за счёт того, что весь CSS вынесен отдельно. (Только не забудьте убрать лишние цифры из id #brow.)
Как работает генератор?
Тут всё просто.
- Главное и основное — это URL с изображением, без него кнопка с получением кода не заработает.
- Дальше идёт проверка на валидость полученной ссылки и получение реального размера изображения.
- Скрипт убирает с изображения все стили размеров и ждёт пока погрузится хотя бы один пиксель.
- Как только получены её реальные размеры по ширине — картинка масштабируется до размеров экрана, а браузер будет растягиваться до реальных размеров изображения.
В этот момент начинается генерация кода.
Для работы с цветом используются два конвертера. В большинстве браузеров цвет содержится в RGBa, но, к примеру, в IE он будет передаваться в HEX. Первый конвертер преобразовывает цвет в HEX, а полученное значение передается обратно в текстовое поле, затем второй конвертер конвертирует его в RGBa, для того, чтобы можно было использовать альфа-канал.
В естественной среде обитания
Вандербраузер уже работает в разделе «Портфолио» на нашем сайте. Например, здесь и здесь.
PS и NB
А еще есть jQuery-плагин и им, конечно, пользоваться удобнее всего:
Проект будет обновляться добавляться новые клёвые штуки, а пока будем рады услышать от вас критику, пожелания, найденные баги.
Автор записи: Евгений Булгаков
