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.
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:
- dotted - é uma linha pontilhada;
- dashed - é uma linha descontínua (semelhante ao dotted);
- double - é uma linha dupla;
- solid - é uma linha sólida;
- groove - é uma linha especial, possui um tipo de relevo;
- ridge - é semelhante ao groove, porém, seu efeito é invertido;
- inset - uma espécie de relevo para dentro;
- 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.
P.S.: Amoras, abri vagas para afiliados! Quem quiser se afiliar é só avisar aí nos comentários que eu adiciono aos meus afiliados.
Olá ~
ResponderExcluirAmei a ilustração e o tutorial *-*
Chu ~
♡ Buquê de Flores ♡ ~ ❀ Jardim Secreto ❀
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!
ResponderExcluirBye's ♡
O Snack Cheese é a queijolândia~✧ |
Temos pipocas e sopas! Venham ☆
Olá Luce o//
ResponderExcluirEsse 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 ☆