Красивый эффект ленты (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». Также будут очень благодарна!

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

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

Leave a Reply