Ленточки на CSS3

Простые ленточки созданные на чистом CSS с помощью псевдо-элементов :before и :after и палитры цветов adnroid ice cream sandwich.

Давайте посмотрим код.

HTML:

<div class="panel_1"></div>
<div class="panel_2"></div>
<div class="panel_2"></div>
<div class="panel_2"></div>
<!-- RIBBON GREY -->

<div class="ribbon_flag">19500</div>
<div class="ribbon_round">19500</div>
<div class="ribbon">19500</div>

<!-- RIBBON GREEN -->

<div class="ribbon_flag green" style="top:50px;left:282px;">19500</div>
<div class="ribbon_round green" style="top:120px;left:272px;">19500</div>
<div class="ribbon green" style="top:200px;left:272px;">19500</div>

<!-- RIBBON BLUE -->

<div class="ribbon_flag blue" style="top:50px;left:483px;">19500</div>
<div class="ribbon_round blue" style="top:120px;left:473px;">19500</div>
<div class="ribbon blue" style="top:200px;left:473px;">19500</div>

<!-- RIBBON RED -->

<div class="ribbon_flag red" style="top:50px;left:685px;">19500</div>
<div class="ribbon_round red" style="top:120px;left:675px;">19500</div>
<div class="ribbon red" style="top:200px;left:675px;">19500</div>

CSS:

.panel_1 {
    background:#f7fafa;
    width:150px;
    height:300px;
    border-radius:3px;
    border:1px solid rgba(0,0,0,0.15);
    box-shadow:5px 5px 10px rgba(0,0,0,0.1);
    float:left;
}

.panel_2 {
    background:#f7fafa;
    width:150px;
    height:300px;
    border-radius:3px;
    border:1px solid rgba(0,0,0,0.15);
    box-shadow:5px 5px 10px rgba(0,0,0,0.1);
    float:left;
    margin-left:50px;
}

/*================== RIBBON =========================*/
.ribbon_round {
font-size:1em;
position:absolute;
top:50px;
left:70px;

background-image: -o-linear-gradient(left , rgb(174,174,174) 35%, rgb(189,189,189) 63%, rgb(214,214,214) 96%);
background-image: -moz-linear-gradient(left , rgb(174,174,174) 35%, rgb(189,189,189) 63%, rgb(214,214,214) 96%);
background-image: -webkit-linear-gradient(left , rgb(174,174,174) 35%, rgb(189,189,189) 63%, rgb(214,214,214) 96%);
background-image: -ms-linear-gradient(left , rgb(174,174,174) 35%, rgb(189,189,189) 63%, rgb(214,214,214) 96%);

background-image: linear-gradient(left , rgb(174,174,174) 35%, rgb(189,189,189) 63%, rgb(214,214,214) 96%);  

   padding:15px 35px;
   color:#393939;
   text-shadow:-1px 1px 0 rgba(255,255,255,0.4);
   box-shadow:-10px 10px 20px rgba(0,0,0,0.1);
   -o-transition: all 0.05s ease;
   -ms-transition: all 0.05s ease;
   -moz-transition: all 0.05s ease;
   -webkit-transition: all 0.05s ease;
   transition: all 0.05s ease;
   border-radius:30px 0 0 30px;
}
.ribbon_round:after {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top:0;
   border-left: 20px solid #8f8f8f;
   border-bottom: 10px solid transparent;
   margin:33px 0 0 15px;
   -o-transition: all 0.05s ease;
   -ms-transition: all 0.05s ease;
   -moz-transition: all 0.05s ease;
   -webkit-transition: all 0.05s ease;
   transition: all 0.05s ease;
   }
/*================== RIBBON===================*/

.ribbon {
font-size:1em;
position:absolute;
top:200px;
left:70px;

background-image: -o-linear-gradient(left , rgb(174,174,174) 35%, rgb(189,189,189) 63%, rgb(214,214,214) 96%);
background-image: -moz-linear-gradient(left , rgb(174,174,174) 35%, rgb(189,189,189) 63%, rgb(214,214,214) 96%);
background-image: -webkit-linear-gradient(left , rgb(174,174,174) 35%, rgb(189,189,189) 63%, rgb(214,214,214) 96%);
background-image: -ms-linear-gradient(left , rgb(174,174,174) 35%, rgb(189,189,189) 63%, rgb(214,214,214) 96%);
background-image: linear-gradient(left , rgb(174,174,174) 35%, rgb(189,189,189) 63%, rgb(214,214,214) 96%);

   padding:15px 35px;
   color:#393939;
   text-shadow:-1px 1px 0 rgba(255,255,255,0.4);
   box-shadow:-10px 10px 20px rgba(0,0,0,0.1);
   -o-transition: all 0.05s ease;
   -ms-transition: all 0.05s ease;
   -moz-transition: all 0.05s ease;
   -webkit-transition: all 0.05s ease;
   transition: all 0.05s ease;
}
.ribbon:after {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top:0;
   border-left: 20px solid #8f8f8f;
   border-bottom: 10px solid transparent;
   margin:33px 0 0 15px;
   -o-transition: all 0.05s ease;
   -ms-transition: all 0.05s ease;
   -moz-transition: all 0.05s ease;
   -webkit-transition: all 0.05s ease;
   transition: all 0.05s ease;
   }

/*================== RIBBON FLAG ===================*/

.ribbon_flag {
   font-size:1em;
   position:absolute;
   top:120px;
   left:80px;

background-image: -o-linear-gradient(left , rgb(174,174,174) 35%, rgb(189,189,189) 63%, rgb(214,214,214) 96%);
background-image: -moz-linear-gradient(left , rgb(174,174,174) 35%, rgb(189,189,189) 63%, rgb(214,214,214) 96%);
background-image: -webkit-linear-gradient(left , rgb(174,174,174) 35%, rgb(189,189,189) 63%, rgb(214,214,214) 96%);
background-image: -ms-linear-gradient(left , rgb(174,174,174) 35%, rgb(189,189,189) 63%, rgb(214,214,214) 96%);
  background-image: linear-gradient(left , rgb(174,174,174) 35%, rgb(189,189,189) 63%, rgb(214,214,214) 96%);

   padding:15px 30px;
   color:#393939;
   text-shadow:-1px 1px 0 rgba(255,255,255,0.4);
   box-shadow:-10px 10px 20px rgba(0,0,0,0.2);
   -o-transition: all 0.05s ease;
   -ms-transition: all 0.05s ease;
   -moz-transition: all 0.05s ease;
   -webkit-transition: all 0.05s ease;
   transition: all 0.05s ease;
}
.ribbon_flag:after {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top:0;
   border-left: 20px solid #8f8f8f;
   border-bottom: 10px solid transparent;
   margin:33px 0 0 10px;
   -o-transition: all 0.05s ease;
   -ms-transition: all 0.05s ease;
   -moz-transition: all 0.05s ease;
   -webkit-transition: all 0.05s ease;
   transition: all 0.05s ease;
   }
.ribbon_flag:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top:24px solid #aeaeae;
   border-left: 15px solid transparent;
   border-bottom: 24px solid #aeaeae;
   margin:-15px 0 0 -45px;
    -o-transition: all 0.05s ease;
   -ms-transition: all 0.05s ease;
   -moz-transition: all 0.05s ease;
   -webkit-transition: all 0.05s ease;
   transition: all 0.05s ease;
}

/*=============================== COLORS =======================================*/

.green {
color:#496c02;

background-image: -o-linear-gradient(left , rgb(153,204,0) 22%, rgb(212,233,147) 100%);
background-image: -moz-linear-gradient(left , rgb(153,204,0) 22%, rgb(212,233,147) 100%);
background-image: -webkit-linear-gradient(left , rgb(153,204,0) 22%, rgb(212,233,147) 100%);
background-image: -ms-linear-gradient(left , rgb(153,204,0) 22%, rgb(212,233,147) 100%);
background-image: linear-gradient(left , rgb(153,204,0) 22%, rgb(212,233,147) 100%);
}

.green:before {
 border-top:24px solid #99cc00;
 border-bottom: 24px solid #99cc00;}
.green:after {
 border-left: 20px solid #669900;
   border-bottom: 10px solid transparent;
}

.blue {
color:#145469;    

background-image: -o-linear-gradient(left , rgb(51,182,229) 22%, rgb(135,212,240) 100%);
background-image: -moz-linear-gradient(left , rgb(51,182,229) 22%, rgb(135,212,240) 100%);
background-image: -webkit-linear-gradient(left , rgb(51,182,229) 22%, rgb(135,212,240) 100%);
background-image: -ms-linear-gradient(left , rgb(51,182,229) 22%, rgb(135,212,240) 100%);
background-image: linear-gradient(left , rgb(51,182,229) 22%, rgb(135,212,240) 100%);

}    

.blue:before {
 border-top:24px solid #33b6e5;
 border-bottom: 24px solid #33b6e5;
}

.blue:after {
 border-left: 20px solid #1f7794;
   border-bottom: 10px solid transparent;
}

.red {
color:#990909;    

background-image: -o-linear-gradient(left , rgb(255,68,68) 22%, rgb(254,121,121) 100%);
background-image: -moz-linear-gradient(left , rgb(255,68,68) 22%, rgb(254,121,121) 100%);
background-image: -webkit-linear-gradient(left , rgb(255,68,68) 22%, rgb(254,121,121) 100%);
background-image: -ms-linear-gradient(left , rgb(255,68,68) 22%, rgb(254,121,121) 100%);
background-image: linear-gradient(left , rgb(255,68,68) 22%, rgb(254,121,121) 100%);
}    

.red:before {
 border-top:24px solid #FF4444;
 border-bottom: 24px solid #FF4444;
}

.red:after {
 border-left: 20px solid #CC0000;
   border-bottom: 10px solid transparent;
}

А вот и пример:

Перевод статьи "Ribbons" с сайта "cssdeck.com", автор Bender_ASS.

Мы оставили в статье авторский вариант кода, но для практических задач имейте в виду, что префикс -ms- для наиболее популярных свойств CSS3 — таких как transition, animation, linear-gradient и т.п. — уже не нужен.

P.S. Это тоже может быть интересно:

CSS-выражения от контейнера для дизайнеров

«Родительскому селектору» :has(), скорее всего, запретят быть вложенным

День зимнего солнCSSтояния: новые публикации CSS и приятный сюрприз Safari

Если вам понравилась статья, поделитесь ей!

7 комментариев

sashka:

13.09.2012 в 13:15

Плохо, у меня в хроме(21, win7) разъезжаются слегка http://www.diigo.com/item/image/2wxkm/dpir

Ответить
1. psywalker:
  
  13.09.2012 в 13:31
  
  Да, решение надо чуть подпилить для всех браузеров. Есть такое дело.
  
  Ответить
keltanas:

13.09.2012 в 16:11

А вы не думали, что вместо того, чтобы писать столько CSS, было бы проще это сделать картинками? Вроде именно такой случай, когда CSS только ради CSS используется.
PS: У меня в FF тоже косяки присутствуют.

Ответить
1. psywalker:
  
  13.09.2012 в 16:34
  
  Сейчас уже картинки давно "не в моде". А потом статья представлена в виде урока, а вы уже сами можете выбирать или допиливать этот способ под свои нужды.
  
  Ответить
WeB XaSeR:

01.10.2012 в 10:33

Посмотрел в IE — и бедаа. "-ms-" для какой версии работает, 9-10?

Ответить
1. seva:
  
  01.10.2012 в 11:24
  
  10
  
  Ответить
2. SelenIT:
  
  01.10.2012 в 15:09
  
  Если -transform — то с 9. Если всё остальное (градиенты, transition и т.п.) — то см. редакторскую приписку в конце.
  
  Ответить