Luigui con HTML + CSS3 - 2/3/2013, 1:04 am
Esto lo encontré en codes libres el autor se llama One Div. - Código:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <link href="css/style.css" media="screen, projection" rel="stylesheet" type="text/css"> <title></title> </head> <body> <div id="wrapper"> <div id="chapeau"> <div id="logochapeau"> <div id="lchapeau"> <div id="cachel"></div> </div> </div> <div id="visiere"></div> <div id="visiere2"></div> <div id="visiere3"></div> </div> <div id="tete"> <div id="cheveuxg"></div> <div id="cheveuxd"></div> <div id="sourcilg"></div> <div id="cachesourcilg"></div> <div id="sourcild"></div> <div id="cachesourcild"></div> <div id="oreilleg"> <div id="intoreilleg"></div> <div id="cacheoreilleg"></div> </div> <div id="oeilg"> <div id="pupilleg"> <div id="pupille2g"> <div id="refletoeilg"></div> </div> </div> </div> <div id="oeild"> <div id="pupilled"> <div id="pupille2d"> <div id="refletoeild"></div> </div> </div> </div> <div id="oreilled"> <div id="intoreilled"></div> <div id="cacheoreilled"></div> </div> <div id="nez"></div> <div id="moustacheg"> <div id="coverg"> </div></div> <div id="moustached"> <div id="coverd"></div> </div> <div id="bouche"></div> <div id="cachebouche"></div> <div id="cachebouche1"></div> <div id="cachebouche2"></div> <div id="boutcheveuxg"></div> <div id="boutcheveuxd"></div> <div id="menton"></div> </div> <div id="brasg"> </div> <div id="corps"> </div> <div id="brasd"> </div> <div id="jambeg"> </div> <div id="jambed"> </div> </div> </body> </html> <style>/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
#wrapper { width:340px; height:615px; margin-top: 100px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position:relative; }
#chapeau{ top: 12px; border-radius: 50%; z-index: 20; width: 149px; height: 166px; background: #3EBB33; background: -moz-radial-gradient(center, ellipse cover, #3EBB33 27%, #45932A 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(27%,#3EBB33), color-stop(100%,#45932A)); background: -webkit-radial-gradient(center, ellipse cover, #3EBB33 27%,#45932A 100%); background: -o-radial-gradient(center, ellipse cover, #3EBB33 27%,#45932A 100%); background: -ms-radial-gradient(center, ellipse cover, #3EBB33 27%,#45932A 100%); background: radial-gradient(ellipse at center, #3EBB33 27%,#45932A 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ebb33', endColorstr='#45932a',GradientType=1 ); position: absolute; left: 94px; overflow: hidden; }
#tete { border-bottom-right-radius: 48% 98px; border-bottom-left-radius: 48% 98px; border-top-right-radius: 57% 31px; border-top-left-radius: 57% 31px; z-index: 100; position: absolute; width: 118px; height: 96px; left: 110px; top: 99px; background: #f2ca9c; /* Old browsers */
}
#menton { border-bottom-right-radius: 115px 128%; border-bottom-left-radius: 115px 128%; border-top-right-radius: 83px 89%; border-top-left-radius: 83px 100%; z-index: 100; position: absolute; width: 100px; height: 132px; left: 10px; top: 8px; background: #F2CA9C; } #nez { left: 26px; top: 40px; position: absolute; z-index: 150; border-bottom-right-radius: 100px 200%; border-bottom-left-radius: 100px 200%; border-top-right-radius: 100px 75px; border-top-left-radius: 100px 75px; width: 65px; height: 60px; background: #FDE0AF; background: -moz-radial-gradient(center, ellipse cover, #FDE0AF 17%, #C48769 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(17%,#FDE0AF), color-stop(100%,#C48769)); background: -webkit-radial-gradient(center, ellipse cover, #FDE0AF 17%,#C48769 100%); background: -o-radial-gradient(center, ellipse cover, #FDE0AF 17%,#C48769 100%); background: -ms-radial-gradient(center, ellipse cover, #FDE0AF 17%,#C48769 100%); background: radial-gradient(ellipse at center, #FDE0AF 17%,#C48769 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fde0af', endColorstr='#c48769',GradientType=1 ); }
#oeilg{ overflow:hidden; border-radius: 45%; top: 15px; left: 26px; width: 25px; height: 45px; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(left, #ffffff 0%, #ebe3db 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#ebe3db)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #ffffff 0%,#ebe3db 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #ffffff 0%,#ebe3db 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #ffffff 0%,#ebe3db 100%); /* IE10+ */ background: linear-gradient(to right, #ffffff 0%,#ebe3db 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebe3db',GradientType=1 ); /* IE6-9 */ position: absolute; z-index: 101; } #oeild{ overflow:hidden; border-radius: 45%; top: 15px; left: 65px; width: 25px; height: 45px; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(left, #ffffff 0%, #ebe3db 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#ebe3db)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #ffffff 0%,#ebe3db 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #ffffff 0%,#ebe3db 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #ffffff 0%,#ebe3db 100%); /* IE10+ */ background: linear-gradient(to right, #ffffff 0%,#ebe3db 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebe3db',GradientType=1 ); /* IE6-9 */ position: absolute; z-index: 101; }
#pupilleg { top: 6px; left: 9px; border-radius: 50%; width: 15px; height: 28px; position: absolute; background: #65eefd; /* Old browsers */ background: -moz-linear-gradient(top, #65eefd 52%, #509dcc 75%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(52%,#65eefd), color-stop(75%,#509dcc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #65eefd 52%,#509dcc 75%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #65eefd 52%,#509dcc 75%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #65eefd 52%,#509dcc 75%); /* IE10+ */ background: linear-gradient(to bottom, #65eefd 52%,#509dcc 75%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#65eefd', endColorstr='#509dcc',GradientType=0 ); /* IE6-9 */
border: 1px solid #3C95D6; }
#pupilled { top: 6px; right: 9px; border-radius: 50%; width: 15px; height: 28px; position: absolute; background: #65eefd; /* Old browsers */ background: -moz-linear-gradient(top, #65eefd 52%, #509dcc 75%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(52%,#65eefd), color-stop(75%,#509dcc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #65eefd 52%,#509dcc 75%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #65eefd 52%,#509dcc 75%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #65eefd 52%,#509dcc 75%); /* IE10+ */ background: linear-gradient(to bottom, #65eefd 52%,#509dcc 75%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#65eefd', endColorstr='#509dcc',GradientType=0 ); /* IE6-9 */
border: 1px solid #3C95D6; }
#pupille2g{ top: 4px; left: 3px; position: absolute; border-radius: 50%; width: 11px; height: 19px; background: #0321e5; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #0321e5 31%, #0c1b66 51%, #130a04 90%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(31%,#0321e5), color-stop(51%,#0c1b66), color-stop(90%,#130a04)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #0321e5 31%,#0c1b66 51%,#130a04 90%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #0321e5 31%,#0c1b66 51%,#130a04 90%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #0321e5 31%,#0c1b66 51%,#130a04 90%); /* IE10+ */ background: radial-gradient(ellipse at center, #0321e5 31%,#0c1b66 51%,#130a04 90%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0321e5', endColorstr='#130a04',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
#pupille2d{ top: 4px; right: 3px; position: absolute; border-radius: 50%; width: 11px; height: 19px; background: #0321e5; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #0321e5 31%, #0c1b66 51%, #130a04 90%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(31%,#0321e5), color-stop(51%,#0c1b66), color-stop(90%,#130a04)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #0321e5 31%,#0c1b66 51%,#130a04 90%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #0321e5 31%,#0c1b66 51%,#130a04 90%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #0321e5 31%,#0c1b66 51%,#130a04 90%); /* IE10+ */ background: radial-gradient(ellipse at center, #0321e5 31%,#0c1b66 51%,#130a04 90%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0321e5', endColorstr='#130a04',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
#refletoeilg { left: 4px; top: 3px; width: 2px; height: 2px; border-radius: 4px; position: absolute; background: white; -webkit-box-shadow: 1px 1px 1px 1px rgba(255, 255, 255, 1); box-shadow: 1px 1px 1px 1px rgba(255, 255, 255, 1); } #refletoeild { left: 4px; top: 3px; width: 2px; height: 2px; border-radius: 4px; position: absolute; background: white; -webkit-box-shadow: 1px 1px 1px 1px rgba(255, 255, 255, 1); box-shadow: 1px 1px 1px 1px rgba(255, 255, 255, 1); }
#moustached{ overflow: hidden; -webkit-transform: rotate(-20deg); border-radius: 16px 3px 37px 41px / 17px 2px 97% 88%; right: 3px; top: 63px; z-index: 102; width: 63px; height: 44px; position: absolute; background: #3A0A08; background: -moz-radial-gradient(center, ellipse cover, #3A0A08 1%, #0F0000 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#3A0A08), color-stop(100%,#0F0000)); background: -webkit-radial-gradient(center, ellipse cover, #3A0A08 1%,#0F0000 100%); background: -o-radial-gradient(center, ellipse cover, #3A0A08 1%,#0F0000 100%); background: -ms-radial-gradient(center, ellipse cover, #3A0A08 1%,#0F0000 100%); background: radial-gradient(ellipse at center, #3A0A08 1%,#0F0000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a0a08', endColorstr='#0f0000',GradientType=1 );
}
#moustacheg{ overflow: hidden; -webkit-transform: rotate(20deg); border-radius: 16px 3px 37px 41px / 17px 2px 97% 88%; left: 3px; top: 63px; z-index: 102; width: 63px; height: 44px; position: absolute; background: #3A0A08; background: -moz-radial-gradient(center, ellipse cover, #3A0A08 1%, #0F0000 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#3A0A08), color-stop(100%,#0F0000)); background: -webkit-radial-gradient(center, ellipse cover, #3A0A08 1%,#0F0000 100%); background: -o-radial-gradient(center, ellipse cover, #3A0A08 1%,#0F0000 100%); background: -ms-radial-gradient(center, ellipse cover, #3A0A08 1%,#0F0000 100%); background: radial-gradient(ellipse at center, #3A0A08 1%,#0F0000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a0a08', endColorstr='#0f0000',GradientType=1 );
}
#coverd{ -webkit-transform: rotate(19deg); left: 8px; top: -26px; border-radius: 49%; width: 61px; height: 36px; position: absolute; z-index: 150; background: #F2CA9C; }
#coverg{ -webkit-transform: rotate(-19deg); right: 9px; top: -26px; border-radius: 49%; width: 61px; height: 36px; position: absolute; z-index: 150; background: #F2CA9C; }
#logochapeau { width: 50px; height: 50px; background: white; border-radius: 25px; -webkit-box-shadow: 1px 1px 0px 0px #0B4407; position: absolute; top: 27px; left: 49px; }
#visiere3 { border-radius: 50%; left: 20px; top: 80px; position: absolute; background: #1E790C; height: 50px; width: 110px; } #visiere2 { background: -webkit-radial-gradient(center, ellipse cover, #40B232 58%,#269618 64%); border-radius: 50%; left: 16px; top: 71px; position: absolute; height: 74px; width: 118px; } #lchapeau { -webkit-transform: rotate(2deg); top: 8px; background: #3EBE33; width: 25px; height: 31px; position: absolute; left: 13px; overflow:hidden; }
#cachel { -webkit-transform: rotate(1deg); top: -8px; background: white; width: 25px; height: 31px; position: absolute; left: 9px; overflow: hidden; } #oreilleg { -webkit-transform: rotate(-20deg); top: 25px; left: -21px; border-radius: 51%; position: absolute; width: 35px; height: 55px; background: #F2CA9C; }
#oreilled { -webkit-transform: rotate(20deg); top: 25px; right: -21px; border-radius: 51%; position: absolute; width: 35px; height: 55px; background: #F2CA9C; }
#intoreilleg { background: -webkit-radial-gradient(center, ellipse cover, #F2CA9C 50%,#DBA16F 63%,#F2CA9C 77%); -webkit-transform: rotate(4deg); top: 7px; left: 3px; border-radius: 51%; position: absolute; width: 24px; height: 38px; }
#intoreilled { background: -webkit-radial-gradient(center, ellipse cover, #F2CA9C 50%,#DBA16F 63%,#F2CA9C 77%); -webkit-transform: rotate(-4deg); top: 7px; right: 3px; border-radius: 51%; position: absolute; width: 24px; height: 38px; }
#cacheoreilleg { -webkit-transform: rotate(-3deg); top: 11px; left: 2px; border-radius: 51%; position: absolute; width: 20px; height: 35px; background: #F2CA9C; }
#cacheoreilled { -webkit-transform: rotate(3deg); top: 11px; right: 2px; border-radius: 51%; position: absolute; width: 20px; height: 35px; background: #F2CA9C; } #sourcilg { -webkit-transform: rotate(-6deg); z-index: 101; position: absolute; width: 32px; height: 43px; background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#3A0A08), color-stop(100%,#0F0000)); background: -webkit-radial-gradient(center, ellipse cover, #3A0A08 1%,#0F0000 100%); border-radius: 49%; top: 0px; left: 18px; }
#sourcild { -webkit-transform: rotate(6deg); z-index: 101; position: absolute; width: 32px; height: 43px; background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#3A0A08), color-stop(100%,#0F0000)); background: -webkit-radial-gradient(center, ellipse cover, #3A0A08 1%,#0F0000 100%); border-radius: 49%; top: 0px; right: 24px; }
#cachesourcilg { top: 9px; left: 18px; border-radius: 16px; position: absolute; z-index: 101; height: 35px; width: 35px; background: #F2CA9C; }
#cachesourcild { top: 9px; right: 24px; border-radius: 16px; position: absolute; z-index: 101; height: 35px; width: 35px; background: #F2CA9C; }
#cheveuxg { left: 1px; top: 12px; border-radius: 27px 1px 12px 12px / 49px 15px 89px 77px; -webkit-transform: rotate(-5deg); position: absolute; z-index: 19; background: -webkit-radial-gradient(center, ellipse cover, #781201 0%,#520700 100%); width: 8px; height: 50px; }
#cheveuxd{ right: 1px; top: 12px; border-radius: 0px 22px 12px 12px / 15px 49px 89px 77px; -webkit-transform: rotate(3deg); position: absolute; z-index: 19; background: -webkit-radial-gradient(center, ellipse cover, #781201 0%,#520700 100%); width: 8px; height: 50px; }
#bouche { left: 32px; z-index: 101; top: 93px; border-radius: 50%; height: 20px; width: 56px; position: absolute; background: #A56E4B; }
#cachebouche { left: 25px; z-index: 101; top: 56px; border-radius: 48%; height: 56px; width: 70px; position: absolute; background: #F2CA9C; }
#cachebouche1 { left: 24px; top: 92px; border-radius: 10px; position: absolute; height: 20px; width: 20px; background: #F2CA9C; z-index: 101; }
#cachebouche2 { right: 23px; top: 92px; border-radius: 10px; position: absolute; height: 20px; width: 20px; background: #F2CA9C; z-index: 101; }
#boutcheveuxg { -webkit-transform: rotate(5deg); left: 19px; top: 106px; position: absolute; border-radius: 22px; height: 17px; width: 12px; background: -webkit-radial-gradient(center, ellipse cover, #781201 0%,#520700 100%); }
#boutcheveuxd { -webkit-transform: rotate(5deg); right: 17px; top: 106px; position: absolute; border-radius: 22px; height: 17px; width: 12px; background: -webkit-radial-gradient(center, ellipse cover, #781201 0%,#520700 100%); }</style>
|