Aplicando Borda Interna no CSS - I

Imagem de paramore, hayley williams, and ramones
Olá, amoras! Como vão vocês? Espero que muito bem ^^
Well, hoje eu trago um tutorial para vocês de como aplicar borda interna no seu CSS, por exemplo: se vocês observarem a minha tooltip verão que ela possui uma borda interna (pode parecer que é externa por minha tooltip ser semi-transparente -q) e é isso que vou lhes ensinar - como aplicá-la onde vocês quiserem.
A aplicação é bem simples, o código é basicamente este:


outline-offset: -3px;
outline: 1px solid #fff;

Agora, vamos entendê-lo:
Na primeira linha do código (outline-offset) é que é definida a distância da margem externa até a borda; quanto maior o valor, maior a distância. Logo, se desejar que a borda fique bem distante da margem, deve aumentar o valor, se deseja mais próxima, deve diminuir.

A segunda linha do código (outline) é onde você personaliza a sua margem, inserindo as seguintes informações respectivamente: espessura da borda/linha (px), tipo de linha e a cor da linha.
Existem 8 opções de tipos de linha que você pode utilizar, são elas:

  1. dotted - é uma linha pontilhada;
  2. dashed - é uma linha descontínua (semelhante ao dotted);
  3. double - é uma linha dupla;
  4. solid - é uma linha sólida;
  5. groove - é uma linha especial, possui um tipo de relevo;
  6. ridge - é semelhante ao groove, porém, seu efeito é invertido;
  7. inset - uma espécie de relevo para dentro;
  8. outset - uma espécie de relevo para fora;


Bom, o código é basicamente esse. Bem simples, né?
E para aplicá-lo é mais fácil ainda! Basta você acrescentá-lo ao código de qualquer lugar que vocês desejem que detenha da borda interna.

É isso, espero que tenham gostado do tutorial e que dê para compreender bem. Qualquer dúvida, vocês podem deixar aí nos comentários!
XOXO

P.S.: Amoras, abri vagas para afiliados! Quem quiser se afiliar é só avisar aí nos comentários que eu adiciono aos meus afiliados.

3 comentários:

  1. Olá Luce, quanto tempo não vejo blogs de tutorias. É uma coisa boa te encontrar por aqui! Creio que esse blog ajudará a muitos blogueiros um desses sou eu. Vou passar aqui mais vezes!
    Bye's ♡
    O Snack Cheese é a queijolândia~✧ |
    Temos pipocas e sopas! Venham ☆

    ResponderExcluir
  2. Olá Luce o//
    Esse blog está bom de tutoriais, irei visita-los quando fazer algum layout. Eu ainda não conhecia esse tutorial. Está bem explicado!
    Já estou seguindo para ficar informada dos tutos.

    Bye's ♡
    O Snack Cheese é a queijolândia~✧ |
    Temos pipocas e sopas! Venham ☆

    ResponderExcluir