2 gradients in 1 div

Door Tom aan t Goor op 16-10-2013 11:42 gewijzigd op 16-10-2013 11:43

1.495 views

Hoi,

Ik probeer 2 gradients in 1 div te krijgen (als achtergrond).
Hier wil ik geen plaatje voor gebruiken.

Ik kan wel 2 divs maken met elke div een gradient.
Alleen dit lijkt me niet de mooiste oplossing.

Kan het ook op een andere manier?

(Voorbeeld van wat ik wil bereiken):

Een gradient maak ik via: http://www.colorzilla.com/gradient-editor/

Kris Peeters

16-10-2013 11:53 gewijzigd op 16-10-2013 11:54


<style>
#sample-btn {
  height: 200px;
  width: 200px;
}
#sample-btn {
  background-image: linear-gradient(bottom, rgb(153,41,31) 27%, rgb(0,255,255) 81%);
  background-image: -o-linear-gradient(bottom, rgb(153,41,31) 27%, rgb(0,255,255) 81%);
  background-image: -moz-linear-gradient(bottom, rgb(153,41,31) 27%, rgb(0,255,255) 81%);
  background-image: -webkit-linear-gradient(bottom, rgb(153,41,31) 27%, rgb(0,255,255) 81%);
  background-image: -ms-linear-gradient(bottom, rgb(153,41,31) 27%, rgb(0,255,255) 81%);

  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.27, rgb(153,41,31)),
    color-stop(0.81, rgb(0,255,255))
  );
}
</style>
<div id="sample-btn">Test</div>

... maar dan met minder lelijke kleuren :)

Hier kan je die laten genereren:
http://gradients.glrzad.com/

Tom aan t Goor

16-10-2013 12:04

Hoi Kris,

Wat jij verteld bedoel ik niet precies.

Ik bedoel dat ik 2 gradients wil hebben in 1 div.

Gradient 1: Roob -> Blauw -> Horizontaal
Gradient 2: Zwart -> Wit -> Verticaal

Ik hoop dat het zo wat duidelijker is.

Kris Peeters

16-10-2013 12:32

Met twee div's bovenop mekaar lukt dat.


<style>
#sample-btn {
  position: relative;
  height: 200px;
  width: 200px;
}
#sample-btn {
  background-image: linear-gradient(bottom, rgb(255,0,0) 27%, rgb(255,255,0) 81%);
  background-image: -o-linear-gradient(bottom, rgb(255,0,0) 27%, rgb(255,255,0) 81%);
  background-image: -moz-linear-gradient(bottom, rgb(255,0,0) 27%, rgb(255,255,0) 81%);
  background-image: -webkit-linear-gradient(bottom, rgb(255,0,0) 27%, rgb(255,255,0) 81%);
  background-image: -ms-linear-gradient(bottom, rgb(255,0,0) 27%, rgb(255,255,0) 81%);
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.27, rgb(255,0,0)),
    color-stop(0.81, rgb(255,255,0))
  );
}
.transparant {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 10;
}
.transparant {
  background-image: linear-gradient(left, rgba(255,255,255, 0.1) 11%, rgba(255,255, 255, 0.9) 95%);
  background-image: -o-linear-gradient(left, rgba(255,255,255, 0.1) 11%, rgba(255,255, 255, 0.9) 95%);
  background-image: -moz-linear-gradient(left, rgba(255,255,255, 0.1) 11%, rgba(255,255, 255, 0.9) 95%);
  background-image: -webkit-linear-gradient(left, rgba(255,255,255, 0.1) 11%, rgba(255,255, 255, 0.9) 95%);
  background-image: -ms-linear-gradient(left, rgba(255,255,255, 0.1) 11%, rgba(255,255, 255, 0.9) 95%);
  background-image: -webkit-gradient(
    linear,
    left bottom,
    right bottom,
    color-stop(0.11, rgba(255,255,255, 0.1)),
    color-stop(0.95, rgba(255,255, 255, 0.9))
  );
}
</style>
<div id="sample-btn">
  <div class="transparant">
    Lorem ipsum ...
  </div>
</div>

Wie een betere/gemakkelijkere oplossing heeft; gelieve die te delen

Reageren

Inloggen om te reageren