CSS3 Border: Trabalhando com bordas em CSS3
Veja nesta aula as propriedades (border-radius, box-shadow e border-image) das CSS3 para aplicar efeitos visuais às bordas dos elementos das páginas web.
CSS Border: Propriedades border-radius, box-shadow e border-image
Olá pessoal, no artigo de hoje iremos ver algumas das propriedades das CSS3 para se trabalhar com as bordas de certos elementos. Ao final desse artigo, o leitor deverá compreender e estar apto a utilizar as propriedades border-radius, box-shadow e border-image, inseridas na versão 3 das CSS.
Muita gente ainda não sabe que é possível criar box’s com cantos arredondados, utilizar efeitos de sombreados sem usar nenhum tipo de imagem, com apenas CSS3. Também é possível pegar uma linda borda feita no seu editor de imagem preferido, como o Photoshop, e usá-la em seu site como borda de alguma coisa.
Até o lançamento desta última versão das folhas de estilo, aplicar efeitos um pouco mais detalhados nas bordas dos elementos era uma tarefa consideravelmente cansativa e improdutiva. Por exemplo, para se obter um elemento com bordas arredondadas, era necessário criar várias imagens para dispô-las em cada canto do elemento. Um exemplo ilustrativo disso é mostrado na Figura 1.
No exemplo acima, como vemos, seriam necessárias oito imagens para formar as bordas do elemento central.
Como veremos a seguir, a propriedade border-radius permite fazer a mesma coisa de forma mais prática e principalmente mais correta. Utilizando CSS, não serão necessárias requisições ao servidor para obter imagens para formar o layout do elemento.
border-radius
De nome sugestivo, esta propriedade define uma borda arredondada de acordo com o valor fornecido, que indica o raio de uma circunferência teoricamente posicionada nos vértices do elemento e a partir da qual se obtém o efeito desejado. Posta desta forma a definição pode ser um pouco complicada, mas veremos a ideia ilustrada nas figuras a seguir, facilitando o entendimento.
Primeiramente é necessário compreender o conceito de raio da circunferência, que pode ser definido como um segmento de reta que liga o centro desta até sua borda. Como a circunferência é uma figura simétrica nas duas dimensões, pode-se afirmar que qualquer segmento de reta que ligue seu centro a sua borda terá o mesmo comprimento, o qual será igual ao raio. A Figura 2 ilustra o conceito de raio.
De que forma isso se aplica à definição da borda arredondada com CSS? Suponha que definimos a propriedade border-radius de uma div igual a 25px. O desenho da borda é feito através do posicionamento de uma circunferência de raio igual a 25px nas extremindades superiores e inferiores direita e esquerda da div, conforme mostra a Figura 3.
O resultado final seria, então, o exibido na Figura 4.
É claro que no dia-a-dia não nos atemos a fazer toda essa análise gráfica, porém, é importante saber exatamente o que estamos fazendo quando utilizamos um certo recurso.
A propriedade border-radius pode ser definida de duas formas: definindo um valor único para todos os vértices (pontas) ou especificando individualmente o valor de cada vértice. As listagens a seguir exemplificam o uso de cada uma destas formas.
Listagem 1: Definição de border-radius geral.
<html>
<head>
<title>Trabalhando com Bordas em CSS3</title>
<style type="text/css">
#div1{
width:100px;
height:100px;
border:solid 1px;
border-radius:20px;
}
</style>
</head>
<body>
<div id="div1"/>
</body>
</html>Listagem 2: Definição de border-radius individual.
<html>
<head>
<title>Trabalhando com Bordas em CSS3</title>
<style type="text/css">
#div1{
width:100px;
height:100px;
border:solid 1px;
border-radius:0px 20px 0px 20px;
}
</style>
</head>
<body>
<div id="div1"/>
</body>
</html>Os resultados são mostrados na Figura 5.
Na definição de valores individuais, a ordem dos vértices é a seguinte:
- Superior esquerdo
- Superior direito
- Inferior direito
- Inferior esquerdo
