In this advanced example, we'll create a glass of milk by layering transparent gradients. Since gradient opacity does not work in IE <= 8, there will be a noticeable degradation in those browsers.
HTML
<div id="mygraphiccontainer"></div>
CSS
#mygraphiccontainer {
top: 20px;
left: 20px;
position: relative;
width: 680px;
height:500px;
}
.example {
background: url(../assets/graphics/img/curtain.png) no-repeat center;
}
Javascript
Create a Graphic instance
var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
Create a radial gradient to act as a shadow for the glass.
var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
var shadow = mygraphic.addShape({
type: "ellipse",
stroke: {
color: "#ddd",
weight: 0
},
fill: {
type: "radial",
stops: [
{color: "#000", opacity: 0.7, offset: 0},
{color: "#000", opacity: 0.4, offset: 0.5},
{color: "#000", opacity: 0.1, offset: 0.7}
],
cx: .6,
cy: .6,
fx: 0.1,
fy: 0.3,
r: 0.8
},
width: 280,
height: 20,
x:318,
y:420
});
Create a rectangle with a linear gradient for the chocolate milk.
var milk = mygraphic.addShape({
x: 314,
y: 180,
type: "rect",
stroke: {
color:"#6c3f27",
weight: 1,
opacity:0.3
},
fill: {
type: "linear",
rotation: 0,
stops: [
{color: "#d1c4bd", opacity:0.9, offset: 0},
{color: "#a78c7e", opacity: 0.9, offset: 0.4},
{color: "#6c3f27", opacity: 0.9, offset: 0.7}
]
},
width:142,
height:230
});
Add another linear gradient rectangle for the glass.
var myrect = mygraphic.addShape({
x: 310,
y: 110,
type: "rect",
stroke: {
color:"#90ad8c",
weight: 1,
opacity:0.6
},
fill: {
type: "linear",
rotation: 90,
stops: [
{color: "#90ad8c", opacity:0.3, offset: 0},
{color: "#819c7d", opacity: 0.3, offset: 0.8},
{color: "#40563d", opacity: 0.7, offset: 1.0}
]
},
width:150,
height:325
});
Create the linear gradient for the reflection.
var reflect = mygraphic.addShape({
x: 310,
y: 113,
type: "rect",
stroke: {
color:"#90ad8c",
weight: 1,
opacity:0.0
},
fill: {
type: "linear",
rotation: 0,
stops: [
{color: "#fff", opacity:0.0, offset: 0.2},
{color: "#fff", opacity: 0.4, offset: 0.3},
{color: "#fff", opacity: 0.0, offset: 0.4}
]
},
width:150,
height:318
});
Complete Example Source
<div id="mygraphiccontainer"></div>
<script>
YUI({filter:"raw"}).use('graphics', function (Y)
{
var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
var shadow = mygraphic.addShape({
type: "ellipse",
stroke: {
color: "#ddd",
weight: 0
},
fill: {
type: "radial",
stops: [
{color: "#000", opacity: 0.7, offset: 0},
{color: "#000", opacity: 0.4, offset: 0.5},
{color: "#000", opacity: 0.1, offset: 0.7}
],
cx: .6,
cy: .6,
fx: 0.1,
fy: 0.3,
r: 0.8
},
width: 280,
height: 20,
x:318,
y:420
});
var milk = mygraphic.addShape({
x: 314,
y: 180,
type: "rect",
stroke: {
color:"#6c3f27",
weight: 1,
opacity:0.3
},
fill: {
type: "linear",
rotation: 0,
stops: [
{color: "#d1c4bd", opacity:0.9, offset: 0},
{color: "#a78c7e", opacity: 0.9, offset: 0.4},
{color: "#6c3f27", opacity: 0.9, offset: 0.7}
]
},
width:142,
height:230
});
var myrect = mygraphic.addShape({
x: 310,
y: 110,
type: "rect",
stroke: {
color:"#90ad8c",
weight: 1,
opacity:0.6
},
fill: {
type: "linear",
rotation: 90,
stops: [
{color: "#90ad8c", opacity:0.3, offset: 0},
{color: "#819c7d", opacity: 0.3, offset: 0.8},
{color: "#40563d", opacity: 0.7, offset: 1.0}
]
},
width:150,
height:325
});
var reflect = mygraphic.addShape({
x: 310,
y: 113,
type: "rect",
stroke: {
color:"#90ad8c",
weight: 1,
opacity:0.0
},
fill: {
type: "linear",
rotation: 0,
stops: [
{color: "#fff", opacity:0.0, offset: 0.2},
{color: "#fff", opacity: 0.4, offset: 0.3},
{color: "#fff", opacity: 0.0, offset: 0.4}
]
},
width:150,
height:318
});
});
</script>