» »

Красивая ленточки с текстом изображение CSS3


Красивая ленточки с текстом изображение CSS3

Здесь идет как скрипт и как изображение, это просто на картинке видим что то вреде надпись в красивом дизайн. И вот здесь вы можете понять как это можно сделать и тем украсить свой интернет портал. Так как часто встречается на ресурсах изображение и на ней ленточка, что ее украшает или просто что то написано по теме. Методы различные могут быть, но одно точно это оригинально. Но хочется уже добавить, что вся работа будет заключаться средствами CSS3 и не каких больше дополнений.
Вариант №1
Красивая ленточки с текстом на css
HTML
Код

<div class="visual">
<img src="http://zornet.ru/images/screenshot1.jpg">
<a href="http://zornet.ru/" class="corner"><span> </span>Zornet.ru/</a>
</div>  

CSS
Код

<style>
a {
text-decoration: none;
cursor: pointer;
}
/* Стили базового блока с картинкой */
.visual{
  margin:0 auto;
  position: relative;
  width: 300px;  
}
/* Стили картинки внутри блока */
.visual img {
  float: left;
  width: 100%;
  border: 1px solid #cacaca;
  box-shadow:2px 2px 5px #333030;
}
/* Стили ленты */
.corner {
height: 0px;
border: 14px solid rgba(12, 151, 0, 0.67);
border-right-color: transparent;
box-shadow: -0px 5px 5px -5px #000;  
font: 12px/0 'PT Sans', arial, sans-serif;
color: #fef;
top: 9px;
left: -9px;
position: absolute;  
padding: 0 14px 0 5px;
z-index: 1;  
}
/* Меняем цвет текста ленты при наведении*/
.corner:hover{
  color: #fff;  
}
/* Стили нижнего уголка ленты */
.corner span {
content: "";
position: absolute;
top: 13px;
left: -14px;
width: 0;
height: 0;
text-decoration: none;
border-top: 9px solid transparent;
border-left: 9px solid transparent;
border-top-color: rgba(0, 151, 0, 0.9);  
}
</style>

Вариант №2
Красивая ленточки с текстом для сайта ucoz
HTML
Код

<div class="visual">
<a href="###">
<img src="http://zornet.ru/images/screenshot2.jpg"></a>
<a href="http://zornet.ru/" class="corner"><span> </span>Zornet.ru/</a>
</div>  

CSS
Код

a {
text-decoration: none;
cursor: pointer;
}
/* Стили блока с картинкой */
.visual{
  margin:0 auto;
  position: relative;
  width: 300px;  
}
/* Стили картинки внутри блока */
.visual img {
  float: left;
  width: 100%;
  border: 1px solid #cacaca;
  -webkit-box-shadow: 4px 4px 8px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 4px 4px 8px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 4px 4px 8px 0px rgba(50, 50, 50, 0.75);  
}
/* Стили ленты */
.corner {
background: rgba(170,78,184,0.85);  
box-shadow: -0px 5px 5px -5px #000;
color: #fff;
position: absolute;  
font: 12px/26px 'PT Sans', arial, sans-serif;
z-index: 1;
top: 9px;
left: -9px;
padding: 0 24px 0 24px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
/* Стили уголка ленты */
.corner span {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
text-decoration: none;
border-top: 9px solid transparent;
border-left: 9px solid transparent;
border-top-color: #8b3c97;  
}  
</style>

Источник: http://dbmast.ru
13.03.2016 Просмотров: 591 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Angerfist
Angerfist 13.03.2016 21:431
0
Во 2 варианте в CSS я забыл написать вначале <style>
Kosten
Kosten 13.03.2016 21:502
0
Angerfist, но не буду исправлять, так можно просто прописать в стилях, и ваше первый пост если чего прочтут.

Не чего просто все переписал, в ток же направление, просто было скопировано, а так материал очень хороший и как видно проверен.
Сопрано
Сопрано 13.03.2016 22:233
0
Эту ленту придется убирать и адаптировать под мобильный аппарат, но это дела нескольких минут, а так красиво смотрится.
tsakonter
tsakonter 13.03.2016 22:274
0
Так можно выводить и поставить оператор на время когда на сайте появился, но лучше сделать под категорий, особенно на кино сайте.
csretven
csretven 13.03.2016 23:285
0
А так если бы не бордер, то можно было поставить здесь на главну., смотрелось прекрасно.
avatar