Web Tutorial: The Faux 3D Easter Egg (Part 2/2)

Welcome back! This is where we apply some 3D effects to make it look, well, 3D.

Now, add another div inside the egg div.

        <div class="egg">
            <div class="egg_reflection">

            </div>
            <div id="eggpattern" class="pattern_wrapper">

Then create the egg_reflection class as follows.

            .egg_reflection
            {
                opacity: 0.6;
                filter: alpha(opacity=60); /* For IE8 and earlier */
                -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
                border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
                width:200px;
                height:300px;
                position:absolute;
                z-index:100;

                background: -moz-radial-gradient(100px 100px, ellipse cover,  #FFFFFF 0%, #444444 58%); /* FF3.6+ */
                background: -webkit-gradient(radial, 100px 100px, 0px, center center, 100%, color-stop(0%,#FFFFFF), color-stop(58%,#444444)); /* Chrome,Safari4+ */
                background: -webkit-radial-gradient(100px 100px, ellipse cover,  #FFFFFF 0%,#444444 58%); /* Chrome10+,Safari5.1+ */
                background: -o-radial-gradient(100px 100px, ellipse cover,  #FFFFFF 0%,#444444 58%); /* Opera 12+ */
                background: -ms-radial-gradient(100px 100px, ellipse cover,  #FFFFFF 0%,#444444 58%); /* IE10+ */
                background: radial-gradient(ellipse at 100px 100px,  #FFFFFF 0%,#444444 58%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#444444',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
            }

I don't really want to go into how a radial gradient CSS is created, so I got the CSS for the radial gradient here (http://www.colorzilla.com/gradient-editor/). It has to be a darker shade of gray (#444444) to white (#FFFFFF), and set to translucent (opacity 60%). position:absolute and z-index:100 overlays the translucent egg shape over the first egg outline. The rest of the specifications are the same for the class egg.

Does this look 3D yet?

Let's add a shadow under the spinning egg to enhance the illusion.

        <div class="egg">
            <div class="egg_reflection">

            </div>
            <div id="eggpattern" class="pattern_wrapper">
                <div class="patterns">
                    <div class="pattern_wrapper">
                        <div class="pattern pattern1">
                           
                        </div>
                        <div class="pattern pattern2">
                           
                        </div>
                        <div class="pattern pattern3">
                           
                        </div>
                    </div>
                    <div class="pattern_wrapper">
                        <div class="pattern pattern1">
                           
                        </div>
                        <div class="pattern pattern2a">
                           
                        </div>
                        <div class="pattern pattern3a">
                           
                        </div>
                    </div>
                    <div class="pattern_wrapper">
                        <div class="pattern pattern1">
                           
                        </div>
                        <div class="pattern pattern2">
                           
                        </div>
                        <div class="pattern pattern3">
                           
                        </div>
                    </div>
                    <div class="pattern_wrapper">
                        <div class="pattern pattern1">
                           
                        </div>
                        <div class="pattern pattern2a">
                           
                        </div>
                        <div class="pattern pattern3a">
                           
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="egg_shadow">

        </div>

And then create the egg_shadow class in your CSS.

            .egg_shadow
            {
                border-radius: 50%;
                width:150px;
                height:10px;
                box-shadow: 0px 20px 5px 5px #444444;
                background:none;
                margin:-20px auto 0 auto;
            }

This is what you should see.

The final result. Click! It works!

And you have what looks like a 3D floating, spinning egg. I bet you're feeling mighty pleased with yourself, aren't you?

Have a Happy Easter. Egg-citing times lie ahead!
T___T