Projetando uma fita com CSS

Aprenda a projetar uma fita usando apenas os recursos do CSS, evitando o excesso de imagens do seu site e reduzindo o tamanho dos arquivos. Este tutorial pertence ao Tutorial Lounge, e foi feito pela Anupama Rao.

Projetando uma fita com CSS

CSS

 #container { padding: 50px; } #title { background: #ee212f; width: 500px; height: 50px; color: #fff; font-size: 18px; text-align: center; position: relative; top: -20px; } #title span { position: relative; top: 13px; } .ribbon { background: #ee212f; width: 100px; height: 50px; } .ribbon-right { border-color: #ee212f white #ee212f #ee212f; border-style:solid; border-width:25px; width:0; height:0; position: relative; } .ribbon-left { border-color: #ee212f #ee212f #ee212f white; border-style:solid; border-width:25px; width:0; height:0; position: relative; } .left { float: left; } .right { float: right; } .clear { clear: both; } .ribbon-right-below { position: absolute; top: 79px; left: 679px; border-color: #ee212f #80020a; border-style:solid; border-width:0 0 21px 25px ; width:0; height:0; } .ribbon-left-below { position: absolute; top: 79px; left: 200px; border-color: #ee212f #80020a; border-style:solid; border-width:0 25px 21px 0; width:0; height:0; } 

Código para fazer a fita funcionar

 <div id="container"> <div class="ribbon-left left"></div> <div class="ribbon left"></div> <div id="title" class="left"> <span>Criando fita com CSS</span> </div> <div class="ribbon left"></div> <div class="ribbon-right left"></div> <div class="clear"></div> </div> <div class="ribbon-right-below"></div> <div class="ribbon-left-below"></div> 

Você pode usar este tutorial usando sua criatividade. Pode usar a fita em cabeçalhos, rodapés, menus, etc. Sejam criativos!

O blog Pink Skull Design tem autorização do Tutorial Lounge, para reproduzir este código.

Bella Felix

facebooktwitterlinkedin

Cursando Design Gráfico, blogueira, pseudo-escritora, viciada em RPG e animes, desenha e devora livros. Autora dos blogs Pink Skull Design e The Black Element.