Как сделать банер для адаптивного сайта

Для сайта с адаптивным шаблоном нужны адаптивные баннеры. Сделать такой баннер проще всего с помощью векторного формата svg. Баннер будет подстраиваться под размеры контейнера, в котором он размещен. Приведем примеры таких баннеров. Вы можете менять размеры окна браузера, чтобы увидеть как меняются размеры баннеров и центрируется надпись. Вот рекламный баннер хостинга:

хостинг

Еще пример - баннер биржи для вебмастеров: продажа ссылок и продвижение сайтов:

хостинг

Еще один баннер - биржа для зарабатывания на вашем сайте:

хостинг

Для того, чтобы сделать такой баннер понадобился всего лишь следующий код svg-файла, который можно или сохранить куда-то или вставить прямо в код ссылки. Формат svg - векторный, поэтому баннер одинаково хорошо будет смотреться на экране любых размеров.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 739 200"> <rect width="100%" height="100%" fill="#D9EDF7"/><text x="369.5" y="115" font-size="60" 
font="Verdana, sans-serif" fill="white" text-anchor="middle">хостинг для сайта</text></svg>
И конечно же понадобится код ссылки:
<a href="http://studlab.com/" target="_blank" ><img border="0" src="файл.svg" /></a>
Очевидно, код баннера легко изменить - вписать свой текст, поменять цвет фона и букв. Можно изменить и пропорции.
Онлайн всего: 6
Гостей: 6
Пользователей: 0

STUDLAB Сообщить про опечатку на сайте