Yahoo! Blog User Interface (YUIBlog)

Truques CSS fronteira com caixas Colapsados

Março 8, 2011 em 3:23 pm por Thierry Koblentz | Em CSS 101 e Projeto e Desenvolvimento | 8 Comentários

Esses truques ajudarão você a alcançar projetos sem recorrer ao uso de imagens, CSS3 gradiente ou marcação estranha. Por desmoronar caixas com zero line-height e height valores, podemos exibir conteúdo fora da caixa de conteúdo, para além das fronteiras.

Bi-cor de fundo

Este exemplo não inclui IE 6/7 soluções alternativas (verificar o código fonte desta página de demonstração para correções do IE).

 .parent { display:inline-block; text-align: center; border: 1px solid #cecece; } .child { display:inline-block; line-height: 0; height: 0; border-top: 1em solid #ffc; border-bottom: 1em solid #fdcf46; padding:0 .6em; vertical-align:bottom; } <ul id="menuBar-A"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

Pontos e tubulações entre os itens da lista

Este exemplo mostra corretamente em navegadores IE após algumas correções simples.

 ul.one, ul.two { margin-left:0; display:inline-block; *display:inline; zoom:1; height:12px; line-height:12px; padding:0; } li { float:left; display:inline; height:2px; line-height:2px; position:relative; top:.3em; } ul.two {border-left:1px solid #333;} ul.one li {border-left:2px solid #333;} ul.two li {border-right:2px solid #333;} ul.one li.first-child, ul.two li.last-child { border:0; } a { color:#000; padding:.4em .9em; *position:relative; } <div id="menuBar-B"> <ul class="us"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> </ul> <ul class="ourOffer"> <li class="services"><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> </div> 

Triângulos esquerda e apontando para a direita

Este exemplo não inclui IE 6/7 soluções alternativas (verificar o código fonte desta página de demonstração para correções do IE).

 #box { line-height: 0; height: 0; border: .4em solid transparent; border-left-color: #333; border-right-color: #333; padding: 0 .3em; display: inline-block; } <ul id="menuBar-C"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

IE 6 e transparência fronteira

IE 6 não suporta a palavra-chave " transparent "para a cor da borda. Quando você usa esse valor, o IE 6 desenha uma borda preta.

A correcção para este é a utilização do filtro croma que exibe uma cor específica do conteúdo do objecto como transparente. Por exemplo, para criar uma seta para a direita apontando você poderia usar esta regra:

 #Box { height: 0; width: 0; border: 10px solid transparent; font-size: 0; _border-color: pink; _filter: chroma(color="pink"); border-left-color: #333; } 

A declaração font-size é outra solução para o IE 6. É para garantir que este navegador não aumentar a altura da caixa.

Parem as prensas eu aprendi um truque novo (obrigado Chungho Fang):

A magia [para criar transparência na fronteira IE] é definir 'border-style', quer tracejada ou pontilhada

---

É isso aí! Este é apenas mais uma maneira de usar as fronteiras para alcançar-imagem menos design.

Leitura complementar

• Um Estudo de polígonos regulares
• slantastic
• Slants

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!