mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2024-11-15 21:20:09 +00:00
1d93cc2b0b
After introducing the CSS blend mode enum values and including the background-blend-mode CSS property, it is very important to actually provide an example of the new feature. This patch adds a new demo to gtk3-demo which shows how the background-blend-mode CSS property works. https://bugzilla.gnome.org/show_bug.cgi?id=768305
52 lines
1.0 KiB
CSS
52 lines
1.0 KiB
CSS
/*
|
|
* First page.
|
|
*/
|
|
image.duck {
|
|
background-image: url('resource://css_blendmodes/ducky.png');
|
|
background-size: cover;
|
|
min-width: 200px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
image.gradient {
|
|
background-image: linear-gradient(to right, red 0%, green 50%, blue 100%);
|
|
min-width: 200px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
/*
|
|
* Second page.
|
|
*/
|
|
image.red {
|
|
background: url('resource://css_blendmodes/blends.png') top center;
|
|
min-width: 200px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
image.blue {
|
|
background: url('resource://css_blendmodes/blends.png') bottom center;
|
|
min-width: 200px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
/*
|
|
* Third page.
|
|
*/
|
|
image.cyan {
|
|
background: url('resource://css_blendmodes/cmy.jpg') top center;
|
|
min-width: 200px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
image.magenta {
|
|
background: url('resource://css_blendmodes/cmy.jpg') center center;
|
|
min-width: 200px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
image.yellow {
|
|
background: url('resource://css_blendmodes/cmy.jpg') bottom center;
|
|
min-width: 200px;
|
|
min-height: 200px;
|
|
}
|