223N/A<style scoped>

223N/A#custom-doc { width: 95%; min-width: 950px; }

223N/A#pagetitle {background-image: url(../../assets/bg_hd.gif);}

223N/A#mygraphiccontainer {

223N/A top: 20px;

223N/A left: 20px;

223N/A position: relative;

223N/A width: 680px;

223N/A height:500px;

223N/A}

223N/A.example {

223N/A background: url(../assets/graphics/img/curtain.png) no-repeat center;

223N/A}

223N/A</style>

223N/A<div class="intro">

223N/A<p>

223N/AIn 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.

223N/A</p>

223N/A</div>

223N/A<div class="example">

223N/A{{>graphics-muddyglass-source}}

223N/A</div>

223N/A<h2>HTML</h2>

223N/A```

223N/A<div id="mygraphiccontainer"></div>

223N/A```

223N/A

223N/A<h2>CSS</h2>

223N/A```

223N/A#mygraphiccontainer {

223N/A top: 20px;

223N/A left: 20px;

223N/A position: relative;

223N/A width: 680px;

223N/A height:500px;

223N/A}

223N/A.example {

223N/A background: url(../assets/graphics/img/curtain.png) no-repeat center;

223N/A}

223N/A```

223N/A

223N/A<h2>Javascript</h2>

223N/A

223N/A<p>Create a `Graphic` instance</p>

223N/A```

223N/A var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});

223N/A```

223N/A

223N/A<p>Create a radial gradient to act as a shadow for the glass.</p>

223N/A

223N/A```

223N/A var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});

223N/A var shadow = mygraphic.getShape({

223N/A type: "ellipse",

223N/A stroke: {

223N/A color: "#ddd",

223N/A weight: 0

223N/A },

223N/A fill: {

223N/A type: "radial",

223N/A stops: [

223N/A {color: "#000", opacity: 0.7, offset: 0},

223N/A {color: "#000", opacity: 0.4, offset: 0.5},

223N/A {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

});

```

<p>Create a rectangle with a linear gradient for the chocolate milk.</p>

```

var milk = mygraphic.getShape({

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

});

```

<p>Add another linear gradient rectangle for the glass.</p>

```

var myrect = mygraphic.getShape({

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

});

```

<p>Create the linear gradient for the reflection.</p>

```

var reflect = mygraphic.getShape({

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

});

```

<h2>Complete Example Source</h2>

```

{{>graphics-muddyglass-source}}

```