Hoy les dejo uno de los mas bonitos Gadgets Divertidos para blogger que lo vi por internet. Se trata de un Monstruo Tragacursores que esta realizado de un joven diseñador, para ver como funciona este gadget solo tiene que pasar el cursor sobre el , te lo come , se cambia de color y saca algunos sonidos. Para añadir este Gadget Divertido en tu blog, solo tiene que copiar el codigo que esta abajo y pegarlo en tu blog en Diseño - Agregar un Gadget : #cont{ z-index: 11; position: absolute; top: 50%; left: 50%; -webkit-transition: -webkit-transform .3s cubic-bezier(.1, 0, 0, 1); -moz-transition: -moz-transform .3s cubic-bezier(.1, 0, 0, 1); -o-transition: -o-transform .3s cubic-bezier(.1, 0, 0, 1); transition: transform .3s cubic-bezier(.1, 0, 0, 1); } #cont:after { /* shadow */ content: ""; z-index: -1; position: absolute; width: 100px; height: 100px; margin-left: -50px; border-radius: 50px; -webkit-box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px; -moz-box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px; -o-box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px; box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px; -webkit-transform: translateY(-160px) scale(1.4, .5); -moz-transform: translate( -50px, -160px) scale(1.2, .5); -o-transform: translateY(-160px) scale(1.4, .5); transform: translateY(-160px) scale(1.4, .5); } #monster { z-index: 1; position: relative; width: 200px; height: 240px; margin: -120px 0 0 -100px; border-radius: 100px 100px 50px 50px / 160px 160px 80px 80px; text-align: center; background-color: #5e97ed; background-image: -webkit-gradient(radial, 50% 8%, 0, 50% 40%, 120, color-stop( 0, rgba(255,255,255,.8) ), color-stop(.8, rgba(255,255,255, 0) ), color-stop(.8, rgba(0,0,0, 0) ), color-stop( 1, rgba(0,0,0,.33) )), url(noise.png); background-image: -moz-radial-gradient(50% 21% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png); background-image: -o-radial-gradient(50% 21% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png); background-image: radial-gradient(50% 21% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png); -webkit-box-shadow: inset rgba(0,0,0,.5) 0 -10px 50px; -moz-box-shadow: inset rgba(0,0,0,.5) 0 -10px 50px; -o-box-shadow: inset rgba(0,0,0,.5) 0 -10px 50px; box-shadow: inset rgba(0,0,0,.5) 0 -10px 50px; -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -o-transform-origin: bottom; transform-origin: bottom; -webkit-box-reflect: below -3px -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, color-stop(0.6, rgba(0,0,0,.2) ), to( transparent )); -webkit-transform: scale3d(1, 1, 1); /* fixes the reflection after scaling */ -webkit-transition: background-color .5s ease-out; -moz-transition: background-color .5s ease-out; -o-transition: background-color .5s ease-out; transition: background-color .5s ease-out; } /* ---------------------------- ojos ---------------------------- */ #monster .eye:first-child { -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); } .eye { position: relative; width: 60px; height: 40px; margin: 0px auto 5px auto; top: 15%; border-radius: 60px / 40px; background-color: #eee; -webkit-box-shadow: inset rgba(0,0,0,.4) 0 -1px 3px 1px, inset rgba(0,0,0,.5) 0 -5px 20px, rgba(0,0,0,.5) 0 -5px 10px, rgba(255,255,255,.5) 0 5px 10px; -moz-box-shadow: inset rgba(0,0,0,.4) 0 -1px 3px 1px, inset rgba(0,0,0,.5) 0 -5px 20px, rgba(0,0,0,.5) 0 -5px 10px, rgba(255,255,255,.5) 0 5px 10px; -o-box-shadow: inset rgba(0,0,0,.4) 0 -1px 3px 1px, inset rgba(0,0,0,.5) 0 -5px 20px, rgba(0,0,0,.5) 0 -5px 10px, rgba(255,255,255,.5) 0 5px 10px; box-shadow: inset rgba(0,0,0,.4) 0 -1px 3px 1px, inset rgba(0,0,0,.5) 0 -5px 20px, rgba(0,0,0,.5) 0 -5px 10px, rgba(255,255,255,.5) 0 5px 10px; background-repeat: no-repeat; background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 40, color-stop(.12, rgba(0,0,0,1) ), color-stop(.22, hsl(190,50%,50%) ), color-stop(.4, hsl(200,50%,30%) ), color-stop(.5, rgba(255,255,255,0) ) ); background-image: -moz-radial-gradient(50% 50% 0deg, circle, rgba(0,0,0,1) 12%, hsl(190,50%,50%) 22%, hsl(200,50%,30%) 40%, rgba(255,255,255,0) 50% ); background-image: -o-radial-gradient(50% 50% 0deg, circle, rgba(0,0,0,1) 12%, hsl(190,50%,50%) 22%, hsl(200,50%,30%) 40%, rgba(255,255,255,0) 50% ); background-image: radial-gradient(50% 50% 0deg, circle, rgba(0,0,0,1) 12%, hsl(190,50%,50%) 22%, hsl(200,50%,30%) 40%, rgba(255,255,255,0) 50% ); } .eye:before { /* highlight */ content: ""; position: absolute; top: 20%; left: 32%; border-radius: 5px; width: 10px; height: 10px; background-color: #fff; -webkit-transform: skewX(-10deg); -moz-transform: skewX(-10deg); -o-transform: skewX(-10deg); transform: skewX(-10deg); } .eye .lid { position: absolute; border-radius: inherit; width: inherit; height: inherit; background-color: rgba(94,151,237,0.8); -webkit-box-shadow: inset rgba(0,0,0,.2) 0 -1px 3px 1px, inset rgba(0,0,0,.5) 0 -5px 20px, rgba(0,0,0,.6) 0 1px 2px; background-image: -webkit-gradient(radial, 50% 10%, 0, 50% 30%, 40, color-stop( 0, rgba(255,255,255,.8) ), color-stop(.8, rgba(255,255,255, 0) ), color-stop(.8, rgba(0,0,0, 0) ), color-stop( 1, rgba(0,0,0,.33) )), url(noise.png); background-image: -moz-radial-gradient(50% 20% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png); background-image: -o-radial-gradient(50% 20% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 0px 0px; -webkit-mask-image: -webkit-gradient(radial, 50% 120%, 20, 50% 120%, 50, color-stop(.5, rgba(0,0,0,0)), color-stop(.6, rgba(0,0,0,1)) ); -webkit-transform: translate3d(0,0,0); /* fixes a render bug */ } /* ---------------------------- boca ---------------------------- */ #mouth { position: relative; width: 100px; height: 20px; margin: 0 auto; top: 25%; overflow: hidden; border-radius: 100px 100px 50px 50px / 60px 60px 80px 80px; background-color: #111; -webkit-box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px, rgba(0,0,0,.7) 0 -5px 10px, rgba(255,255,255,.7) 0 5px 10px; -moz-box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px, rgba(0,0,0,.7) 0 -5px 10px, rgba(255,255,255,.7) 0 5px 10px; -o-box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px, rgba(0,0,0,.7) 0 -5px 10px, rgba(255,255,255,.7) 0 5px 10px; box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px, rgba(0,0,0,.7) 0 -5px 10px, rgba(255,255,255,.7) 0 5px 10px; /* tongue */ background-repeat: no-repeat; background-position: center 85%; -webkit-background-size: 100px; -moz-background-size: 100px; -o-background-size: 100px; background-size: 100px; background-image: -webkit-gradient(radial, 62% 100%, 0, 62% 100%, 50, color-stop(.3, rgba(255,0,0,1) ), color-stop(.5, rgba(255,0,0,0) )), -webkit-gradient(radial, 38% 100%, 0, 38% 100%, 50, color-stop(.3, rgba(255,0,0,1) ), color-stop(.5, rgba(255,0,0,0) )); background-image: -moz-radial-gradient(62% 100% 0deg, rgba(255,0,0,1) 10%, rgba(255,0,0,0) 30% ), -moz-radial-gradient(38% 100% 0deg, rgba(255,0,0,1) 10%, rgba(255,0,0,0) 30% ); background-image: -o-radial-gradient(62% 100% 0deg, rgba(255,0,0,1) 10%, rgba(255,0,0,0) 30% ), -o-radial-gradient(38% 100% 0deg, rgba(255,0,0,1) 10%, rgba(255,0,0,0) 30% ); } #mouth:before { /* teeth */ content: ""; position: absolute; top: 0; left: 0; right: 0; width: 30px; height: 10px; margin: 0 auto; border-radius: 0px 0px 4px 4px; background-color: #fff9e4; -webkit-background-size: 50%; -moz-background-size: 50%; -o-background-size: 50%; background-size: 50%; background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(0, rgba(0,0,0,.4) ), color-stop(.1, rgba(0,0,0,0) ), color-stop(.9, rgba(0,0,0,0) ), color-stop(1, rgba(0,0,0,.4) ) ); background-image: -moz-linear-gradient(left, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.4) 100% ); background-image: -o-linear-gradient(left, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.4) 100% ); background-image: linear-gradient(left, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.4) 100% ); -webkit-box-shadow: inset rgba(0,0,0,.8) 0 2px 5px 1px; -moz-box-shadow: inset rgba(0,0,0,.8) 0 2px 5px 1px; -o-box-shadow: inset rgba(0,0,0,.8) 0 2px 5px 1px; box-shadow: inset rgba(0,0,0,.8) 0 2px 5px 1px; -webkit-transform: perspective(50) translate3d(0,0,5px) rotateX(-40deg) ; } /* ---------------------------- states ---------------------------- */ /* sleep */ .sleep .eye { background-position: 0 -40px; } .sleep .lid { -webkit-mask-image: -webkit-gradient(radial, 50% 200%, 20, 50% 200%, 50, color-stop(.5, rgba(0,0,0,0)), color-stop(.6, rgba(0,0,0,1)) ); } .sleep #mouth { height: 50px; background-position: center bottom; -webkit-animation: sleep-mouth 2.5s 0 infinite alternate cubic-bezier(.3, 0, .5, 1); } .sleep #monster { -webkit-animation: sleep-monster 2.5s 0 infinite alternate cubic-bezier(.5, 0, .3, 1); } /* hungry */ .hungry #mouth.out { -webkit-transition: height .4s cubic-bezier(0, 0.6, 0.2, 1); -moz-transition: height .4s cubic-bezier(0, 0.6, 0.2, 1); } .hungry .lid { -moz-transform: scaleY(0); /* hide for browsers without mask-image */ -o-transform: scaleY(0); /* hide for browsers without mask-image */ } .hungry #monster { -webkit-animation: hungry-monster .3s 0 1 cubic-bezier(.4, .1, .2, 1); -moz-animation: hungry-monster .3s 1 cubic-bezier(.4, .1, .2, 1); } /* eat */ .eat #monster { background-color: #f932a5; -webkit-animation: eat-swallow-monster .3s 0 1 cubic-bezier(.4, .1, .2, 1), eat-monster .6s .3s infinite alternate cubic-bezier(.5, .1, .5, .9); -moz-animation: eat-swallow-monster .3s 1 cubic-bezier(.4, .1, .2, 1), eat-monster .6s .4s infinite alternate cubic-bezier(.5, .1, .5, .9); } .eat .eye:first-child { -webkit-animation: eat-eye-first .6s 0 infinite cubic-bezier(0, .6, 1, .4); -moz-animation: eat-eye-first .6s infinite cubic-bezier(0, .6, 1, .4); } .eat .eye:nth-child(2) { -webkit-animation: eat-eye-second .6s 0 infinite cubic-bezier(0, .6, 1, .4); -moz-animation: eat-eye-second .6s infinite cubic-bezier(0, .6, 1, .4); } .eat .lid { display: none; } .eat #mouth { height: 2px; border-radius: 0px 0px 500px 500px / 0px 0px 60px 60px; -webkit-box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px, rgba(0,0,0,.7) 0 -2px 10px 2px, rgba(255,255,255,.7) 0 2px 6px 2px; background-position: center 0px; -webkit-animation: eat-mouth .2s 0 infinite alternate cubic-bezier(.5, .1, .5, .9); -moz-animation: eat-mouth .2s infinite alternate cubic-bezier(.5, .1, .5, .9); } .eat #mouth:before { display: none; } #wrapper.eat { -webkit-transform: scale3d(1.08, 1.08, 1); -moz-transform: scale(1.08, 1.08); -o-transform: scale(1.08, 1.08); transform: scale(1.08, 1.08); -webkit-transition: -webkit-transform .1s cubic-bezier(.1, .3, 0, 1); -moz-transition: -moz-transform .1s cubic-bezier(.1, .3, 0, 1); -o-transition: -o-transform .1s cubic-bezier(.1, .3, 0, 1); transition: transform .1s cubic-bezier(.1, .3, 0, 1); } /* ---------------------------- animation webkit ---------------------------- */ /* sleep */ @-webkit-keyframes sleep-mouth { 0% {} 100% { -webkit-transform: scale3d(1.04, 1.05, 1); } } @-webkit-keyframes sleep-monster { 0% {} 100% { -webkit-transform: scale3d(1.08, .92, 1); } } /* hungry */ @-webkit-keyframes hungry-monster { 0% {} 20% { -webkit-transform: scale3d(.8, 1.1, 1); } 100% { -webkit-transform: scale3d( 1, 1, 1); } } /* eat */ @-webkit-keyframes eat-swallow-monster { 0% {} 20% { -webkit-transform: scale3d(1.2, .9, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @-webkit-keyframes eat-monster { 0% {} 100% { -webkit-transform: scale3d(1.02, .98, 1); } } @-webkit-keyframes eat-mouth { 0% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(15px) scale3d(0.9, 1.2, 1); } } @-webkit-keyframes eat-eye-first { 0% { background-position: 0 -60px; -webkit-transform: scale3d(.6,.6,1) translate3d(0,-5px,0); } 100% { background-position: 0 60px; -webkit-transform: scale3d(.8,.8,1) translate3d(0, 5px,0); } } @-webkit-keyframes eat-eye-second { 0% { background-position: 0 60px; -webkit-transform: scale3d(1,1,1) translate3d(0,0,0); } 100% { background-position: 0 -60px; -webkit-transform: scale3d(.8,.8,1) translate3d(0,0,0); } } /* ---------------------------- animation moz ---------------------------- */ /* hungry */ @-moz-keyframes hungry-monster { 0% {} 20% { -moz-transform: scale(.8, 1.1); } 100% { -moz-transform: scale( 1, 1); } } /* eat */ @-moz-keyframes eat-swallow-monster { 0% {} 20% { -moz-transform: scale(1.2, .9); } 100% { -moz-transform: scale(1, 1); } } @-moz-keyframes eat-monster { 0% {} 100% { -moz-transform: scale(1.02, .98); } } @-moz-keyframes eat-mouth { 0% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(15px) scale(0.9, 1.2); } } @-moz-keyframes eat-eye-first { 0% { background-position: 0 -60px; -moz-transform: scale(.6,.6) translate(0,-5px); } 100% { background-position: 0 60px; -moz-transform: scale(.8,.8) translate(0, 5px); } } @-moz-keyframes eat-eye-second { 0% { background-position: 0 60px; -moz-transform: scale(1,1); } 100% { background-position: 0 -60px; -moz-transform: scale(.8,.8); } }

read more: Gadget divertido " El Monstruo Tragacursores"