As Cascading Style Sheets (CSS) linguagem de marcação ganhou em CSS3 muitos elementos novos que permitem rival em exibição visual através de programação de um site feito com imagens. Novos elementos do CSS3 incluem triângulos e cantos arredondados, o que, antes dessa atualização, eram difíceis de criar . Estas características tornam simples para criar um efeito da fita , mesmo para um novato no mark-up. A fita é essencialmente um a vários triângulos, uma caixa , e um efeito de sombra . Esses componentes se conectam para criar uma fita 3D que você pode colocar mais de cabeçalhos, banners , ou em qualquer outro lugar em sua página web. Instruções
1

Criar um cabeçalho ou título de tag . Por exemplo, se você quer que seu primeiro cabeçalho em sua página para dizer "Cabeçalho ", o seu mark-up apareceria como : " .

Cabeçalho

" Sempre fechar uma tag HTML com um barra invertida.
2

Dê a sua tag HTML os estilos que você quer com CSS. Inclua pelo menos a sua posição, tamanho e cor. Por exemplo, referenciar a sua tag

, seu CSS mark-up ficaria assim :

h1 {position : absolute; width: 20%; padding: 10px ; background- color: # 999; }

Faça cada linha de CSS mark-up uma linha separada. Comece e termine cada afirmação com suportes abertos e fechados. " position: absolute " significa a posição do elemento é absoluta e não muda , não importa o que mais está acontecendo na página. A largura é definido como 20 por cento da tela ou o bin a tag h1 é definido dentro de , como um " div " ou " mesa". O preenchimento dá a tag h1 algum espaço para respirar extra. O background-color define a cor em todo o texto.
3

Criar um triangular ", depois de " pseudo- elemento para acrescentar ao seu tag de cabeçalho. O "depois" pseudo- elemento é novo no CSS3 e permite que você coloque um elemento diretamente após a outra. Torná-lo um triângulo configurando mais de uma de suas fronteiras para transparente. A sua marcação após o seu tag

iria ficar assim :

h1 : after { position: absolute ; left: 0 ; superior : 100%; border-width : 10px 10px ; border-style : solid ; border- color: # 666 # 666 transparente transparente; }

a posição eo estilo de esquerda define o triângulo no canto inferior esquerdo do elemento h1 . Os estilos de topo e de fronteira definir o tamanho do triângulo. O estilo border-color faz o bloco aparecem como um triângulo e as -cores de fronteira que aparecem são mais escuras do que a cor do cabeçalho , criando um efeito 3D , como se o bloco de cabeçalho é acentuadamente dobrar para trás como uma fita .

4

Adicione mais efeitos com elementos do triângulo para finalizar o look fita do seu cabeçalho. Posicione estes últimos triângulos no início do seu cabeçalho e no final , por isso a fita tem um olhar flag -like. Seu CSS mark-up agora aparece em toda como :

h1 {position : absolute; width: 20%; padding: 10px ; background- color: # 999; }

h1 : after { position: absolute ; esquerda: 0px; superior : 100%; border-width : 10px 10px ; border-style : solid ; border- color: # 666 # 666 transparente transparente; }

h1: antes {position : absoluto; direita: 0px; top : 0px; border-color : # fff transparente transparente transparente; }

h1: antes {position : absolute; esquerda: - 30px ; top : 12px ; border-width : 20px 10px ; border- color: # 999 # 999 # 999 transparente; }

o primeiro " : antes de " elemento cria um efeito bandeira no lado direito do cabeçalho. A segunda " : antes de " elemento cria um estilo bandeira da esquerda caiu lado do cabeçalho

.