2 gradients in 1 div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Tom aan t Goor

Tom aan t Goor

16/10/2013 11:42:47
Quote Anchor link
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):
http://www.mupload.nl/img/az1crjxpebo.png

Een gradient maak ik via: http://www.colorzilla.com/gradient-editor/
Gewijzigd op 16/10/2013 11:43:52 door Tom aan t Goor
 
PHP hulp

PHP hulp

23/11/2020 23:41:17
 
Kris Peeters

Kris Peeters

16/10/2013 11:53:46
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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/
Gewijzigd op 16/10/2013 11:54:53 door Kris Peeters
 
Tom aan t Goor

Tom aan t Goor

16/10/2013 12:04:12
Quote Anchor link
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

Kris Peeters

16/10/2013 12:32:59
Quote Anchor link
Met twee div's bovenop mekaar lukt dat.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.