Site Overlay

Border-radius CSS3

Todo elemento HTML é comparado a uma caixa, mas nem todos os elementos das nossas interfaces precisam ser quadrados. Em vez de se utilizar imagens a torto e direito, podemos utilizar o border-radius para arredondar os cantos dos seus elementos. A propriedade aceita até 4 valores, seguindo o modelo de outros como margin e padding, sendo a única diferença que o primeiro valor é referente ao canto superior esquerdo do elemento, seguindo em diante no sentido horário. Enquanto alguns cantos arredondados podem parecer apenas um pequeno detalhe estético, o border-radius consegue criar mais do que isso.

<h3 class=’tnt’>TNT</h3>

.tnt {

border-radius: 50%;

border: 5px solid #000;

height: 50px;

line-height: 50px;

text-align: center;

width: 50px;

}

No exemplo de código acima, podemos utilizar porcentagens e criar círculos ou elipses, independente do tamanho real do elemento. Fora isto, cada canto do elemento pode receber dois valores para definir exatamente qual será o raio utilizado para criar o efeito.

<span class=’counter’>37</span>

.counter {

background-color: #000;

border-top-left-radius: 25px 10px;

border-top-right-radius: 25px 10px;

color: white;

display: block;

font-size: 1.7em;

height: 50px;

line-height: 50px;

text-align: center;

width: 50px;

}

O exemplo acima é um caso de uso mais raro de se encontrar, visto que a maioria das aplicações de border-radius são perfeitamente circulares, e geralmente feitas para realçar detalhes de certos elementos, como botões, caixas de texto ou caixas de mensagens. O efeito de lápide, codificado no exemplo, é só mais uma demonstração do potencial do recurso.

4

Source: scriptcase / Border-radius CSS3

Comments

comments

Leave a Reply

Your email address will not be published.