Border-bottom with linear gradient

Asked

Viewed 186 times

4

I would like to style an edge for the H1, but in linear gradient, going from color x to color y (or transparency).

I used pseudoclass (after), but with the gradient edge I can’t make it work.

Someone would know to 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

2 answers

5


Thus ?

.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>

  • Yes, exactly that! Oh, man, thank you! :)

2

You can do it like this:

h1:after {
    content:' ';
    display:block;
    border:2px solid #d0d0d0;
    box-shadow:1px 2px 3px #666;
}
<h1>Título</h1>

  • I appreciate it, man, but in case I’m talking about the gradient going from left to right, you know what I mean! It starts with a plated color and ends basically in another plated color (or transparency). :)

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.