CSS - Efeitos para DIVs (bordas e cores) - Kond Downs

Dicas Tutorial,

{[['']]}

Comecei a levar a sério programação para web (web designing) e como já sabia uns básicos de HTML comecei pelo CSS, que é tão simples quanto o HTML. Neste tutorial estou falando sobre o que nós podemos adicionar em uma classe para personalizar uma DIV (divisória) de textos ou imagens.

Bordas, cores do fundo (background) e alinhamento no CSS:

CSS na minha opinião chega a ser até mais fácil que HTML, e se você arranha no inglês ficará mais fácil ainda, afinal tudo nesta linguagem é em inglês. Abaixo vou listar as tags que iremos usar no código CSS e também explicarei para que elas funcionam:

border-style - Estilo da borda.

border-width - Tamanho (espessura) da borda.

border-color - Cor da borda.

text-align - Alinhamento do texto dentro da DIV.

background-color - Cor do fundo da div.

---

No arquivo CSS de seu template ou que você criou, para inserir uma classe coloque o seguinte dentro do código do CSS:

.nome-da-classe
{
comandos....
.................
................
}

O nome você pode colocar o que quiser desde que não seja igual a uma outra classe, onde coloquei comandos iremos colocar as tags para personalizar a nossa div:

border-style:

Este comando definirá o efeito que a borda terá, abaixo vai algumas que já usei:

solid; - Sem efeito, somente a borda com a cor desejada:

EFEITO SOLID

dotted; - borda rodeada de pontos, pontilhada:

EFEITO DOTTED

dashed; - borda rodeada de traços -:

EFEITO DASHED

grove; - borda com um estilo que não consigo explicar :D, veja abaixo a demonstração:

ESTILO GROVE

double; - Borda dupla:

ESTILO DOUBLE

O código ficaria assim:

.nome
{
border-style: solid;
}                                

Neste exemplo acima usei o estilo solid - sempre colocando ";" no final para indicar o fim do comando.

border-width

Para usar este comando eu recomendo colocar o tamanho da borda em pixels (px) pois é a medida mais conhecida na web. Os exemplos das divs acima usei o tamanho de 3 pixels, no código ficaria assim:

.nome
{
border-width: 3px;
}

border-color

Para usar este comando que definirá a cor da borda, você poderá escolher a cor pelo nome (em inglês), por exemplo red, blue, black ou outra forma bem conhecida é pelo hexadecimal da cor, por exemplo #FFFFFF (hexadecimal da cor branca). O código ficaria algo assim:

.nome
{
border-color: #000000
}

No exemplo acima usei o hexadecimal da cor preta.

background-color

Este comando definirá a cor do fundo de sua div, de novo você poderá usar o hexadecimal ou o nome da cor. Código ficará assim:

.nome
{
background-color: yellow;
}

domonstração:

DIVISÓRIA COM COR DE FUNDO AMARELO - yellow

text-align

Este comando alinhará o texto dentro da div (left = esquerda, right = direita, center = centro.) Para usar o comando coloque assim dentro do código:

.nome
{
text-align: center;
}

demonstração:

TEXTO NO CENTRO

Adicionando a classe CSS dentro do HTML da DIV:

Isso também não é difícil, basta colocar o código normal de uma divisória e adicionar - class="nome-da-classe" - na div, lembrando que não é para colocar o ponto como fizemos no CSS, exemplo: ".nome-da-classe". O HTML da DIV ficará assim:

<div class="nome-classe"> O texto que você quiser</div> - Em nome-classe você colocará o nome da classe que você adicionou no CSS.

Por hoje é só galera! Desculpe a demora para postar outro tutorial, estou criando outro site e estou tendo um pouco mais de atenção nele por ser novo, logo mais vou termina-lo! Compartilhe este tutorial em alguma rede social (embaixo do título do artigo).