Outlines x border – Quando usá-las? [CSS]

Temos o layout feito no post anterior. Agora aqui vamos ver como funciona, qual a melhor ocasião para usar as outline’s e qual a diferença delas para a border.

 

Este é o layout.


Esta é a marcação HTML

 

e este é o CSS

Vamos colocar uma borda de 1px, que ela seja sólida e que tenha cor preta. (Quer aprender como combinar esses números e gerar cores através de códigos hexadecimais, veja aqui).

 

 

Quando salvamos, observamos que a terceira cai. Isso porque foi adicionado à largura de cada uma, 2 pixels. E o “content” não comportou elas porque ele tem 800px e elas tem 266 pixels.
Numa maneira resumida de dizer, quando foram acrescentados, cada uma ficou com 268.666 e tendo 3 delas assim ficamos com cerca de 806 pixels, a largura de todas.

Mas se trocarmos para outline, veja que elas não caem, porque o outline não faz parte do conteúdo, e a border faz. Tanto faz você colocar uma outline de 2px, como de 20 pixels que eles não vão interferir na estrutura.

Se eu colocar a borda só na parte de cima, funciona…

…mas seu eu colocar outline só em cima, não funciona. Outline só serve para definir todo o contorno do elemento. Já a border, podemos fazer só de um lado deles como border-top, border-right, border-left e border bottom.

Quando usar outline?
Eu costumo usar outline para isso: Veja, eu vou colocar a função :hover, pra quando colocar-mos o mouse em cima, a main-três fique com as linha realçada, e quando tire o mouse, fique sem.

 

Veja que funciona sem estragar o layout.

 

Se usar-mos border, a DIV cai quando colocamos o mouse em cima, porque a border ocupa o espaço.

Esse é uma das vantagens de se usar outline em vez de border.
Vamos agora tirar todas as cores dos elementos…

…e ver como fica o layout.

Todo em branco. Agora o melhor uso da outline. Eu gosto de usá-la para isso.
Colocar outline para todos os elementos do trabalho para não precisar de ficar colocando cor de background nos elementos para se orientar no layout.

 

Asim, me orientarei na hotra de trabalhar no layout pois o outline não afeta a estrutura.

 

Veja que quando visualizamos no navegador, aparece as linhas sem afetar o layout

 

 

 

Siga-me no Facebook

Comments

comments

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *