Semplice tutorial CSS. Creare un pupazzo coi CSS

Ho agiunto questo articolo soltanto per mostrare la forza di linguagi CSS e HTML

Luidgi è il fratello minore del talismano ufficiale di Nintendo, Mario. Vediamo come si possa realizarlo completamente in CSS.

Ogni tanto e utile di stacare la spina e divertirsi. Vediamo cosa puo fare uno che conosce bene linguaggi CSS e html.

 

 

 

 

HTML

Come potete notare abbiamo fatto parecchie scatole o blocchi con aiuto del tag <div>

<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>

 

 E ora vedimo come  colorare e modificare il nostro pupazzo. Ovio che sarebbe piu facile crearlo con SVG ma ripetto che ho inserito questo articolo con lo scopo informativo... pero puoi provare anche tu fare qualcosa del genere per verificare le tue conoscenze di  HTML e CSS

CSS:

 

/* 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: 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: 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: 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: 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: 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: 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: 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: 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;
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;
box-shadow: 1px 1px 1px 1px rgba(255, 255, 255, 1);
}
#moustached{
overflow: hidden;
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: radial-gradient(ellipse at center, #3A0A08 1%,#0F0000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a0a08', endColorstr='#0f0000',GradientType=1 );
}
#moustacheg{
overflow: hidden;
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: radial-gradient(ellipse at center, #3A0A08 1%,#0F0000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a0a08', endColorstr='#0f0000',GradientType=1 );
}
#coverd{
transform: rotate(19deg);
left: 8px;
top: -26px;
border-radius: 49%;
width: 61px;
height: 36px;
position: absolute;
z-index: 150;
background: #F2CA9C;
}
#coverg{
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;
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: radial-gradient(center, ellipse cover, #40B232 58%,#269618 64%);
border-radius: 50%;
left: 16px;
top: 71px;
position: absolute;
height: 74px;
width: 118px;
}
#lchapeau {
transform: rotate(2deg);
top: 8px;
background: #3EBE33;
width: 25px;
height: 31px;
position: absolute;
left: 13px;
overflow:hidden;
}
#cachel {
transform: rotate(1deg);
top: -8px;
background: white;
width: 25px;
height: 31px;
position: absolute;
left: 9px;
overflow: hidden;
}
#oreilleg {
transform: rotate(-20deg);
top: 25px;
left: -21px;
border-radius: 51%;
position: absolute;
width: 35px;
height: 55px;
background: #F2CA9C;
}
#oreilled {
transform: rotate(20deg);
top: 25px;
right: -21px;
border-radius: 51%;
position: absolute;
width: 35px;
height: 55px;
background: #F2CA9C;
}
#intoreilleg {
background: radial-gradient(center, ellipse cover, #F2CA9C 50%,#DBA16F 63%,#F2CA9C 77%);
transform: rotate(4deg);
top: 7px;
left: 3px;
border-radius: 51%;
position: absolute;
width: 24px;
height: 38px;
}
#intoreilled {
background:radial-gradient(center, ellipse cover, #F2CA9C 50%,#DBA16F 63%,#F2CA9C 77%);
transform: rotate(-4deg);
top: 7px;
right: 3px;
border-radius: 51%;
position: absolute;
width: 24px;
height: 38px;
}
#cacheoreilleg {
transform: rotate(-3deg);
top: 11px;
left: 2px;
border-radius: 51%;
position: absolute;
width: 20px;
height: 35px;
background: #F2CA9C;
}
#cacheoreilled {
transform: rotate(3deg);
top: 11px;
right: 2px;
border-radius: 51%;
position: absolute;
width: 20px;
height: 35px;
background: #F2CA9C;
}
#sourcilg {
transform: rotate(-6deg);
z-index: 101;
position: absolute;
width: 32px;
height: 43px;
background: radial-gradient(center, ellipse cover, #3A0A08 1%,#0F0000 100%);
border-radius: 49%;
top: 0px;
left: 18px;
}
#sourcild {
transform: rotate(6deg);
z-index: 101;
position: absolute;
width: 32px;
height: 43px;
background: 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;
transform: rotate(-5deg);
position: absolute;
z-index: 19;
background: 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;
transform: rotate(3deg);
position: absolute;
z-index: 19;
background: 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 {
transform: rotate(5deg);
left: 19px;
top: 106px;
position: absolute;
border-radius: 22px;
height: 17px;
width: 12px;
background: radial-gradient(center, ellipse cover, #781201 0%,#520700 100%);
}
#boutcheveuxd {
transform: rotate(5deg);
right: 17px;
top: 106px;
position: absolute;
border-radius: 22px;
height: 17px;
width: 12px;
background:radial-gradient(center, ellipse cover, #781201 0%,#520700 100%);
}​

 

Ci sono dei problemi con visualizzazione in IE7 eIE8 e fa ridere nel IE9.

Prova di capire ogni mossa usata dal autore e impara. Ascolta e guarda  anche il nostro corso di CSS e HTML chi ti aiuterano nel capire tutte le mosse usate dal autore per realizzare pupazzo. E una buona abbitudine di annalizare il lavoro di altri per migliorare le tue conoscenze sul campo di CSS e HTML. Prova di realizzare qualcosa simile e condividi con noi!

Letto 1664 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso