Introdução
Neste laboratório, os participantes explorarão a poderosa propriedade CSS border-radius para criar cantos arredondados visualmente atraentes em elementos web. Através de uma abordagem passo a passo, os alunos começarão configurando um documento HTML básico e aplicarão progressivamente várias técnicas de border-radius para entender como manipular os cantos dos elementos dinamicamente.
O laboratório cobre habilidades fundamentais, como criar cantos arredondados uniformes, aplicar diferentes raios a cantos individuais e experimentar variações de border-radius. Ao trabalhar com exemplos práticos, os alunos obterão experiência prática no uso de CSS para transformar elementos div de bordas afiadas em componentes de design suaves e arredondados, aprimorando o apelo estético das interfaces web.
Configurar o Documento HTML
Nesta etapa, você configurará o documento HTML básico para explorar as propriedades CSS border-radius. Criaremos um arquivo HTML simples que servirá como base para nossos experimentos de estilo CSS.
Abra o WebIDE e navegue até o diretório ~/project. Crie um novo arquivo chamado index.html clicando com o botão direito no explorador de arquivos e selecionando "Novo Arquivo".
Copie e cole a seguinte estrutura HTML no arquivo index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Border-Radius Exploration</title>
<style>
/* Adicionaremos nossos estilos CSS aqui nas próximas etapas */
</style>
</head>
<body>
<div class="container">
<h1>CSS Border-Radius Examples</h1>
<!-- Adicionaremos nossos elementos div aqui nas próximas etapas -->
</div>
</body>
</html>
Este documento HTML básico fornece uma estrutura simples para nossa exploração de border-radius CSS. Vamos detalhar os componentes-chave:
- A declaração
<!DOCTYPE html>garante que o navegador use o padrão HTML mais recente - As tags
<meta>ajudam com a codificação de caracteres e o design responsivo - Incluímos uma tag
<style>interna onde adicionaremos nosso CSS nas etapas subsequentes - O
<body>contém uma div container que usaremos para nossos exemplos
Saída de exemplo ao abrir este arquivo em um navegador:
CSS Border-Radius Examples
Salve o arquivo e certifique-se de que ele esteja localizado em ~/project/index.html.
Aplicar Border-Radius Básico ao Elemento Div
Nesta etapa, você aprenderá como aplicar a propriedade border-radius básica para criar cantos arredondados em um elemento div. A propriedade border-radius permite que você crie cantos suaves e arredondados em elementos HTML com facilidade.
Abra o arquivo index.html no WebIDE. Dentro da tag <style>, adicione o seguinte CSS para criar uma div básica com cantos arredondados:
<style>
.rounded-box {
width: 200px;
height: 200px;
background-color: #3498db;
border-radius: 20px;
margin: 20px;
}
</style>
Agora, adicione uma div com a classe rounded-box dentro da seção <body> do seu HTML:
<body>
<div class="container">
<h1>CSS Border-Radius Examples</h1>
<div class="rounded-box"></div>
</div>
</body>
Vamos detalhar as propriedades CSS:
widtheheightdefinem o tamanho dadivbackground-colordá àdivuma cor sólidaborder-radius: 20pxcria cantos arredondados com um raio de 20 pixelsmarginadiciona algum espaço ao redor dadiv
Ao abrir este arquivo HTML em um navegador, você verá um quadrado azul com cantos arredondados. A propriedade border-radius aplica uma curva igual a todos os quatro cantos da div.
Saída visual de exemplo:
+--------------------+
| |
| Caixa azul com |
| cantos arredondados |
| |
+--------------------+
Experimente alterando o valor de border-radius para ver como ele afeta a curvatura dos cantos. Tente valores como 10px, 50px ou até 100px para ver diferentes efeitos de arredondamento.
Criar Divs com Diferentes Raíos de Canto
Nesta etapa, você aprenderá como criar divs com diferentes raios de cantos, dando a você mais controle sobre o arredondamento de cantos individuais. A propriedade border-radius pode ser usada para criar formas únicas e interessantes.
Atualize a seção <style> no seu arquivo index.html com o seguinte CSS:
<style>
.different-corners {
width: 250px;
height: 200px;
background-color: #2ecc71;
margin: 20px;
}
.top-left-corner {
border-top-left-radius: 50px;
}
.bottom-right-corner {
border-bottom-right-radius: 30px;
}
.mixed-corners {
border-top-left-radius: 40px;
border-bottom-right-radius: 20px;
border-top-right-radius: 10px;
border-bottom-left-radius: 60px;
}
</style>
Agora, adicione as divs correspondentes ao corpo do seu HTML:
<body>
<div class="container">
<h1>CSS Border-Radius Examples</h1>
<div class="rounded-box"></div>
<div class="different-corners top-left-corner"></div>
<div class="different-corners bottom-right-corner"></div>
<div class="different-corners mixed-corners"></div>
</div>
</body>
Vamos detalhar as diferentes aplicações de border-radius:
border-top-left-radius: 50pxarredonda apenas o canto superior esquerdoborder-bottom-right-radius: 30pxarredonda apenas o canto inferior direito- A
divmixed-cornersdemonstra como você pode definir diferentes raios para cada canto independentemente
Saída visual de exemplo:
+--------------------+
| Caixa verde com |
| arredondamentos |
| variados |
+--------------------+
Experimente alterando os valores em pixels para ver como diferentes raios de cantos criam formas únicas. Você pode usar várias unidades como pixels (px), porcentagens (%) ou até mesmo usar valores diferentes para os raios horizontal e vertical.
Explorar Propriedades Individuais de Raio de Canto
Nesta etapa, você se aprofundará nas propriedades individuais de raio de canto e aprenderá como criar cantos arredondados mais complexos e precisos usando diferentes unidades e técnicas.
Atualize a seção <style> no seu arquivo index.html com o seguinte CSS:
<style>
.individual-radius {
width: 300px;
height: 200px;
background-color: #e74c3c;
margin: 20px;
}
.elliptical-corners {
border-top-left-radius: 50px 25px;
border-top-right-radius: 25px 50px;
border-bottom-right-radius: 40px 20px;
border-bottom-left-radius: 20px 40px;
}
.percentage-corners {
border-top-left-radius: 30%;
border-bottom-right-radius: 30%;
}
</style>
Adicione as divs correspondentes ao corpo do seu HTML:
<body>
<div class="container">
<h1>CSS Border-Radius Examples</h1>
<div class="individual-radius elliptical-corners"></div>
<div class="individual-radius percentage-corners"></div>
</div>
</body>
Vamos explorar as novas técnicas de border-radius:
Cantos Elípticos:
- Use dois valores para cada canto:
border-radius: raio-horizontal raio-vertical - Cria uma curva semelhante a uma elipse em vez de um círculo perfeito
- Exemplo:
border-top-left-radius: 50px 25pxcria uma curva assimétrica
- Use dois valores para cada canto:
Cantos baseados em Porcentagem:
- Use porcentagens para criar raios de canto responsivos e proporcionais
border-top-left-radius: 30%arredonda o canto com base no tamanho do elemento- Ótimo para criar designs adaptáveis
Saída visual de exemplo:
+--------------------+
| Caixas vermelhas |
| com arredondamentos|
| únicos |
+--------------------+
Experimente alterando os valores e unidades do raio para ver como eles afetam a aparência do elemento.
Experimentar Variações de Border-Radius
Nesta etapa final, você explorará técnicas avançadas de border-radius que podem criar formas únicas e criativas usando CSS. Demonstraremos como o border-radius pode ser usado para criar designs geométricos complexos.
Atualize a seção <style> no seu arquivo index.html com o seguinte CSS:
<style>
.creative-shapes {
width: 250px;
height: 250px;
margin: 20px;
background-color: #9b59b6;
}
.circle {
border-radius: 50%;
}
.leaf-shape {
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.complex-shape {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
</style>
Adicione as divs correspondentes ao corpo do seu HTML:
<body>
<div class="container">
<h1>CSS Border-Radius Creative Shapes</h1>
<div class="creative-shapes circle"></div>
<div class="creative-shapes leaf-shape"></div>
<div class="creative-shapes complex-shape"></div>
</div>
</body>
Vamos explorar essas variações criativas de border-radius:
Círculo Perfeito:
- Use
border-radius: 50%para criar um círculo perfeito - Funciona tornando o raio igual à metade da largura/altura do elemento
- Use
Forma de Folha:
- Arredonde seletivamente cantos específicos para criar formas orgânicas
border-top-left-radius: 50%cria um canto curvo
Forma Assimétrica Complexa:
- Use a sintaxe avançada
border-radius: horizontal / vertical border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%cria uma forma única e assimétrica
- Use a sintaxe avançada
Saída visual de exemplo:
+--------------------+
| Formas roxas |
| com border-radius |
| criativo |
+--------------------+
Experimente alterando os valores percentuais e observando como eles transformam a forma do elemento.
Resumo
Neste laboratório, os participantes aprendem a criar cantos arredondados usando as propriedades border-radius do CSS por meio de uma exploração passo a passo. O laboratório começa configurando um documento HTML básico com uma tag de estilo interna, fornecendo uma base para experimentos de estilização CSS. Os participantes começam criando uma estrutura HTML simples e, em seguida, aplicam progressivamente as técnicas de border-radius aos elementos div.
A jornada de aprendizado inclui a aplicação básica de border-radius para criar cantos suaves, a experimentação com diferentes raios de canto e a exploração das propriedades individuais de raio de canto. Ao trabalhar com exemplos práticos, os participantes ganham experiência prática na manipulação de formas de elementos usando CSS, compreendendo como o border-radius pode transformar a aparência visual dos elementos da página da web com técnicas de estilização simples e intuitivas.
