2 gradients in 1 div
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/
Gewijzigd op 16/10/2013 11:43:52 door Tom aan t Goor
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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>
#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
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.
Code (php)
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
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>
#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