Border-bottom with linear gradient

Question

Border-bottom with linear gradient

Navigation

#1 by (5 votes)
#2 by (2 votes)

4

I would like to stylize a border for h1, but in linear gradient, going from color x to color y (or transparency).

I used pseudoclass (after), but with the gradient border I can not get it to work.

Would anyone help me?

h1:after {
    content:' ';
    display:block;
    border:2px solid #d0d0d0;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}

<h1>Título</h1>

css

asked by anonymous 10.12.2015 / 16:20

2 answers

2

You can do this:

h1:after {
    content:' ';
    display:block;
    border:2px solid #d0d0d0;
    box-shadow:1px 2px 3px #666;
}

<h1>Título</h1>

10.12.2015 / 16:29

C # how to do database search using parameters What is the 'let' statement in a LINQ query?

score 5 · Accepted Answer

So?

.bot-left {
  position: relative;
}

.bot-left:after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: -3px;
  
}

.bot-left:after {
  right: -3px;
  height: 3px;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(left, #000, transparent);
  background-image: -moz-linear-gradient(left, #000, transparent);
  background-image: -o-linear-gradient(left, #000, transparent);
}

<h1 class="bot-left"> Teste de Frase </h1>