5

Provavelmente essa pode ser uma pergunta repetida, mas como não sei o nome do efeito não consigo achar nada sobre ele, o efeito que quero fazer na borda é exatamente igual ao da imagem abaixo:

inserir a descrição da imagem aqui

  • Como posso fazer esse efeito?
  • Qual o nome dele?
2
  • Você quer dizer essa linha com as pontas finas, um pouco degradê?
    – BrTkCa
    20/12/2016 às 14:10
  • Sim, nas pontas fininho sumindo aos poucos, e no meio na espessura normal
    – Leo Letto
    20/12/2016 às 14:11

2 Respostas 2

4

Eu faria uma div com tamanho fixo, deixando o backgound gradiente linear:

HTML

<div class="linha"></div>

CSS

.linha { 
    margin: 10px 0;
    height: 2px;
    background: black;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black));
}

Exemplo:

.linha {
  margin: 10px 0;
  height: 2px;
  background: black;
  background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black));
}
<div class="linha"></div>

1
  • 1
    Não é nas bordas como imaginei, mas me serviu muito bem , obrigado.
    – Leo Letto
    20/12/2016 às 14:24
4

Complementando, eu faria assim meu hr:

hr{
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, transparent, black, transparent);
}
<hr>

Acredito ser mais simples esta solução, agora é só escolher a cor desejada e colocar onde esta o black

1
  • 1
    +1 ambas as soluções estão no caminho certo, mas essa me parece mais padrão.
    – Largato
    21/12/2016 às 12:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .