Различные блоки на Вашем сайте можно очень красиво оформить при помощи этого эффекта. Эффект называется – Ribbon (или по-русски – Лента). Эта лента как бы опоясывает блок, привлекая к нему внимание и придавая очень стильный вид. А делается такая лента при помощи Css и в этом уроке я покажу Вам как…
На конечный результат Вы можете посмотреть нажав на иконку «Демо» чуть выше.
И действительно этот эффект смотрится очень стильно и привлекает к себе внимание. Внутри блока Вы можете разместить все, что захотите. А теперь я покажу Вам как можно добиться такого эффекта, используя CSS3.
Давайте начнем!
Создаем красивый Ribbon Effect для элементов веб страницы
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 файлом мы закончили все действия. Если вдруг Вам что-то осталось непонятным, то скачайте исходные материалы и посмотрите структуру этого файла.
Если сейчас открыть его в браузере, то ничего особенного мы не увидим. Картина будет вот такая:
Но скоро это изменится, потому что сейчас мы займемся стилями нашей веб страницы.
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;}
Вот такая картина у нас должна получиться на данном этапе:
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;}
Для правого уголка все идентично. Поменяется только та сторона рамки, которой нужно придать цвет и позиция элемента (значения для свойств «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;}
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 эффектом будет вот так:
Я протестировала этот пример в четырех браузерах у себя на компьютере (Internet Explorer, Google Chrome, Opera, Firefox), а также в Safari с iPad – везде он смотрится красиво, а главное одинаково : )
Такой блок очень здорово подойдет, если Вы хотите привлечь внимание Ваших посетителей к какой-то информации на сайте, да и смотрится он, согласитесь, довольно красиво.
Когда Вы будете внедрять этот эффект в свой сайт или блог, то необходимый размер блока может отличаться от размера в примере, поэтому не забывайте экспериментировать с параметрами, чтобы получить наилучший результат.
Я думаю, у Вас все прекрасно получится!
Жду Ваших комментариев и буду им очень благодарна!
Если этот урок Вам понравился поделитесь им с друзьями с помощью кнопок социальных сетей ниже или нажмите на кнопку «+1». Также будут очень благодарна!
Если Вы еще не подписаны на обновление блога, то обязательно подписывайтесь, буду регулярно радовать Вас новыми полезными материалами!
Всего Вам доброго, Хорошего Настроения и До Новых Встреч!
 для блоков на Вашем сайте){kind=link}