Se você busca estilizar seu site, deixando-o mais apresentável para os usuários, é importante pensar em acrescentar uma border CSS. Também conhecida como borda aplicada no estilo em cascata, ela permite separar um espaço do layout de uma página.
O estilo de borda faz parte do conjunto de propriedades dos elementos HTML e serve para acrescentar um contorno ao redor do conteúdo. Ele compõe o “box model”, modelo de caixa CSS formado pelo conteúdo do elemento e as propriedades padding, border e margin.
Quer saber como funciona? Ao longo deste artigo, você vai saber o que é border CSS, seus tipos e como incluir no seu portal.
Para entender melhor, aqui você encontrará:
- O que é CSS?;
- O que é border CSS?;
- Propriedades da border CSS;
- O que é uma border radius?;
- Como montar a border CSS na prática?;
- Como escolher o melhor layout para blog?
O que é CSS?
CSS (Cascading Style Sheets) é uma linguagem de programação baseada em regras. Com ela, é possível definir regras especificando grupos de estilos aplicados em elementos visuais do seu site.
Como o próprio nome sugere, CSS funciona como uma folha de estilo composta por camadas (ou, em tradução livre, Folhas de Estilo em Cascata). Essa folha é usada para modificar a aparência de um site com marcação.
A linguagem nasceu com a necessidade de aprimoramento do HTML, que levou à criação de tags e atributos de estilo para essa linguagem. Mas, na prática, marcar todas as alterações de estilo no HTML, uma por vez, não era funcional. Foi daí que surgiu o CSS.
O que é border CSS?
Border CSS, ou bordas aplicadas no estilo em cascatas, é uma propriedade que adiciona um contorno em volta de um elemento HTML. Localizada entre o padding e a margin, ela pode ser aplicada em todos os lados de um elemento da página e tem características diferentes, como tamanhos, cores e estilos.
Glossário do border CSS
Para entender melhor a estrutura e a sintaxe da borda CSS, veja o glossário a seguir:
- url-imagem: endereço da imagem;
- slice: o quanto a imagem será aplicada na borda;
- outset: o quanto a área com a imagem poderá aparecer além do espaço da borda;
- width: o quanto a borda será preenchida com a imagem.
O width pode ser:
- Thin: para uma borda fina. Faz com que o valor da borda seja igual à 1px para ambos os lados;
- Medium: para uma borda média. Neste caso, temos o tamanho da borda referente à 3px para todos os lados;
- Thick: para uma borda grossa. Significa que o elemento terá o tamanho da borda igual à 5px em todos os lados.
- Length: é a unidade média CSS (px, pt, em, cm…)
Quais são as propriedades da border CSS?
A linguagem da border CSS é cheia de termos. Separamos o significado das propriedades, ou seja, aquilo que define as características das bordas de um elemento HTML.
Veja:
- fronteira: propriedade de um dos lados da borda em um comunicado;
- border: abreviação referente às quatro bordas;
- border-top: propriedades da borda superior;
- border-right: propriedades da borda direita;
- border-left: propriedades da borda esquerda;
- border-style: estilo de borda dos elementos;
- border-top-style: estilo da borda superior;
- border-bottom-style: estilo da borda inferior;
- border-left-style: estilo da borda esquerda;
- border-width: largura do elemento (também individualmente, ou seja, uma largura para cada lado da fronteira);
- border-top-width: espessura da borda superior;
- border-right-width: espessura da borda direita;
- border-bottom-width: espessura da borda inferior;
- border-color: cores visíveis;
- border-top-color: cor da borda superior;
- border-bottom-color: cor da borda inferior;
- border-left-color: cor da borda esquerda;
- border-bottom: propriedades da borda inferior.
Glossário das propriedades da border CSS
Border-color
A cor da borda pode ser definida por meio de diferentes sistemas de cores. Confira como funciona a indicação dessa propriedade:
- RGB: representadas pela função rgb (red, green, blue):
- RGBA: semelhante à RGB, mas contém parâmetro adicional para indicar opacidade;
- HSL: utiliza funções que indicam matriz, saturação e luminosidade;
- HSLA: semelhante à HSL, com adição da propriedade alpha para determinar transparência;
- Hexadecimais: representadas pelas tonalidades RR(red), GG (green) e BB (blue)
Border-Style
Os estilos de borda CSS aparecem nos seguintes formatos de códigos:
- none: sem borda, ou seja, nenhuma linha será desenhada ao redor do elemento. Ex: border-style: none;
- hidden: equivalente à none, isto é, existe uma borda no contorno do elemento, contudo, ela não aparecerá na página. Trata-se de um recurso para adicionar espaços a um elemento sem deixar a borda visível. Ex: border-style: hidden;
- dotted: borda pontilhada. É uma linha de pontos circulares ao redor do elemento. Ex: border-style: dotted;
- dashed: borda tracejada. É um estilo de linha pontilhada. Ex: border-style: dashed;
- solid: borda contínua. Corresponde a uma linha contínua em torno do elemento ou do lado indicado. Ex: border-style: solid;
- double: borda dupla: são duas linhas ao redor do elemento. Neste caso, o navegador faz um cálculo para estipular a espessura de cada linha. No entanto, a soma das duas linhas e o espaço entre elas correspondem ao valor definido na propriedade border-width. Ex: border-style: double;
- groove: borda entalhada. Este estilo gera um efeito de cor na borda, cuja aparência parece um botão pressionado. Ex: border-style: groove;
- ridge: borda em ressalto. No sentido contrário ao groove, o ridge tem um aspecto de botão elevado. Ex:border-style: ridge;
- inset: borda em baixo relevo. É um efeito aplicado em uma tonalidade mais escura que a cor definida e faz com que o elemento tenha a aparência levemente pressionada. Ex: border-style: inset;
- outset: borda em alto relevo. É um efeito inverso ao inset e faz com que o elemento tenha a aparência levemente elevada. Ex: border-style: outset.
O que é uma border radius?
Border radius é uma propriedade CSS que permite adicionar cantos arredondados a um elemento. Ela é usada para harmonizar os cantos de um elemento especificado, podendo ser aplicada a qualquer elemento HTML.
O uso mais comum para o raio da borda CSS é em cantos arredondados a uma div ou imagem.
A sua sintaxe é bem simples, parecida com outras como o padding, onde é possível definir um valor geral ou para todos os lados de uma só vez.
Observe o modelo de cada forma:
- border-radius: 25px: arredondamento em todos os cantos;
- border-radius: 25px 0px: arredondamento do canto superior esquerdo e o inferior direito;
- border-radius: 25px 0px 25px 25px: o canto superior não será arredondado.
A regra da border radius é a seguinte:
- Valor 1: Canto superior esquerdo
- Valor 2: Canto superior direito
- Valor 3: Canto inferior direito
- Valor 4: Canto inferior esquerdo
Como forma de decorar a sua página, os valores da border radius se aplicam iniciando no canto superior esquerdo e, em seguida, girando no sentido horário
Basicamente, você pode entender que os valores aplicados começam no canto superior esquerdo e giram no sentido horário, o que significa uma boa forma de decorar.
Tenha em mente que a propriedade border radius é muito útil, e saber utilizá-la pode ajudar demais.
É possível criar desde efeitos simples aos mais sofisticados, deixando o layout bem interessante.
Como montar a border CSS na prática?
Confira as propriedades unidas e como fica o texto para definição e/ou alteração da borda de um site:
- border: border-width border-style border-color (ou seja: tamanho da borda estilo da borda cor utilizada na borda)
No entanto, na hora de montar o texto, é preciso que a sintaxe de cada uma das propriedades seja feita de forma resumida.
Por exemplo: border: border-width border-style border-color” ficaria “border: 5px solid black”;
Para aplicar a largura da borda, é usado o atributo border-width. Veja como ficaria:
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Como escolher o melhor layout para blog?
Ao longo deste artigo, podemos perceber que a border CSS possibilita separar um espaço do layout da sua página. Mas, esse elemento só faz efeito de acordo com o tipo de página que você publicará.
Nesse sentido, é importante saber que tipo de layout você pode implementar no seu site para deixá-lo mais atraente e acessível aos seus usuários.
Saiba que você não precisa escolher modelos prontos, uma vez que é possível criar um de acordo com o perfil do seu público.
Veja os passos abaixo para melhorar a estética do seu portal:
Defina o objetivo do seu blog
Descubra inicialmente porque você deve criar conteúdos. A sua resposta influencia no desenvolvimento do seu site e na configuração do CSS border HTML.
Se a sua intenção é criar publicações para atrair consumidores a um restaurante, a dica é escolher cores mais quentes, como vermelho ou tons avermelhados.
Estude para o seu público
Por meio do Google Analytics, você pode descobrir quem acessa os seus conteúdos. Caso ainda não saiba, monte um perfil ideal, usando o Analytics instalado para conferir os dados disponíveis, e, assim, acompanhar e entender quem gosta do seu trabalho.
Busque referências
Procurar por inspirações é uma forma de se manter criativo e inovar seu layout.
Sendo assim, trabalhe sua visão empreendedora! Confira diversos blogs de segmentos iguais e diferentes, e utilize os pontos positivos para enriquecer o seu layout, e os negativos para corrigir ou evitar ideias.
Analise os recursos
Se chegou até aqui, imagino que já saiba qual tema irá abordar, bem como os objetivos e para quem deseja escrever.
Compreendendo estes pontos, analise o que você realmente precisa em matéria de recursos. Isso porque a estrutura dos blogs são semelhantes. A maioria publica os artigos em ordem cronológica inversa nas páginas, deixando os mais recentes no topo.
Pense no que deseja oferecer e em qual foi a arquitetura criada para entender se precisa de uma galeria de fotos com mais possibilidades, ou criar uma área do blog para destaques, filtros diferentes, entre outros recursos.
Desenhe a arquitetura do seu site
Use sua criatividade para desenhar o seu layout para blog. Você não precisa ter muitos dons artísticos, a ideia de montar um wireframe (rascunho do visual do seu blog) é fazer algo simples e fácil de visualizar mesmo.
Como criar sites com border CSS?
Agora que você já entendeu os conceitos iniciais para mudar o estilo da border CSS em um site, saiba que com o criador de sites da GoDaddy é possível montar um portal de forma intuitiva, clicando e arrastando elementos.
A GoDaddy traz para você:
- Centenas de modelos modernos e profissionais;
- Modelos elegantes, responsivos e compatíveis com dispositivos móveis;
- Consultoria baseada em I.A;
- Sites que incluem imagens profissionais gratuitas;
- Ferramentas integradas para SEO, mídia social e e-mail marketing.
Além disso, conheça o serviço de suporte da GoDaddy, você também consegue fazer alterações personalizadas ao obter um site em WordPress.
