Я рад приветствовать вас снова на моем блоге по созданию своих веб сайтов PHPGURU. Сегодня создадим 2 варианта красивых ленточек для ваших сайтов, первую применим к заголовку, а именно к тегу <H1>, а второй поместим в блок div.
Когда мы создаем свой сайт сами то нам приходится все делать самостоятельно, создавать дизайн, верстать полностью свой уникальный шаблон. Хочется конечно каждому сделать свой сайт уникально красивым оригинальным и не похожим на все остальные типа сайты которые работают на бесплатных площадках или даже и на CMS. Хочу напомнить, что свой сайт это и есть создание своего уникального сайта, а не копирование, и создание одинаковых шаблонов.
Для этого мы сегодня разберём создание красивой ленточки RIBBON.
Разбираем исходные коды ленточки.
Код HTML
<h1 class="ribbon1"><strong>Здесь ваш текст</strong></h1>
Создали простой заголовок и дали ему класс ribbon1, это я для того чтобы стили не конфликтовали между собой, для более понятного просмотра и отображения на странице.
Переходим к просмотру реализации этого с помощью CSS3 технологий
Код CSS3
h1.ribbon1 {
position: relative;
display: inline-block;
font-family: sans-serif;
font-size: 2.1em;
margin: 0;
padding: 2px 0;
text-align: center;
background: #d64b4b;
background: -webkit-gradient(linear, left top, left bottom, from(#d64b4b), to(#ab2c2c));
background: -webkit-linear-gradient(top, #d64b4b, #ab2c2c);
background: -moz-linear-gradient(top, #d64b4b, #ab2c2c);
background: -ms-linear-gradient(top, #d64b4b, #ab2c2c);
background: -o-linear-gradient(top, #d64b4b, #ab2c2c);
background-image: -ms-linear-gradient(top, #d64b4b 0%, #ab2c2c 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="#d64b4b", EndColorStr="#ab2c2c");
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
}
h1.ribbon1:before,
h1.ribbon1:after {
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #c23a3a;
z-index: -1;
}
h1.ribbon1:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px;
box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px;
}
h1.ribbon1:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
-webkit-box-shadow: rgba(0, 0, 0, 0.4) -1px 1px 1px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) -1px 1px 1px;
box-shadow: rgba(0, 0, 0, 0.4) -1px 1px 1px;
}
h1.ribbon1 > strong {
display: inherit;
min-width: 100px;
margin: 0;
padding: 15px 30px;
color: #801111;
text-shadow: #d65c5c 0 1px 0;
border-top: 1px dashed rgba(0, 0, 0, 0.2);
border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.15),
inset 0px -1px 1px rgba(255, 255, 255, 0.15),
0px 1px 1px rgba(255, 255, 255, 0.1),
0px -1px 1px rgba(255, 255, 255, 0.15);
}
h1.ribbon1 > strong:before,
h1.ribbon1 > strong:after {
content: "";
border-color: #871616 transparent transparent transparent;
position: absolute;
border-style: solid;
bottom: -1em;
}
h1.ribbon1 > strong:before {
left: 0;
border-width: 1em 0 0 1em;
}
h1.ribbon1 > strong:after {
right: 0;
border-width: 1em 1em 0 0;
}
iframe { margin-top: 200px; }
CSS3 получается конечно много, но что поделать красота требует жертв. Это был пример создания ленточки с заголовком и как, я и обещал сделаем еще один в блоке div.
Смотрим пример реализации красивой ленточки в блоке div
Код HTML
<div id="box">
<div class="banner">
<div class="ribbon left"></div>
<p>Здесь ваш текст</p>
<div class="ribbon right"></div>
</div>
</div>
Здесь уже немного по сложней будет.
Разбираем CSS3 для красивой ленточки
Код CSS3
#box {
width: 600px;
margin: 10% auto;
padding: 0;
text-align: center;
position: relative;
}
.banner {
width: 500px;
height: 75px;
background: #eb751e;
margin-left: 50px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
border-top: 1px dashed #da5050;
border-bottom: 1px dashed #da5050;
}
.banner p {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 45px;
text-transform: capitalize;
color: #fff;
margin: 0;
padding: 8px;
text-shadow: 3px 3px 3px rgba(184,88,64,1);
}
.banner:before {
content: "";
position: absolute;
bottom: -20px;
left: 50px;
width: 0;
height: 0;
border-right: 70px solid #ca6418;
border-top: 0px solid transparent;
border-bottom: 20px solid transparent;
}
.banner:after {
content: "";
position: absolute;
bottom: -20px;
right: 50px;
width: 0;
height: 0;
border-left: 70px solid #ca6418;
border-top: 0px solid transparent;
border-bottom: 20px solid transparent;
}
.ribbon {
width: 120px;
height: 75px;
background: #eb751e;
position: absolute;
z-index: -2;
}
.ribbon.left {
top: 20px;
left: 0;
}
.ribbon.left:before {
content: "";
position: absolute;
left: -29px;
top: 0;
width: 0;
height: 0;
border-right: 30px solid #eb751e;
border-top: 0 solid transparent;
border-bottom: 37.5px solid transparent;
}
.ribbon.left:after {
content: "";
position: absolute;
left: -29px;
bottom: 0;
width: 0;
height: 0;
border-right: 30px solid #eb751e;
border-top: 37.5px solid transparent;
border-bottom: 0 solid transparent;
}
.ribbon.right {
top: 20px;
right: 0;
}
.ribbon.right:before {
content: "";
position: absolute;
right: -29px;
top: 0;
width: 0;
height: 0;
border-left: 30px solid #eb751e;
border-top: 0 solid transparent;
border-bottom: 37.5px solid transparent;
}
.ribbon.right:after {
content: "";
position: absolute;
right: -29px;
bottom: 0;
width: 0;
height: 0;
border-left: 30px solid #eb751e;
border-top: 37.5px solid transparent;
border-bottom: 0 solid transparent;
}
Надеюсь сегодняшний материал вам понравился и стал вам полезным. Больше объяснять нет смысла берем готовые коды вставляем на свои сайты и пользуемся.