5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<style scoped>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#custom-doc { width: 95%; min-width: 950px; }

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#pagetitle {background-image: url(../../assets/bg_hd.gif);}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#mygraphiccontainer {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp top: 20px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp left: 20px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp position: relative;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width: 680px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height:500px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp.example {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp background: url(../assets/graphics/img/curtain.png) no-repeat center;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</style>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div class="intro">

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86TrippIn 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.

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</div>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div class="example">

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp{{>graphics-muddyglass-source}}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</div>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>HTML</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div id="mygraphiccontainer"></div>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>CSS</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#mygraphiccontainer {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp top: 20px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp left: 20px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp position: relative;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width: 680px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height:500px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp.example {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp background: url(../assets/graphics/img/curtain.png) no-repeat center;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>Javascript</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Create a `Graphic` instance</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Create a radial gradient to act as a shadow for the glass.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});

d1a404610f53bdff63cde29a00ea9cf48739d91eTripp var shadow = mygraphic.addShape({

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "ellipse",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stroke: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color: "#ddd",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp weight: 0

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp fill: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "radial",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stops: [

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#000", opacity: 0.7, offset: 0},

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#000", opacity: 0.4, offset: 0.5},

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#000", opacity: 0.1, offset: 0.7}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp ],

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp cx: .6,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp cy: .6,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp fx: 0.1,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp fy: 0.3,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp r: 0.8

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width: 280,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height: 20,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp x:318,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp y:420

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp });

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

d1a404610f53bdff63cde29a00ea9cf48739d91eTripp var milk = mygraphic.addShape({

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp x: 314,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp y: 180,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "rect",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stroke: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color:"#6c3f27",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp weight: 1,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp opacity:0.3

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp fill: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "linear",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp rotation: 0,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stops: [

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#d1c4bd", opacity:0.9, offset: 0},

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#a78c7e", opacity: 0.9, offset: 0.4},

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#6c3f27", opacity: 0.9, offset: 0.7}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp ]

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width:142,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height:230

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp });

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

d1a404610f53bdff63cde29a00ea9cf48739d91eTripp var myrect = mygraphic.addShape({

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp x: 310,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp y: 110,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "rect",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stroke: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color:"#90ad8c",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp weight: 1,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp opacity:0.6

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp fill: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "linear",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp rotation: 90,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stops: [

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#90ad8c", opacity:0.3, offset: 0},

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#819c7d", opacity: 0.3, offset: 0.8},

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#40563d", opacity: 0.7, offset: 1.0}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp ]

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width:150,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height:325

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp });

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

d1a404610f53bdff63cde29a00ea9cf48739d91eTripp var reflect = mygraphic.addShape({

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp x: 310,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp y: 113,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "rect",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stroke: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color:"#90ad8c",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp weight: 1,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp opacity:0.0

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp fill: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "linear",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp rotation: 0,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stops: [

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#fff", opacity:0.0, offset: 0.2},

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#fff", opacity: 0.4, offset: 0.3},

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#fff", opacity: 0.0, offset: 0.4}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp ]

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width:150,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height:318

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp });

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>Complete Example Source</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp{{>graphics-muddyglass-source}}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```