CSS Meio círculo
Implementação de meio círculo
Uma sequência de implementação simples de tags HTML e CSS é aplicada junto com a propriedade de Radius de Fronteira do CSS. Abra o editor de texto e use o seguinte código para desenhar um meio círculo em uma página da web. Para a implementação de um meio círculo em HTML e CSS, usamos CSs internos declarados dentro da tag com as tags de abertura e fechamento. Comece com as tags HTML, abra a etiqueta da cabeça. Então, na primeira etapa, demos o título à página. Este nome de título aparecerá no topo da guia no navegador no momento da execução. Depois de fechar a etiqueta do título, declararemos a tag de estilo. Primeiro, declararemos a margem e o preenchimento da forma.
Diferença B/W Margem e preenchimento
Margem é o espaço ao redor do objeto que você deseja criar. Esta propriedade é usada para o ajuste do objeto na página, para seguir à esquerda ou direita, etc. É uma área transparente sem cor de fundo. Uma margem envolve a forma de todos os 4 lados.
Preenchimento é a parte presente entre o objeto criado e o conteúdo dentro do objeto. Este conteúdo pode ser uma forma, texto, etc. A propriedade de preenchimento especifica como um objeto fica dentro do contêiner. Este contêiner também contém uma cor de fundo. Aumentar ou diminuir o tamanho do preenchimento afeta o tamanho do conteúdo dentro dele.
Então, aqui dentro do código de estilo, declaramos margem e preenchimento como 0. Isso significa que usaremos os códigos de ajuste manualmente, declarando a altura e a largura de propriedade da forma. É necessário declarar essas propriedades como 0 em vez de eliminá -las do código porque é considerado automático se não for declarado como zero.
*Margem: 0;
Preenchimento: 0;
A terceira propriedade relacionada à forma é a cor branca de fundo. Esta é a cor padrão. Se você não mencionar, sempre será branco. Em seguida, usaremos o estilo da div. Div é um recipiente para contém alguns elementos dentro dele. Não tem nenhum efeito no layout nem no conteúdo até fornecermos qualquer estilo. Aqui, usamos muito efeito para o contêiner Div. Todos os efeitos da forma são aplicados ao recipiente de div para os ajustes. A posição do recipiente é considerada absoluta.
As duas propriedades básicas de forma são a localização e a direção da forma. Para ajustar a forma, usaremos os atributos superior e esquerda. 'Top' decidirá a distância da forma da borda superior da página da web. A parte esquerda mostra a distância da forma da borda esquerda da página. Ambas as propriedades são tomadas em porcentagem.
Topo: 20%;Esquerda: 10%;
O recurso de transformação é uma propriedade poderosa que é usada para girar, distorcer, dobrar ou traduzir o objeto. Um dos recursos mais utilizados é o recurso 'tradutor' que é usado para mover o objeto de um lugar para o outro. Ao criar um meio círculo, usamos dois valores de deslocamento da esquerda e o topo em porcentagem. Tomamos os dois valores com o sinal negativo para o ajuste.
Transformar: traduzir (-50%, -50%)Agora, usaremos alguns efeitos na forma que cria uma propriedade como sua altura e a largura. Ambas as propriedades são tomadas em pixels.
Altura: 100px;Largura: 200px;
Qual é a propriedade de Rádio de Fronteiras e por que é usada?
O raio da borda é a espinha dorsal de criar um círculo ou um semicírculo em html. Esta propriedade desempenha um papel vital para arredondar os cantos das bordas da fronteira de um objeto. Brincando com a fronteira e girando -os em direção ao centro é um círculo perfeito. Os parâmetros podem ser de 4 valores. A propriedade de Rádio de Fronteira é usada para dar o valor do raio da fronteira. Os 4 valores são as propriedades de comprimento, porcentagem, inicial e herdeira.
Esses 4 valores são especificados em uma ordem específica para formar um raio de uma borda:
- Superior esquerda
- Canto superior direito
- Canto inferior direito
- Inferior esquerdo
O raio da borda pode conter todos esses valores ou o personalizado removendo qualquer valor. Se o valor do canto inferior esquerdo for removido, o valor será o valor do canto superior direito da forma.
Radio de fronteira: 150px 150px 0 0;Para fazer um meio círculo, pegamos 2 valores como 150px, e os outros dois são declarados como zero. Se levarmos todos os valores como 150 ou qualquer outro número mais próximo a ele, a forma resultante seria um círculo completo ou um oval. Após esse alinhamento do raio, atribuímos a cor à forma vermelha. Agora, fecharemos a seção de estilo e a seção da cabeça também.
Dentro da seção corporal do código, declaramos uma div, apenas a abertura e as tags de fechamento para div são usadas aqui. Todo o estilo é declarado na seção de estilo do CSS.
Agora, salvaremos o código no editor de texto. Verifique se o arquivo formado deve ser salvo com o nome com uma extensão de HTML. Por exemplo, amostra.html é o arquivo, no qual estamos trabalhando.
Para executar o arquivo de texto, abra o arquivo selecionando a opção de 'Open-with' e selecionando qualquer navegador de sua escolha. Ao fazer isso, o ícone do arquivo será substituído pelo ícone do navegador.
Você verá que um meio círculo é formado com cor vermelha e os mesmos alinhamentos são realizados que declaramos.
Conclusão
Uma implementação de um meio círculo no CSS é realizada com uma breve introdução ao HTML e CSS. Um editor de texto simples e um navegador são responsáveis pela execução de tags HTML e CSS no arquivo. Usamos CSs internos para esse fim. Além disso, uma propriedade importante CSS que é a propriedade de Radius de fronteira também é definida aqui. Ao seguir esse recurso, um círculo é formado, só precisamos personalizar alguns valores dele. Todos os efeitos são declarados na seção CSS, a seção do corpo contém apenas o contêiner Div.