Monday, 15 May 2017

Interesting facts about India | Aware Talk

           , , ,      No comments   

1. Shampooing is an Indian concept

Shampoo was invented in India, not the commercial liquid ones but the method by use of herbs. The word 'shampoo' itself has been derived from the Sanskrit word champu, which means to massage.  

2.Water on the moon was discovered by India

In September 2009, India's ISRO Chandrayaan- 1 using its Moon Mineralogy Mapper detected water on the moon for the first time.

3. India is the world's largest producer of milk

India recently overtook the European Union with production reaching over 132.4m tonnes in 2014.

4. India has Largest number of vegetarians in the world 

 Be it because of religious reasons or personal choices or both, around 20-40% of Indians are vegetarians, making it the largest vegetarian-friendly country in the world.

5. Snakes and Ladders originated in India

Earlier known as Moksha Patamu, the game was initially invented as a moral lesson about karma to be taught to children. It was later commercialized and has become one of the most popular board games in the world.

 


Wednesday, 10 May 2017

How to make Cartoon Character in HTML and CSS

           , , , , , , , ,      No comments   

Hii Friends... 

 Today I explain how to create cartoon character using HTML and CSS . you can use this code in your project copy this code and paste it. 

  Cartoon Demo :  Minions CSS

Jerry

Your Code is As Under:

<!DOCTYPE HTML>
<html>

<head>

    <title>Minions CSS</title>
    <style>
        .jerry * {
            position: absolute;
            box-sizing: content-box;
            -moz-box-sizing: content-box;
        }

        /****************************************************/

        .jerry {
            background: #f1cb48;
            background: -moz-linear-gradient(left, #f1cb48 0%, #f9d65c 24%, #f9d65c 48%, #e6bc3b 99%);
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1cb48), color-stop(24%,#f9d65c), color-stop(48%,#f9d65c), color-stop(99%,#e6bc3b));
            background: -webkit-linear-gradient(left, #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
            background: -o-linear-gradient(left, #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
            background: -ms-linear-gradient(left, #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
            background: linear-gradient(to right, #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1cb48', endColorstr='#e6bc3b',GradientType=1 );
            width: 180px;
            height: 212px;
            border-top-left-radius: 75px;
            border-top-right-radius: 75px;
            border-bottom-left-radius: 65px;
            border-bottom-right-radius: 64px;
            position: relative;
            float: left;
            top: 105px;
            transition: ease 0.3s all;
            -webkit-transition: ease 0.3s all;
            left: 200px;
        }

            .jerry .dark_light {
                left: 136px;
            }

            .jerry .eyes1, .jerry .eyes2 {
                top: 4px;
                -webkit-transform: scale(0.9);
                -moz-transform: scale(0.9);
                -ms-transform: scale(0.9);
                -o-transform: scale(0.9);
                transform: scale(0.9);
            }

                .jerry .eyes1 .brown_eye {
                    left: 24px;
                }

            .jerry .eyes2 {
                left: 44px;
            }

            .jerry .eyes1 {
                left: -20px;
            }

            .jerry .right_tie {
                right: 1px;
            }

                .jerry .right_tie .top_tie, .jerry .right_tie .down_tie {
                    width: 38px;
                }

                    .jerry .right_tie .top_tie:after, .jerry .right_tie .down_tie:after {
                        right: 35px;
                    }

            .jerry .left_tie {
                right: 174px;
            }

                .jerry .left_tie .top_tie, .jerry .left_tie .down_tie {
                    width: 7px;
                }

                    .jerry .left_tie .top_tie:after, .jerry .left_tie .down_tie:after {
                        display: none;
                    }



        .clothes .main_jerry {
            background-color: #35668F;
            width: 100px;
            height: 43px;
            top: 143px;
            left: 29px;
            z-index: 99999;
            border-left: 1px dotted #FFF;
            border-right: 1px dotted #FFF;
        }

        .jerry .jerry_right_shirt {
            width: 64px;
            left: 117px;
            top: 139px;
        }

        .jerry_left_shirt {
            top: 139px;
            width: 46px;
            left: -5px;
            -webkit-transform: scaleX(-1) rotate(-23deg);
            -moz-transform: scaleX(-1) rotate(-23deg);
            -ms-transform: scaleX(-1) rotate(-23deg);
            -o-transform: scaleX(-1) rotate(-23deg);
            transform: scaleX(-1) rotate(-23deg);
        }

        .jerry .pocket {
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
            top: 152px;
            left: 57px;
        }

        .jerry_bottom {
            background: #35668F;
            background: -moz-radial-gradient(top, ellipse cover, #35668f 61%, #003e82 100%);
            background: -webkit-gradient(radial, top center, 0px, top center, 100%, color-stop(61%,#35668f), color-stop(100%,#003e82));
            background: -webkit-radial-gradient(top, ellipse cover, #35668F 61%,#003E82 100%);
            background: -o-radial-gradient(top, ellipse cover, #35668f 61%,#003e82 100%);
            background: -ms-radial-gradient(top, ellipse cover, #35668f 61%,#003e82 100%);
            background: radial-gradient(ellipse at top, #35668F 61%,#003E82 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35668f', endColorstr='#003e82',GradientType=1 );
            filter: inherit;
            height: 43px;
            width: 171px;
            top: 169px;
            left: 4px;
            border-bottom-right-radius: 70px;
            border-bottom-left-radius: 70px;
        }





        .jerry_shoes {
            background-color: #231F20;
            width: 45px;
            height: 9px;
            top: -68px;
            left: 84px;
            border-top-right-radius: 14px;
            -webkit-transform: rotate(2deg);
            -moz-transform: rotate(2deg);
            -ms-transform: rotate(2deg);
            -o-transform: rotate(2deg);
            transform: rotate(2deg);
        }

            .jerry_shoes:after {
                position: absolute;
                content: '';
                border-top-right-radius: 30%;
                width: 30px;
                height: 6px;
                background-color: #231F20;
                top: 8px;
                right: 0px;
                border-bottom-right-radius: 31%;
                border-bottom-left-radius: 50%;
                -webkit-transform: rotate(2deg);
                -moz-transform: rotate(2deg);
                -ms-transform: rotate(2deg);
                -o-transform: rotate(2deg);
                transform: rotate(2deg);
            }

            .jerry_shoes:before {
                position: absolute;
                content: '';
                width: 9px;
                height: 6px;
                background-color: #231F20;
                top: 6px;
                left: 0px;
                border-bottom-right-radius: 40%;
            }

        .jerry_small_shoes {
            border-radius: 40%;
            width: 30px;
            height: 10px;
            background-color: #231F20;
            top: -5px;
            right: 4px;
            -webkit-transform: rotate(9deg);
            -moz-transform: rotate(9deg);
            -ms-transform: rotate(9deg);
            -o-transform: rotate(9deg);
            transform: rotate(9deg);
        }

            .jerry_small_shoes:before {
                position: absolute;
                content: '';
                width: 36px;
                height: 8px;
                background-color: #35668F;
                top: -2px;
                left: -11px;
                -webkit-transform: rotate(-16deg) !important;
                -moz-transform: rotate(-16deg) !important;
                -ms-transform: rotate(-16deg) !important;
                -o-transform: rotate(-16deg) !important;
                transform: rotate(-16deg) !important;
                border-bottom-right-radius: 4px;
            }

        .jerry_left_shoes {
            left: 30px;
            -webkit-transform: scaleX(-1);
            -moz-transform: scaleX(-1);
            -ms-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            transform: scaleX(-1);
        }


        .jerry_smile {
            width: 64px;
            height: 17px;
            background-color: #2B2B2B;
            top: 112px;
            left: 45px;
            border-bottom-left-radius: 130px;
            border-bottom-right-radius: 96px;
            -webkit-transform: rotate(-5deg);
            -moz-transform: rotate(-5deg);
            -ms-transform: rotate(-5deg);
            -o-transform: rotate(-5deg);
            transform: rotate(-5deg);
        }

            .jerry_smile:before {
                position: absolute;
                content: '';
                width: 54px;
                height: 12px;
                top: 7px;
                left: 6px;
                border-radius: 50%;
                background-color: #2B2B2B;
            }

            .jerry_smile:after {
                position: absolute;
                content: '';
                width: 62px;
                height: 9px;
                top: -5px;
                left: 0px;
                -webkit-transform: rotate(-1deg);
                -moz-transform: rotate(-1deg);
                -ms-transform: rotate(-1deg);
                -o-transform: rotate(-1deg);
                transform: rotate(-1deg);
                border-radius: 50%;
                background-color: #F9D65C;
            }



        .teeth1 {
            width: 16px;
            height: 11px;
            border-bottom-right-radius: 8px;
            border-bottom-left-radius: 3px;
            right: -1px;
            background-color: #F3F3F3;
            box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2) inset;
        }

            .teeth1:after {
                width: 16px;
                height: 11px;
                position: absolute;
                content: '';
                border-bottom-right-radius: 5px;
                border-bottom-left-radius: 3px;
                right: 15px;
                top: 1px;
                background-color: #F3F3F3;
                box-shadow: 1px 4px 7px rgba(0, 0, 0, 0.2) inset;
            }

        .teeth2 {
            width: 18px;
            height: 11px;
            border-bottom-right-radius: 4px;
            border-bottom-left-radius: 6px;
            top: 1px;
            right: 28px;
            background-color: #F3F3F3;
            box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.2) inset;
        }

            .teeth2:after {
                width: 16px;
                height: 11px;
                position: absolute;
                content: '';
                border-bottom-right-radius: 5px;
                border-bottom-left-radius: 9px;
                right: 17px;
                top: -1px;
                background-color: #F3F3F3;
                box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.2) inset;
            }

        .jerry_hair ul {
            list-style: none;
        }

            .jerry_hair ul li {
                width: 1px;
                background-color: #222;
            }

        li.h1 {
            height: 27px;
            left: 92px;
            top: -18px;
            -webkit-transform: rotate(5deg);
            -moz-transform: rotate(5deg);
            -ms-transform: rotate(5deg);
            -o-transform: rotate(5deg);
            transform: rotate(5deg);
        }

        li.h2 {
            height: 25px;
            left: 102px;
            top: -18px;
            -webkit-transform: rotate(8deg);
            -moz-transform: rotate(8deg);
            -ms-transform: rotate(8deg);
            -o-transform: rotate(8deg);
            transform: rotate(8deg);
        }


        li.h3 {
            height: 23px;
            left: 111px;
            top: -17px;
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -ms-transform: rotate(10deg);
            -o-transform: rotate(10deg);
            transform: rotate(10deg);
        }


        li.h4 {
            height: 18px;
            left: 121px;
            top: -13px;
            -webkit-transform: rotate(11deg);
            -moz-transform: rotate(11deg);
            -ms-transform: rotate(11deg);
            -o-transform: rotate(11deg);
            transform: rotate(11deg);
        }


        li.h5 {
            height: 23px;
            left: 82px;
            top: -17px;
            -webkit-transform: rotate(-1deg);
            -moz-transform: rotate(-1deg);
            -ms-transform: rotate(-1deg);
            -o-transform: rotate(-1deg);
            transform: rotate(-1deg);
        }


        li.h6 {
            height: 27px;
            left: 72px;
            top: -18px;
            -webkit-transform: rotate(-6deg);
            -moz-transform: rotate(-6deg);
            -ms-transform: rotate(-6deg);
            -o-transform: rotate(-6deg);
            transform: rotate(-6deg);
        }


        li.h7 {
            height: 24px;
            left: 62px;
            top: -16px;
            -webkit-transform: rotate(-9deg);
            -moz-transform: rotate(-9deg);
            -ms-transform: rotate(-9deg);
            -o-transform: rotate(-9deg);
            transform: rotate(-9deg);
        }


        li.h8 {
            height: 17px;
            left: 53px;
            top: -9px;
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            -ms-transform: rotate(-10deg);
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }


        li.h9 {
            height: 12px;
            left: 44px;
            top: -3px;
            -webkit-transform: rotate(-11deg);
            -moz-transform: rotate(-11deg);
            -ms-transform: rotate(-11deg);
            -o-transform: rotate(-11deg);
            transform: rotate(-11deg);
        }


        li.h10 {
            height: 20px;
            left: 130px;
            top: -14px;
            -webkit-transform: rotate(13deg);
            -moz-transform: rotate(13deg);
            -ms-transform: rotate(13deg);
            -o-transform: rotate(13deg);
            transform: rotate(13deg);
        }


        li.h11 {
            height: 17px;
            left: 138px;
            top: -6px;
            -webkit-transform: rotate(16deg);
            -moz-transform: rotate(16deg);
            -ms-transform: rotate(16deg);
            -o-transform: rotate(16deg);
            transform: rotate(16deg);
        }


        li.h12 {
            height: 15px;
            left: 35px;
            top: -3px;
            -webkit-transform: rotate(-13deg);
            -moz-transform: rotate(-13deg);
            -ms-transform: rotate(-13deg);
            -o-transform: rotate(-13deg);
            transform: rotate(-13deg);
        }


        .jerry h2 {
            top: 258px;
            font-family: tahoma;
            font-size: 34px;
            font-weight: normal;
            left: 43px;
            color: #414141;
        }


        .jerry_lh {
            width: 39px;
            height: 15px;
            background-color: #F1CC49;
            top: 151px;
            border-bottom-left-radius: 11px;
            left: -25px;
            -webkit-transform: rotate(-39deg);
            -moz-transform: rotate(-39deg);
            -ms-transform: rotate(-39deg);
            -o-transform: rotate(-39deg);
            transform: rotate(-39deg);
        }

        .animated_lh {
            width: 27px;
            height: 15px;
            background-color: #F1CC49;
            top: 150px;
            border-bottom-right-radius: 11px;
            left: -37px;
            -webkit-transform: rotate(40deg);
            -moz-transform: rotate(40deg);
            -ms-transform: rotate(40deg);
            -o-transform: rotate(40deg);
            transform: rotate(40deg);
            -moz-animation: hand_animate 2s ease 1s infinite;
            -webkit-animation: hand_animate 2s ease 1s infinite;
            -o-animation: hand_animate 2s ease 1s infinite;
            animation: hand_animate 2s ease 1s infinite;
        }


        @-moz-keyframes hand_animate {
            0% {
                -moz-transform: rotate(40deg);
            }

            50% {
                -moz-transform: rotate(70deg);
            }

            100% {
                -moz-transform: rotate(40deg);
            }
        }

        @-webkit-keyframes hand_animate {
            0% {
                -webkit-transform: rotate(40deg);
            }

            50% {
                -webkit-transform: rotate(70deg);
            }

            100% {
                -webkit-transform: rotate(40deg);
            }
        }

        @-ms-keyframes hand_animate {
            0% {
                -ms-transform: rotate(40deg);
            }

            50% {
                -ms-transform: rotate(70deg);
            }

            100% {
                -ms-transform: rotate(40deg);
            }
        }

        @-o-keyframes hand_animate {
            0%;

        {
            -o-transform: rotate(40deg);
        }

        50% {
            -o-transform: rotate(70deg);
        }

        100% {
            -o-transform: rotate(40deg);
        }

        }

        @keyframes hand_animate {
            0% {
                transform: rotate(40deg);
            }

            50% {
                transform: rotate(70deg);
            }

            100% {
                transform: rotate(40deg);
            }
        }



        .gloves_lh {
            width: 35px;
            height: 30px;
            top: -9px;
            left: -32px;
            background-color: #231F20;
            border-radius: 50%;
        }


            .gloves_lh:after {
                position: absolute;
                content: '';
                width: 23px;
                left: -12px;
                top: 1px;
                background-color: #231F20;
                border-radius: 50%;
                height: 17px;
                -webkit-transform: rotate(21deg);
                -moz-transform: rotate(21deg);
                -ms-transform: rotate(21deg);
                -o-transform: rotate(21deg);
                transform: rotate(21deg);
            }

            .gloves_lh:before {
                position: absolute;
                content: '';
                width: 31px;
                left: -11px;
                background-color: #231F20;
                border-radius: 50%;
                top: 14px;
                height: 18px;
                -webkit-transform: rotate(-1deg);
                -moz-transform: rotate(-1deg);
                -ms-transform: rotate(-1deg);
                -o-transform: rotate(-1deg);
                transform: rotate(-1deg);
            }

        .gloves_lh2 {
            width: 19px;
            height: 37px;
            -webkit-transform: rotate(-22deg);
            -moz-transform: rotate(-22deg);
            -ms-transform: rotate(-22deg);
            -o-transform: rotate(-22deg);
            transform: rotate(-22deg);
            top: -19px;
            left: -29px;
            background-color: #231F20;
            border-radius: 50%;
        }

            .gloves_lh2:before {
                position: absolute;
                content: '';
                width: 14px;
                left: 22px;
                background-color: #231F20;
                top: 25px;
                height: 19px;
                border-top-left-radius: 6px;
                border-bottom-left-radius: 6px;
                -webkit-transform: rotate(20deg) !important;
                -moz-transform: rotate(20deg) !important;
                -ms-transform: rotate(20deg) !important;
                -o-transform: rotate(20deg) !important;
                transform: rotate(20deg) !important;
            }



        .jerry_curve1 {
            width: 40px;
            height: 29px;
            background-color: rgba(0, 0, 0, 0);
            top: 173px;
            z-index: 99999;
            left: 129px;
            border-bottom-left-radius: 20px;
            border-left: dotted 1px #FFF;
            box-shadow: 1px 0px 0px 0px #133652 inset;
        }

            .jerry_curve1:after {
                position: absolute;
                content: '';
                width: 43px;
                top: -50px;
                height: 50px;
                left: 2px;
                border-bottom: dotted 1px #FFF;
                background-color: rgba(0, 0, 0, 0);
            }

        .jerry_left_curve {
            width: 12px;
            left: 17px;
            -webkit-transform: scaleX(-1);
            -moz-transform: scaleX(-1);
            -ms-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            transform: scaleX(-1);
        }

            .jerry_left_curve .jerry_curve1:after {
                width: 21px;
            }

        .jerry_curve2 {
            width: 71px;
            height: 29px;
            background-color: rgba(0, 0, 0, 0);
            top: 118px;
            z-index: 100000;
            left: 43px;
            border-bottom: dotted 1px #CACACA;
        }

        .jerry .eye_animate {
            animation: eyes_animation 2s ease 3s infinite;
            -moz-animation: eyes_animation 2s ease 3s infinite;
            -o-animation: eyes_animation 2s ease 3s infinite;
            -webkit-animation: eyes_animation 2s ease 3s infinite;
        }

        .jerry_rh {
            width: 34px;
            height: 15px;
            background-color: #EBC03D;
            top: 161px;
            border-bottom-left-radius: 11px;
            left: 156px;
            z-index: 999999;
            -webkit-transform: rotate(-109deg);
            -moz-transform: rotate(-109deg);
            -ms-transform: rotate(-109deg);
            -o-transform: rotate(-109deg);
            transform: rotate(-109deg);
            box-shadow: 3px 1px 0px 2px #E2B836 inset;
        }

        .gloves_rh {
            width: 20px;
            height: 15px;
            background-color: #EBC03D;
            top: 175px;
            border-bottom-left-radius: 11px;
            left: 152px;
            z-index: 999999;
            -webkit-transform: rotate(-19deg);
            -moz-transform: rotate(-19deg);
            -ms-transform: rotate(-19deg);
            -o-transform: rotate(-19deg);
            transform: rotate(-19deg);
            ;
            box-shadow: 3px 1px 0px 2px #E2B836 inset;
        }

            .gloves_rh:before {
                position: absolute;
                content: '';
                width: 17px;
                left: -19px;
                background-color: #231F20;
                top: -3px;
                height: 22px;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 16px;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
                -webkit-transform: rotate(-4deg) !important;
                -moz-transform: rotate(-4deg) !important;
                -ms-transform: rotate(-4deg) !important;
                -o-transform: rotate(-4deg) !important;
                transform: rotate(-4deg) !important;
            }

            .gloves_rh:after {
                position: absolute;
                content: '';
                width: 13px;
                left: -6px;
                background-color: #231F20;
                top: -2px;
                height: 19px;
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
                -webkit-transform: rotate(3deg) !important;
                -moz-transform: rotate(3deg) !important;
                -ms-transform: rotate(3deg) !important;
                -o-transform: rotate(3deg) !important;
                transform: rotate(3deg) !important;
            }


        /********************************************************/

        @media (min-width: 768px) and (max-width: 991px) {

            .jerry {
                left: 130px;
            }
        }

        @media (max-width: 767px) {

            .jerry {
                margin: 0 auto;
                top: 195px;
                float: none;
                left: 0px;
            }
        }
    </style>
</head>

<body>

    <div class="container">

        <div class="jerry">

            <div class="lights">
                <span class="white_light"></span>
                <span class="dark_light"></span>
            </div>
            <div class="jerry_hair">
                <ul>
                    <li class="h1"></li>
                    <li class="h2"></li>
                    <li class="h3"></li>
                    <li class="h4"></li>
                    <li class="h5"></li>
                    <li class="h6"></li>
                    <li class="h7"></li>
                    <li class="h8"></li>
                    <li class="h9"></li>
                    <li class="h10"></li>
                    <li class="h11"></li>
                    <li class="h12"></li>
                </ul>
            </div>

            <div class="eyes1">
                <div class="eye_animate"></div>

                <div class="glasses"></div>
                <div class="white_part">
                    <div class="brown_eye">
                        <span class="black_part"></span>
                    </div>
                </div>
            </div>

            <div class="eyes2">
                <div class="eye_animate"></div>

                <div class="glasses"></div>
                <div class="white_part">
                    <div class="brown_eye">
                        <span class="black_part"></span>
                    </div>
                </div>
            </div>

            <div class="jerry_hand">
                <div class="jerry_lh"></div>
                <div class="animated_lh">
                    <span class="gloves_lh"></span>
                    <span class="gloves_lh2"></span>
                </div>

                <div class="jerry_rh"></div>
                <span class="gloves_rh"></span>
            </div>

            <div class="black_tie">
                <span class="right_tie">
                    <div class="top_tie"></div>
                    <div class="down_tie"></div>
                </span>
                <span class="left_tie">
                    <div class="top_tie"></div>
                    <div class="down_tie"></div>
                </span>
            </div>

            <div class="jerry_smile">
                <span class="teeth1"></span>
                <span class="teeth2"></span>
            </div>

            <div class="curves">
                <span class="jerry_curve1"></span>
                <span class="jerry_curve1 jerry_left_curve"></span>
                <span class="jerry_curve2"></span>
            </div>

            <div class="clothes">
                <div class="main_jerry"></div>
                <div class="right_shirt jerry_right_shirt"></div>
                <div class="right_shirt jerry_left_shirt"></div>
                <div class="jerry_bottom"></div>
            </div>

            <div class="pocket">
                <div class="logo"></div>
                <span class="lines"></span>
            </div>

            <div class="legs">
                <div class="jerry_shoes"><span class="jerry_small_shoes"></span></div>
                <div class="jerry_shoes jerry_left_shoes"><span class="jerry_small_shoes"></span></div>
            </div>

            <h2>Jerry</h2>


        </div>

    </div>

</body>

</html>

 

Most Popular posts

  • How To Create Image wipe Effect With CSS3 Webkit Animation
    Hi Friends... In this article we learn how to create a Image wipe effect with CSS3. CSS transition and animations provide a way for web de...
  • CSS 3D Cube
    Hi Friends... CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a lang...
  • CSS 3D Transforms
    Hi Friends... There is nothing more flashy and full with eye-candy than an impressive 3D CSS demo. Although its utility outside of demos ...