Как сделать баннер в html и 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; >> 

Название заповедника 
Статус
 

Как видите, разметка очень простая. Есть общий родитель с классом .container, в него будут вложены наши плашки — блоки .section.

В каждом из блоков есть место под заголовок и описание.

Нам остается скопировать и вставить блоки еще 4 раза и внести нужные нам данные.

2. Стили

Со структурой нашей страницы разобрались. Теперь пора перейти к самому интересному. Начнем писать стили!

Для начала пропишем общие стили для страницы и нашего родительского блока с классом .container.

html, body margin: 0; 
max-width: 100%; 
height: 100%;
>.container display: flex; 
justify-content: center; 
align-items: center; 
height: 100vh; 
width: 100vw;
>

Как вы можете заметить, мы будем строить нашу страницу при помощи технологии flexbox. Обязательно убедитесь, что все нужные вам браузеры поддерживают ее. Проверить поддержку разных версий браузера можно по ссылке.

Если вы еще не знакомы с единицами измерения vh и vw, то я советую вам почитать о них подробнее. Если коротко, то 1vh = 1% высоты окна брузера, а 1 vw = 1% ширины окна браузера. В отличии от процентов, эти единицы измерения всегда рассчитываются от размеров окна браузера.

Исходя из этой логики наш баннер всегда будет во всю ширину и высоту браузера.
Двигаемся дальше и зададим стили для каждой из наших плашек.

.section position: relative; 
height: 100%; 
align-items: center; 
justify-content: center; 
box-sizing: border-box; 
text-align: center; 
flex: 1;
>

В этой части кода хочу обратить ваше внимание на то, как мы записываем свойство flex-grow. Мы не пишем его отдельно, а задаем значение в рамках шортката flex. Это связано с тем, что дальше мы будем менять его по наведению курсора, а свойство flex-grow напрямую не поддается изменениям при помощи transition.

Также мы задаем выключку по центру для текста, по центру же выравниваем наши элементы на странице.

Теперь оформим наши текстовые блоки.

.cont_title position: relative; 
margin: auto; 
width: 100%; 
height: 300px; 
text-align: center; 
margin-top: 30vh;
>.cont_title h1 text-transform: uppercase; 
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); 
font-size: 3.5vw; 
margin: 0; 
vertical-align: middle;
>.cont_title h3 text-transform: uppercase; 
font-size: 1.3vw;
>.cont_desc position: relative; 
display: block; 
text-align: center; 
width: 60%; 
height: auto; 
margin: auto; 
padding-top: 30px;
>.cont_desc p margin: 0; 
font-size: 20px;
>

Размер текста тоже зададим в относительных единицах измерения. Таким образом наш текст будет изменяться пропорционально размеру экрана и всегда будет отлично выглядеть.

А теперь начнем творить магию и вносить интерактив в нашу пока неподвижную страницу.

Реагировать на наведение курсора мыши мы можем при помощи псевдокласса :hover.

.section:hover flex: 1.8; 
transition: flex 0.4s;
>

Добавляем правило для каждого блока .section и «говорим», что при наведении курсора он должен менять значение свойства flex-grow с 1 на 1.8. Также добавим свойство transition и укажем, что меняться значение должно равномерно, на протяжении 4 десятых секунды. Это позволит сделать движение плавным, без рывка.

Далее зададим подобные свойства нашим текстовым блокам и укажем, что размер текста тоже должен меняться по наведению мыши.

.section:hover > .cont_title h1 font-size: 5vw; 
transition: font-size 0.4s;
>.section:hover > .cont_title h3 font-size: 1.5vw; 
transition: all 0.4s;
>

Теперь давайте спрячем нижней текст в секции и будем показывать его только по наведению.

Для этого в изначальные стили добавим свойство opacity со значением 0 (ноль) и напишем инструкцию по поведению текста в случае, когда курсор находится над соответствующей секцией.

Свойство transition-delay задает небольшую задержку перед началом анимации для того, чтобы текст начал проявляться когда блок уже немного «вырастет».

.cont_desc opacity: 0;
>.section:hover > .cont_desc opacity: 1; 
transition-delay: 0.5s; 
transition: opacity 0.8s; 
>

Теперь займемся украшением. Для начала зададим фон каждой из наших секций.

.section background-repeat: no-repeat; 
background-size: cover; 
background-position: center;
>.section:nth-child(1) background-image: url(“http://epic.spb.ru/demo/pic1.jpg");
>.section:nth-child(2) background-image: url(“http://epic.spb.ru/demo/pic2.jpg");
>.section:nth-child(3) background-image: url(“http://epic.spb.ru/demo/pic3.jpg");
>.section:nth-child(4) background-image: url(“http://epic.spb.ru/demo/pic4.jpg");
>.section:nth-child(5) background-image: url(“http://epic.spb.ru/demo/pic5.jpg");
>

Чтобы не задавать дополнительные классы мы воспользуемся псевдоклассами :nth-child(n) и напишем правила с фоновыми картинками. В изначальные правила для плашек добавим повторяющимся свойства background-position, background-size и background-repeat.

Становится очевидно, что черный текст на фоне красочных фотографий почти не читается. Изменим цвет текста на белый и подключим другой шрифт.

Для подключения шрифта мы воспользуемся css-правилом @font-face. Я выбрала красивый и поддерживающий русский язык шрифт Roboto Condenced.

@font-face font-family: ‘Roboto Condensed’; 
font-style: normal; 
font-weight: 400; 
src: local(“Roboto Condensed”), local(“Roboto Condensed-Regular”), url(https://fonts.gstatic.com/s/Roboto Condensed/v4/jObgDQiPUtmACAaaK3pMG6CWcynf_cDxXwCLxiixG1c.ttf) format(“truetype”);
>.cont_title h1 color: white; 
font-family: 'Roboto Condensed', sans-serif;
>.cont_title h3 color: white; 
font-family: 'Roboto Condensed', sans-serif;
>.cont_desc p font-family: 'Roboto Condensed', sans-serif; 
color: white;
>

Вот мы почти и закончили! Финишная прямая.

Добавим эффект затемнения для всех плашек кроме той, над которой сейчас находится курсор. Для этого воспользуемся свойством filter со значением brightness.

Обратите внимание, что это свойство может не поддерживаться некоторыми браузерами.

Не забудем про transition для .section — чтобы затемнение происходило плавно.

.container:hover > .section filter: brightness(22%);
>.container:hover > .section:hover filter: brightness(100%);
>.section transition: all 0.4s;
>

Поздравляю! Вы только что создали свой первый интерактивный баннер. При этом мы использовали только HTML и CSS. Никакого JavaScript.

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

Если вы хотите научится создавать html-страницы самостоятельно, то я жду вас на нашей программе «HTML-верстка: с нуля до первого макета».

Удачи всем солдатам оберточных войск!

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся бабле и оставляете свой комментарий. Спасибо!

По мотивам работы Simone Bernabè

Как сделать баннер для сайта самостоятельно

Вопрос о том, как сделать баннер — один из старейших в рекламном бизнесе рунета. Именно с баннеров, в частности, начинался промоушн в отечественном сегменте сети. В их славную историю мы не будем подробно вдаваться. Достаточно об основах баннерной рекламы мы рассказали в материалах Какие есть виды рекламы в интернете и Что такое медийная реклама в интернете. В этой статье мы опишем, как именно делать баннеры с учётом новых реалий. Основная задача баннеров — обеспечить приток аудитории. Заранее позаботьтесь о том, чтобы точно измерять и анализировать эффективность рекламы с помощью нашего инструмента:

Привлекайте, конвертируйте
и анализируйте ваших клиентов
Платформа омниканального маркетинга

Виды баннеров

• Графический баннер. Прямоугольное изображение, по клику ведущее на рекламируемую страницу.
• Слайдер. Несколько изображений, сменяющихся по таймеру и по клику.
• HTML-баннер. Интерактивный элемент, который может содержать несколько изображений, анимацию и HTML-код. Воспроизводит различные сценарии и ведёт на разные страницы в зависимости от клика в определённую область.

Все эти разновидности размещаются в стандартных контейнерах определённых размеров. Их насчитывается около двух десятков и все мы приводить не будем. Для примера: 160×600, 240×400, 240×600.

Также существует множество более сложных баннеров, таких как HTML MPU — несколько HTML-креативов, Expandable — растягивающийся, Rich-media — баннер, содержащий сразу несколько медиа-форматов, и другие. Их создают и размещают профессионалы. Такие баннеры, в основном, разрабатываются отдельно для каждого проекта, в отличие от перечисленных выше, пригодных для использования в массовых рекламных сетях, также называемых баннерными.

Размещение баннеров

Есть несколько способов разместить баннер в интернете. Раньше это была процедура сугубо ручная — на сайте создавался блок, в котором администратором размещался тот или иной креатив.

Сейчас вряд ли понадобится ручное размещение — в интернете работают баннерные сети. Блок на сайте не заполняется креативом силами модераторов. Это просто пустое поле, которое принимает контент от третьей стороны — рекламной платформы. Уже там у рекламодателей есть кабинеты, с помощью которых они загружают свои баннеры.

Далее баннер адресуется не какому-то заранее определённому сайту. Работает RTB-алгоритм. Real Time Bidding — технология, с помощью которой осуществляется целевой показ рекламных объявлений. В зависимости от того, к какому потребительскому сегменту принадлежит посетитель страницы, которому будет продемонстрирован баннер, аукцион подбирает для него наиболее подходящее объявление согласно настройкам рекламодателя. Последний в рабочем кабинете определяет, какие именно сегменты пользователей будут видеть его баннеры, а площадки управления данными подбирают ту аудиторию, которая по результатам анализа подходит под описание. В результате, происходит моментальный подбор баннера — только в последние доли секунды загрузки страницы становится понятно, какой именно баннер система отобразит в блоке.

Сквозная аналитика
Оценивайте эффективность всех рекламных кампаний в одном окне от клика до ROI
Вкладывайте в ту рекламу, которая приводит клиентов

Площадки

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

Баннерные сети

Размещение баннеров в интернете обеспечивает перечень баннерных сетей, у каждой из которых свои требования к креативам.

Например, Rotaban.ru всё ещё принимает flash-баннеры, но запрещает HTML.

Более серьёзный игрок Adfox.ru предлагает широкий выбор. Рекламодатель вправе разместить графические и HTML-баннеры. В первом случае допустимы форматы png, gif, jpg, svg и файлы весом не более 300 Кб.

Сеть GinAds.com работает с разнообразными форматами, например: Топлайн, Слайдер, Видео, Боттомлайн, Fullscreen, HTML-баннеры.

Яндекс.Директ

Яндекс внедрил целый набор баннерных размещений для рекламодателей.

• Летом 2016 в РСЯ помимо текстово-графических объявлений появилась возможность показывать сугубо графические баннеры.
• Медийная кампания позволяет показывать баннеры с оплатой за показы.
• Смарт-баннеры, работающие в сетях, основаны на фиде — списке товаров. На его основе генерируется динамический контент под конкретного пользователя.
• Баннеры на поиске — новое слово в контекстной рекламе. Теперь большой графический баннер можно разместить не только в сетях, но также на странице поисковой выдачи.

Google Ads

Более скромные, но вполне реальные возможности размещения баннеров предоставляет также Google. В рекламном кабинете можно обнаружить, что при создании кампании в КМС — контекстно-медийной сети — вам доступна загрузка баннеров. Тем не менее, в то время как графические объявления с анимацией и без разрешаются любому рекламодателю, HTML5 будет доступен только по запросу и при соблюдении требований:

• Аккаунт с хорошей репутацией в аспекте соблюдения правил и оплаты услуг;
• Общие затраты с момента запуска аккаунта — не менее 1000 долларов США.

Вместе с тем, летом 2018 Google по примеру других игроков создал формат адаптивных медийных объявлений. Эти объявления подстраиваются под пользователя с помощью динамического контента и могут быть созданы на основе фида.

Маркетинг

Читайте также:

Почему реклама ГК «ПИК», Модульбанка и «Альфа-Центр Здоровья» работает?

Почему реклама ГК «ПИК», Модульбанка и «Альфа-Центр Здоровья» работает?

Как сделать баннер для сайта и сетей

Начнём с того, что вам может понадобиться с наибольшей вероятностью.

Яндекс.Директ

• Графическое объявление

Создаётся в меню Текстово-Графических объявлений. Загрузка креатива возможна с устройства, а также предусмотрено создание баннера с помощью конструктора.

После задания настроек показов перейдите на шаг создания объявлений. Выберите вверху тип Графическое. В разделе Креатив появится выпадающий список. Из списка выберите подходящий вариант — например, Создать новые по шаблону.

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

Предусматривает те же шаги с той разницей, что в медийной кампании используются только графические объявления. В остальном, процесс загрузки и создания баннеров идентичен.

Для HTML-баннера необходимо подготовить zip-архив с кодом и креативами.

Необходимо пройти модерацию сайта, предварительно отправив документы: лицензии и сертификаты на продажу размещаемой и рекламируемой продукции.

Далее — загрузить фид — прайс-лист, составленный по шаблону.

Креатив создаётся предварительно пользователем. Требования:

• 120 Кб
• JPG, PNG или GIF
• 240×400 px

Google Ads

Создание адаптивного медийного объявления начинается с меню Объявления и расширения. В нём необходимо кликнуть иконку плюса и выбрать Адаптивное медийное объявление.

Можно загрузить до 15 изображений и до 5 логотипов. Требования:

• Горизонтальная ориентация. Соотношение сторон – 1,91:1; минимальный размер – 600 x 314. Не более 5 МБ.
• Квадрат. Соотношение сторон – 1:1 (квадрат), минимальный размер – 300 x 300. Не более 5 МБ.
• Логотип (необязательно). Соотношение сторон – 1:1 (квадрат), минимальный размер – 128 x 128 (рекомендуемый формат – 1200 x 1200). Не более 5 МБ.
• Избыточный текст. Не более 20 % изображения.

Сами объявления состоят из настраиваемых элементов:

• Короткий заголовок (как минимум один, до пяти; каждый — до 30 символов)
• Длинный заголовок (до 90 символов)
• Описание (как минимум одно, до пяти)
• Название компании или бренда
• Конечный URL
• Параметры отслеживания или специальные параметры (необязательно)
• Текст призыва к действию (необязательно)
• Рекламный текст и префикс цены

Баннер с нуля

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

Так, среди популярного программного обеспечения выделяют:

• Google Web Designer

Если у вас есть навыки вёрстки, то лучше самостоятельно прописать компоненты на CSS, javascript и HTML.

А еще, размещая баннеры с переходом на ваш сайт на сторонних ресурсах, установите скрипт коллтрекинга – он помогает отслеживать эффективность.