- Делаем рекламный баннер для сайта на CSS
- 15 CSS Banners
- Author
- Links
- Made with
- About a code
- Banner Ad
- Author
- Links
- Made with
- About a code
- Responsive Banners
- Author
- Links
- Made with
- About a code
- Banners
- Author
- Links
- Made with
- About a code
- Banner Animation: Video Game Images
- Author
- Links
- Made with
- About a code
- Animated Scrolling Banner
- Author
- Links
- Made with
- About a code
- SVG Geometric Sale Banners
- Author
- Links
- Made with
- About a code
- CSS-Tricks-Netlify-Banner
- Author
- Links
- Made with
- About a code
- Responsive Horizontal Banner Using CSS Backgrounds
- Author
- Links
- Made with
- About a code
- Summer CSS Banner Ad
- Author
- Links
- Made with
- About a code
- Holidays Banner
- Author
- Links
- Made with
- About a code
- SVG Banner AD
- Author
- Links
- Made with
- About a code
- Pure CSS Animated Ad Banner
- Author
- Links
- Made with
- About a code
- High Performance Django Ad
- Author
- Адаптивные баннеры на HTML5 и CSS3
- Новый формат баннеров
- Как же этого достичь?
- Время небольшой демонстрации
- Новое соглашение о размерах баннеров
- Изменение размера iframe’а при помощи CSS медиа-запросов
- Отслеживание (трекинг) показов и кликов
- Хранение размеров баннера в мета-тегах
- Подводя итог вышесказанному
- Скромное мнение переводчика
Делаем рекламный баннер для сайта на CSS
Приветствую всех, кто оказался на страницах SerBlog.ru. В сегодняшнем небольшом уроке мы с вами будем делать рекламный баннер для сайта размером 468 на 60 пикселей с использованием только CSS и без картинок. Прошу заметить, что я уже делился со своими читателями баннером для сбора подписчиков на сайте. Для чего это нужно? Этот баннер, что стоит выше с использованием изображения в формате GIF имеет достаточно большой объем, почти 64 кб. А что если ваша страница и так весит очень много и не желательно ее перегружать дополнительной графикой. Вот как раз для этого и можно использовать CSS баннер. CSS код весит гораздо меньше картинки и в своем объеме не превысит и трех килобайт. Итак, начнем. Для начала напишем HTML разметку. И наш будущий баннер должен будет уместиться в одну, максимум в две строчки.
div class="banner"> a href="#" title="">Ваша рекламаa> div>
Теперь напишем код CSS. Здесь тоже можно экспериментировать. Например установить другой цвет или подключить свой шрифт.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
.banner{ width:468px; /* Ширина */ height:60px; /* Высота */ background:#ccffff; /* Цвет фона */ margin:0 auto; /* Выравнивание */ display:block; /* Делаем блоком */ text-align: center; /* текст по центру */ font:bold 32px Arial; /* Стиль текста */ border: 2px solid #666; /* Рамка вокруг */ } a { display: block; height: 60px; padding: 9px 0 0; width: 468px; text-decoration:none; color: #660000; } .banner:hover { background: #66CCCC; /* Цвет фона при наведении */ } a:hover { color: #006600; /* Цвет текста при наведении */ }
Такой баннер удобней всего размещать в шапке сайта. Ссылка с него может вести как на другие ваши проекты, так и на партнерские программы. Отличным местом для подобного рекламного баннера будет и конец или начало статьи.
15 CSS Banners
Collection of free HTML and CSS banner code examples from Codepen and other resources.
Author
Links
Made with
About a code
Banner Ad
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Responsive Banners
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Banners
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Banner Animation: Video Game Images
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Animated Scrolling Banner
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
SVG Geometric Sale Banners
SVG geometric sale banners with simple jQuery & CSS animations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
CSS-Tricks-Netlify-Banner
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Responsive Horizontal Banner Using CSS Backgrounds
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Summer CSS Banner Ad
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Holidays Banner
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
SVG Banner AD
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Pure CSS Animated Ad Banner
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
High Performance Django Ad
Experimenting with ads for lincolnloop.com’s book titled «High Performance Django». Super simple, nothing fancy.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Адаптивные баннеры на HTML5 и CSS3
Адаптивный веб-дизайн — значительное достижение для всего Интернета. Мы больше не скованы давно устаревшей моделью «печатной страницы» со статическим содержимым, разбитым на области фиксированного размера. Сегодня Интернет способен жить, дышать и приспосабливаться, заполняя всё пространство, доступное на экранах различных устройств, начиная от мобильных телефонов — и вплоть до огромных видеодисплеев. Это то, какой и предполагалась Глобальная сеть.
Но есть небольшая проблема. Веб-сайты зачастую содержат баннерную рекламу и традиционные баннеры, не обладающие особой гибкостью. Как flash-, так и GIF-баннеры имеют фиксированные размеры, из-за чего несовместимы с современной адаптивной вёрсткой. Нам необходим новый метод создания баннерной рекламы. Нам нужны «адаптивные» баннеры.
Новый формат баннеров
- HTML-реклама доступна повсеместно, а семантическая разметка сделает её подходящей для скрин-ридеров;
- текст, изображения, видео, скрипты и формы — всё это может быть использовано в баннере точно так же, как и на любой веб-странице;
- при необходимости баннеры могут задействовать динамические сценарии и базы данных на серверной стороне;
- в баннер могут быть внесены изменения уже после его размещения;
- файл (набор файлов) HTML-баннера может иметь весьма скромный размер;
- banner serving, по существу, сводится к веб-хостингу;
- веб-разработчикам не нужно изучать что-либо новое — все технологии остаются теми же, что и при обычной веб-разработке;
- и, конечно, при помощи CSS3 медиа-запросов можно заставить HTML5-рекламу «подстраиваться» под любые размеры — ведь именно такое поведение мы ожидаем от адаптивных баннеров!
Как же этого достичь?
Во-первых, баннер создается как резиновая HTML5-страница. Мы наполняем её текстом, изображениями, ссылками на требуемую страницу, украшая всё это при помощи CSS3. Во-вторых, такой баннер может быть размещен на любом веб-сайте посредством плавающего фрейма iframe. Есть одна хитрость, задействующая CSS3 медиа-запросы чтобы сделать динамическими размерности iframe’а, и вскоре я расскажу о ней… Однако, по большому счёту, это всё!
Время небольшой демонстрации
Вот пример HTML5-баннера популярного формата 125 x 125 px («квадратная кнопка»). А вот пример того же баннера с измененной шириной. Обратите внимание, как этот баннер ведет себя при изменении размеров окна браузера. Изящно, не правда ли? 🙂
Новое соглашение о размерах баннеров
Адаптивная вёрстка требует, чтобы элементы страницы имели переменную ширину, поэтому баннеры тоже должны придерживаться этого соглашения. Высота в адаптивной разметке не столь важна, т.е. мы может выбрать любое необходимое нам значение высоты. Но это не значит, что наш баннер «завязнет» на этом значении — мы можем определить множество значений для любого баннера!
Для сохранения обратной совместимости адаптивные баннеры должны иметь те же значения высоты, что и традиционные. Теоретически мы можем создать баннеры, работающие с любой шириной/высотой, но их слишком сложно конструировать или тестировать. Я предлагаю отталкиваться от минимальной ширины в 88 px и придерживаться следующего набора стандартных высот:
- микро полоса (88 x 31)
- кнопка 2 (120 x 60)
- половина длинного баннера (234 x 60)
- длинный баннер (468 x 60)
- кнопка 1 (120 x 90)
- горизонтальный (ведущий) длинный (728 x 90)
- квадратная кнопка (125 x 125)
- вертикальный баннер (120 x 240 *Достаточно близко!)
- всплывающий квадрат (250 x 250)
- прямоугольник средней величины (300 x 250)
- вертикальный прямоугольник
- небоскрёб (120 x 600)
- широкий небоскрёб (160 x 600)
- объявление на полстраницы (300 x 600)
Самым замечательным является тот факт, что 14 общепринятых форматов баннеров сводятся всего к семи, причём все они могут быть представлены всего одним HTML5-баннером! В добавок, мой демо-баннер занимает менее 25k вместе со всеми составляющими (HTML, CSS и JPG-изображение).
Опробуйте эти новые форматы в моём приложении для проверки адаптивных баннеров — с его помощью вы можете тестировать и свои собственные баннеры. Измените размер окна браузера чтобы увидеть, как все они «приспосабливаются».
Изменение размера iframe’а при помощи CSS медиа-запросов
Иногда может потребоваться, чтобы ваш баннер адаптировался ещё и по высоте — достичь этого можно путем изменения размера iframe’а при помощи CSS медиа-запросов. Я обнаружил, что лучший способ сделать это — назначить высоте и ширине iframe’а значение 100% и обернуть его div’ом со специальным набором размеров в CSS. Вот как это выглядит:
/* default height */ #ad < height:60px; >@media only screen and (height:90px) < /* 90 pixels high */ #ad < height:90px; >> @media only screen and (height:125px) < /* 125 pixels high */ #ad < height:125px; >>
Откройте CSS-файл моего адаптивного баннера, чтобы рассмотреть рабочий пример.
Отслеживание (трекинг) показов и кликов
Ещё одна замечательная особенность HTML5-баннеров состоит в том, что их можно отслеживать в Google Analytics — как и обычный веб-сайт. Фактически, мы получаем намного больше данных, чем от типичной системы показа рекламы. Вы можете надежно отследить не только количество показов баннера (banner impression tracking), но и рефереров, браузеры, разрешения экранов, мобильные устройства, популярные страны/города и много чего ещё!
Кроме того, задачу отслеживания количества кликов по баннеру можно легко решить, воспользовавшись одним из множества бесплатных сервисов сокращения ссылок. Лично я предпочитаю bit.ly. Если ваш баннер содержит большое количество ссылок, вы сможете отследить их по отдельности. Только не забудьте добавить target=»_top» в гиперссылки, чтобы реклама «вышла» за пределы фрейма, полностью захватив окно браузера.
Хранение размеров баннера в мета-тегах
Адаптивные баннеры можно заставить поддерживать любой набор размеров, но, чтобы не прочёсывать CSS в поисках поддерживаемых значений высоты, я предлагаю записывать их в теге META. Взгляните на пример:
Это хорошая практика, потому как тег META является машиночитаемым. В некоторых случаях для корректного отображения вашему браузеру может понадобиться узнать альтернативные размеры.
Подводя итог вышесказанному
Для адаптивной вёрстки нужна баннерная реклама с переменной шириной, я и считаю, что HTML5 подходит для этого как нельзя лучше. При помощи маленького CSS-трюка мы можем создать баннер, который один способен принимать все распространённые в настоящее время форматы. Скачайте пример моего баннера и попробуйте сами написать что-то подобное. Не забудьте протестировать ваше творение в моём приложении для проверки адаптивных баннеров. Если вы хотите разместить адаптивный баннер в своём блоге или на веб-сайте, просто скопируйте нижеприведенный код (только установите нужный размер):
Свяжитесь со мной, если у вас есть любые предложения или багфиксы. У меня не было возможности протестировать всё в IE… У меня сын, которому всего 11 дней, и 20-месячная дочь, поэтому у меня не так много свободного времени… Невероятно, но мне всё же удалось дописать эту статью!
Скромное мнение переводчика
Некоторые достаточно критично относятся к внедрению HTML5 (связки HTML5+CSS3+JavaScript) в различные области разработки: создание баннеров, игровая индустрия и проч. И я не могу не согласиться, что сегодня существует достаточно проблем, связанных с производительностью (CSS3 Transition, JavaScript), отсутствием достаточно мощных дизайнерских инструментов (Adobe Flash vs Adobe Edge) или необходимостью изучения и разработки новых технологий, приёмов и подходов. Но лично для меня очевидно, что все эти проблемы некритичны, поэтому, с учётом темпа развития всего и вся в IT, остается лишь немного подождать.
P.S. В HTML5 для тега iframe добавлен атрибут sandbox, позволяющий накладывать ограничения на содержание фрейма. Возможно, этот факт поможет сгладить ту волну паранойи, которая иногда охватывает iframe. Правда, с поддержкой в разных браузерах пока слабовато (проверить можно тут).