Красивый эффект ленты (Ribbon Effect) для блоков на Вашем сайте

Различные блоки на Вашем сайте можно очень красиво оформить при помощи этого эффекта. Эффект называется – Ribbon (или по-русски – Лента). Эта лента как бы опоясывает блок, привлекая к нему внимание и придавая очень стильный вид. А делается такая лента при помощи Css и в этом уроке я покажу Вам как…

дополнительные материалы к урокам демо версия урока

На конечный результат Вы можете посмотреть нажав на иконку «Демо» чуть выше.

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

Давайте начнем!

Создаем красивый Ribbon Effect для элементов веб страницы

Ribbon эффект для веб страницы

1. Для этого примера я создам html файл (это будет HTML5 документ), а также файл таблицы стилей (файл с расширением .css). В моем примере они будут лежать в одном каталоге.

Html файлу я дам имя «ribbon.html», а файл таблицы стилей назову «style.css» (кстати, все эти файлы Вы можете найти в исходниках к данному уроку).

2. Откройте созданный файл «ribbon.html» в том редакторе, которым Вы пользуетесь. Для начала пропишем самые основные теги документа и подключим файл таблицы стилей. Код должен выглядеть следующим образом:



<!doctype html> <html> <head> <meta charset="windows-1251"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Ribbon Effect</title> </head> <body> </body> </html>

3. Пока это просто пустой документ. Давайте поместим в него все необходимые элементы.

Весь последующий код для этого файла будет располагаться между тегами «body».

Итак, сразу после открывающего тега «body» мы пропишем тег «section», которому дадим идентификатор с именем «wrapper».

В этой секции будет содержаться весь наш блок вместе с лентой.

Внутри тега «section» мы создадим «div» с классом «conteiner». В нем будет содержаться весь наш контент, который и будет опоясан лентой.

На данном этапе добавьте между тегов «body» следующий код:



<section id="wrapper"> <div class="container"> </div> </section>

4. Теперь внутрь дива с классом "container" будем добавлять элементы для создания нашей Ленты и элемент для основного контента, который будет располагаться под этой лентой.

Для начала добавим центральный элемент ленты (центральный прямоугольник), присвоим ему класс для того, чтобы потом работать с его стилями, а также внутри этого элемента пропишем тег заголовка «h2», так как на нашей ленте предполагается некая надпись.



<div class="rectangle"> <h2>Ribbon Effect</h2> </div>

Сразу после этого кода пропишем код для загнутых уголков нашей ленты (для левого и правого). Каждому из них нужно задать свое имя класса.



<div class="left_tri"></div> <div class="right_tri"></div>

А после этого кода пропишем код основного контента блока (того, что будет внизу под лентой). Ему мы зададим идентификатор "content" и внутри пропишем содержимое. В моем примере это один заголовок и два абзаца, один из которых содержит ссылку.



<div id="content"> <h2>This is Jast CSS3 Effect</h2> <p>Create web site whith us!!!</p> <p><a href="http://website-create.ru" target="_blank">WebSite-Create.ru</a></p> </div>

Вот и все. С html файлом мы закончили все действия. Если вдруг Вам что-то осталось непонятным, то скачайте исходные материалы и посмотрите структуру этого файла.

Если сейчас открыть его в браузере, то ничего особенного мы не увидим. Картина будет вот такая:

веб страница без применения css

Но скоро это изменится, потому что сейчас мы займемся стилями нашей веб страницы.

5. Итак, откройте файл «style.css». Он уже подключен к нашему html документу, но пока что он пустой.

Для начала я пропишу некоторые стили для тега «body» (если Вы внедряете этот эффект на Ваш веб сайт, то у Вас уже будут свои стили для этого тега), а также стили для заголовка «h2».

Здесь в общем-то ничего особенного. Я просто задам фоновый цвет страницы, то как должен отображаться шрифт и какой цвет иметь.



body{background:#f1f1f1; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; color:#999;} h2{font-style:italic; font-weight:normal; line-height:1.2em;}

После этих небольших преобразований наша страница приобретает следующий вид:

задание основных стилей веб странице

6. Теперь придадим стилей секции с идентификатором «wrapper». Этот тег мы расположим так, чтобы он находился по центру страницы с небольшим отступом сверху (50 пикселей), а также зададим ему ширину.



#wrapper{ margin:50px auto 0px auto; width:400px;}

Теперь мы поработаем над стилями дива с классом "container", который является нашей основной областью с контентом. Нам нужно позиционировать элемент так, чтобы он был установлен относительно его исходного места (position:relative). Также центруем его при помощи свойства «margin» со значениями «0 auto».

Придадим элементу фон белого цвета, создадим для него рамку со скругленными углами и придадим блоку тень при помощи свойства «box-shadow» (первые 2 значения у этого свойства определяют сдвиги для тени по горизонтали и вертикали, третье – радиус размытия и последнее - цвет тени и ее непрозрачность).

Еще одно свойство, которое нам нужно применить к этому элементу – это «z-index». Дело в том, что в нашей работе нам нужно, чтобы один элемент накладывался на другой (наша лента на блок с контентом). Если элементы имеют свойство «position» со значениями absolute, fixed или relative, то для таких элементов мы можем использовать свойство «z-index» для наложения одного элемента на другой, тем самым создавая эффект трехмерного пространства. Вы увидите этот эффект, когда мы придадим стилей ленте.

А пока что - код для блока с контентом:



.container{position:relative; margin:0px auto; width:350px; background:#fff; border-radius:10px; box-shadow:0px 0px 8px rgba(0,0,0,0.3); z-index:90;}

Если мы обновим страничку в браузере, то увидим следующее:

стили для блока с контентом

7. Теперь поработаем со стилями нашей ленты. Она состоит из трех частей: из центральной части, из левого уголка и из правого уголка. Сейчас мы поработаем над стилями центральной части и над заголовком, который на ней написан.

Нам нужно придать фоновый цвет ленте, ширину и высоту. Позиционируем элемент также, как и элемент с основным контентом (position:relative). Далее при помощи свойств «left» и «top» установим нужное нам положение элемента. Сделаем обтекание элемента по левому краю. Придадим элементу тень при помощи свойства «box-shadow» и установим «z-index» на значение 100, что позволит нам быть уверенными в том, что лента располагается над контейнером с контентом.



.rectangle{background:#6d6e72; height:50px; width:380px; position:relative; left:-15px; top:30px; float:left; box-shadow:0px 0px 4px rgba(0,0,0,0.55); z-index:100;}

Теперь займемся стилями заголовка.

Заголовку придадим размер, цвет, отступы. Создадим для него тень при помощи свойства «text-shadow» и сделаем выравнивание текста по середине.



.rectangle h2{margin:0px; font-size:30px; color:#fff; padding-top:6px; text-shadow:1px 1px 2px rgba(0,0,0,0.2); text-align:center;}

Вот такая картина у нас должна получиться на данном этапе:

устанавливаем свойства для ribbon

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

Рамка представляет собой 4 стороны, которые расставлены вместе, как 4 маленьких треугольника и мы можем указать каждому цвет и прозрачность при помощи свойства «border-color». Таким образом, указав одной из сторон цвет, а остальные сделав прозрачными (transparent), мы можем создать треугольник.

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

Далее позиционируем элемент (relative). Это позиционирование позволяет нам сдвигать элемент при помощи свойств «top» и «left» до тех пор, пока угол ни окажется в нужном нам месте (мы должны видеть только его половину).

И наконец, для того, чтобы убедиться, что наш угол находится под лентой мы применяем «z-index».

Вот код для левого уголка:



.left_tri{border-color:transparent #333 transparent transparent; border-style:solid; border-width:15px; height:0px; width:0px; position:relative; left:-30px; top:65px; z-index:-1;}

создаем углы для Ribbon

Для правого уголка все идентично. Поменяется только та сторона рамки, которой нужно придать цвет и позиция элемента (значения для свойств «top» и «left»), ведь этот угол нам нужно сдвинуть к правому краю:



.right_tri{border-color:transparent transparent transparent #333; border-style:solid; border-width:15px; height:0px; width:0px; position:relative; left:350px; top:35px; z-index:-1;}

Ribbon Effect – Эффект Ленты

9. Теперь осталось совсем немного – задать некоторые стили блоку с идентификатором «content». В этом блоке у нас находится весь контент, который будет написан под лентой.

Зададим для него отступы, размер заголовка, отступы и размер для абзацев.

Также я задам стили для ссылки когда она неактивна и когда мы наводим на нее курсор мыши.

Вот мой код:



#content{padding:60px 25px 35px 25px;} #content h2{font-size:20px; margin:0px;} #content p{margin:0px; padding-top:10px; font-size:14px; line-height:22px;} #content p a {margin:0px; color:#c4591e; text-decoration:none;} #content p a:hover{text-decoration:underline;}

А выглядеть наш готовый блок с Ribbon эффектом будет вот так:

Готовый блок с Ribbon эффектом

Я протестировала этот пример в четырех браузерах у себя на компьютере (Internet Explorer, Google Chrome, Opera, Firefox), а также в Safari с iPad – везде он смотрится красиво, а главное одинаково : )

Такой блок очень здорово подойдет, если Вы хотите привлечь внимание Ваших посетителей к какой-то информации на сайте, да и смотрится он, согласитесь, довольно красиво.

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

Я думаю, у Вас все прекрасно получится!

Жду Ваших комментариев и буду им очень благодарна!

Если этот урок Вам понравился поделитесь им с друзьями с помощью кнопок социальных сетей ниже или нажмите на кнопку «+1». Также будут очень благодарна!

Если Вы еще не подписаны на обновление блога, то обязательно подписывайтесь, буду регулярно радовать Вас новыми полезными материалами!

Всего Вам доброго, Хорошего Настроения и До Новых Встреч!

Создай свою интерактивную фото галерею

Где брать графику и фото на сайт

Ошибка 404. Как не потерять из-за нее посетителей сайта

Понравилась статья? Поделись с друзьями!


Не нашли того, что искали? Воспользуйтесь расширенным поиском!

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail:


Комментарии к этой статье:

Комментарий добавил(а): Николай
Дата: 2014-01-07

Спасибо за ваш урок. После нескольких часов работы с кодом, я сумел подстроить его под свой сайт и успешно его применил. http://pasichnik.net.ua/krasa/recepty_masok/maska-na-oblyccja.html

Комментарий добавил(а): Админ Анна
Дата: 2014-01-08

Спасибо за отзыв. Я посмотрела, кстати, очень здорово у Вас получилось!

Комментарий добавил(а): Павел
Дата: 2015-02-04

Супер, большое спасибо

Добавить Комментарий:


Введите сумму чисел с картинки:

Почему стоит подписаться на обновления блога

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail: