#

# Example: Transparent Glass with Shadow

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>