28 de setembro de 2007

Cantos arredondados com CSS

Usar cantos arredondados em elementos esta se tornando moda. Mesmo sem usar a propriedade border-radius, que será implementada somente no CSS 3, existe uma técnica de criar elementos com cantos arredondados usando css.



Para dominar essa técnica é importante conhecer as propriedades background e content; e os pseudo-elementos :before e :after. Tudo pronto? Vamos começar!



CSS



.div:before {
background: transparent url(top-right.png) scroll no-repeat top right;
margin-bottom: -20px;
height: 30px;
display: block;
border: none;
content: url(top-left.png);
padding: 0;
line-height: 0.1;
font-size: 1px;
}

Nesse primeiro código, utilizamos a propriedade background para inserir uma imagem no canto superior direito, e a
propriedade content para inserir uma imagem antes do elemento, ou seja, no canto superior esquerdo.



.div:after {
display: block;
line-height: 0.1;
font-size: 1px;
content: url(bottom-left.png);
margin: 0 0 -1px 0;
height: 30px;
background: white;
background: transparent url(bottom-right.png) scroll no-repeat bottom right ;
padding: 0;
}

Parecido com o código anterior, mas nesse inserimos as imagens nos cantos inferiores (esquerdo e direito).



Referencias: Rounded corners in CSS
Tags:

0 comentários: