Guillaume Duverger - Développement & Graphisme - Blog

Vous êtes ici : Accueil > Démonstrations > CSS > Autres

Formes avancées en CSS

Code :

HTML


<div class="smiley">
<div class="yeux gauche"></div>
<div class="yeux droite"></div>
<div class="sourire">
<div class="coins"></div>
<div class="coins droite"></div>
</div>
</div>

<div class="smiley">
<div class="yeux gauche"></div>
<div class="yeux droite"></div>
<div class="triste">
<div class="coins"></div>
<div class="coins droite"></div>
</div>
</div>

CSS


*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}

/*smiley*/
.smiley{
width:300px;
height:300px;
position:relative;
margin:auto;
border-radius:50%;
background:#ffe632;	/*ie9*/
background:linear-gradient(to bottom,#fffe8d,#f6d23e);		
box-shadow:inset 0 -14px 14px hsla(0,0%,0%,.3),0 2px 10px hsla(0,0%,0%,.6)}
 
.yeux {
width:60px;
height:60px;
background:#222;
border-radius:50%;
position:absolute;
top:70px;
box-shadow:0 2px 0 hsla(0, 0%, 100%, 0.8)}	
 
.yeux.gauche{left:60px}
.yeux.droite{right:60px}
 
.sourire {
width:200px;
height:70px;
border:10px solid #222;
border-top:0;
background:hsla(0,0%,0%,0);
border-radius:0 0 120px 120px / 0 0 90px 90px;
position:absolute;
bottom:50px;
left:50%;
-ms-transform:translatex(-50%);/*centrage ie9*/
-webkit-transform:translatex(-50%);/*centrage webkit*/
transform:translatex(-50%);/*centrage*/
box-shadow:0 2px 0 hsla(0, 0%, 100%, 0.8)}
	
.triste {
width:200px;
height:70px;
border:10px solid #222;
border-top:0;
background:hsla(0,0%,0%,0);
border-radius:0 0 120px 120px / 0 0 90px 90px;
left:50%;
-ms-transform:translatex(-50%) rotate(180deg);/*centrage ie9*/
-webkit-transform:translatex(-50%) rotate(180deg);/*centrage webkit*/
transform:translatex(-50%) rotate(180deg);/*centrage*/
position:absolute;
bottom:70px;
box-shadow:0 2px 0 hsla(0, 0%, 100%, 0.8)} 

.coins {
width:10px;
height:30px;
background:#222;
border-radius:100px/160px;
position:absolute;
top:-12px;
-ms-transform: rotate(65deg);/*IE9*/
-webkit-transform: rotate(65deg);/*webkit*/
transform:rotate(65deg);
left:-12px}
 
.coins.droite{
left:182px;
-ms-transform:rotate(-65deg);/*IE9*/
-webkit-transform:rotate(-65deg);/*webkit*/
transform:rotate(-65deg)}


Support navigateurs :

CSS transforms 2d

Code :

HTML


<div class="tete">
<div class="oreille-gauche"></div>
<div class="oreille-droite"></div>
<div class="goutte"></div>
<div class="cicatrice"></div>
<div class="yeux_chat">
<div class="oeil oeil-droit">
<div class="anim"></div>
<div class="pupille"></div>
</div>
<div class="oeil oeil-gauche">
<div class="anim"></div>
<div class="pupille"></div>
</div>
</div>

<div class="nez">
<div class="trou"></div>
<div class="trou1"></div>
</div>

<div class="moustache"></div>
<div class="moustache1"></div>
<div class="moustache2"></div>
<div class="moustache3"></div>
<div class="moustache4"></div>
<div class="moustache5"></div>

<div class="bouche">
<div class="dent dent-gauche"></div>
<div class="dent dent-droite"></div>
</div>
</div>

CSS


*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}


	/*oreilles*/
.oreille-gauche{
-ms-transform:rotate(-25deg);/*ie9*/
-webkit-transform:rotate(-25deg);
transform:rotate(-25deg);
position:absolute;
top:-70px;
left:80px;
width:0;
height:0;
border-bottom:180px solid #100d25;
border-left:140px solid transparent;
border-right:140px solid transparent}

.oreille-droite{
transform:rotate(25deg);
-ms-transform:rotate(25deg);	/*ie9*/
-webkit-transform:rotate(25deg);
position:absolute;
top:-70px;
right:80px;
width:0;
height:0;
border-bottom:180px solid #100d25;
border-left:140px solid transparent;
border-right:140px solid transparent}

/*Gueule de l'animal*/
.tete{
z-index:-1;
width:900px;
height:580px;
margin:10px auto 100px auto;
background:#100d25;
border-radius:80%;
position:relative}

/*cicatrice tete*/

.cicatrice {
width:50px;
height:300px;
left:320px;
top:10px;
background:linear-gradient(to bottom,transparent 3%,#d3c8ce 35%);
border-radius:0 200%;
position:absolute;
overflow:hidden}

.goutte{
animation:opacite 8s linear infinite;
-webkit-animation:opacite 8s linear infinite;
height:70px;
width:30px;
background:rgb(255,255,255);
background:linear-gradient(to top,rgba(255,255,255,.8) 10%,transparent 90%);
border-radius:50%;
position:absolute;
top:120px;
left:120px;
overflow:hidden}

/*yeux*/
.yeux_chat{
margin:70px auto;
width:520px;
height:100px}

.oeil{
background:#0c493e;
border:4px solid black;
width:200px;
height:180px;
border-radius:40% 120% 5% 120%;
position:relative;
margin-top:50px;
float:left}

.oeil:after {
content:"";
position:absolute;
background:#20bda0;
bottom:0;
left:15px;
width:185px;
height:120px;
border-radius:27% 100% 0% 100%;
border-top:5px solid rgba(43,255,216,.8)}

.oeil:before {
content:"";
z-index:3;
position:absolute;
bottom:0;
left:15px;
width:185px;
height:120px;
border-radius:27% 100% 0% 100%;
border-top:5px solid rgba(43,255,216,.3)}

.oeil-gauche{
-ms-transform:rotatey(180deg);/*ie9*/ 
-webkit-transform:rotatey(180deg); 
transform:rotatey(180deg);  
margin-left:100px}

.oeil-droit .pupille:after {
content:"";
left:20px;
top:25px}

/*animation yeux*/
.anim{ 
background:#28215d;
z-index:10;
position:absolute;
width:200px;
height:180px;
border-radius:40% 120% 0% 120%;
-webkit-animation:clignement 4s infinite;
animation:clignement 4s infinite}

.pupille {
z-index:2;
margin-left:120px;
margin-top:25px;
width:30px;
height:155px;
background:black;
border-radius:100%;
position:relative}

.pupille:after {
content:"";
position:absolute;
width:15px;
height:15px;
border-radius:50%;
top:12px;
left:-5px;
background:radial-gradient(ellipse at center,#ffffff 0%,#f2f2f2 42%,transparent 93%,transparent 100%)}

.bouche {
width:800px;
z-index:-10;
top:-50px;
border:4px solid #100d25;
border-top:0;
height:350px;
margin:-100px auto;
background:#f0f0f0;
border-radius:50%;
position:relative;
overflow:hidden}

.bouche:after {
content:"";
width:700px;
height:300px;
margin:auto;
border-radius:50%;
position:absolute;
background:#100d25;
top:-100px;
left:50px}

.bouche:before {
content:"";
width:800px;
height:350px;
border-bottom:3px solid #100d25;
position:absolute;
left:0;
top:-98px;
border-radius:50%}

.dent {
content:"";
width:30px;
height:30px;
border-bottom:2px solid #444;
border-left:2px solid #444;
position:absolute;
top:178px;
background:#f0f0f0;
left:90px;
-ms-transform:rotate(-20deg);/*ie9*/
transform:rotate(-20deg); 
-webkit-transform:rotate(-20deg)}

.dent-droite {
left:670px;
top:182px;
-ms-transform:rotate(-69deg);/*ie9*/
-webkit-transform:rotate(-69deg);
transform:rotate(-69deg)}

.nez{
width:30px;
height:30px;
border-bottom:2px solid black;
border-left:2px solid black;
position:absolute;
top:260px;
border-radius:50%;
left:430px;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
background:linear-gradient(to bottom,#f69c97,#bc7470)}

.trou{
position:absolute;
top:0;
left:0;
width:10px;
height:10px;
background:#100d25}

.trou1{
position:absolute;
left:20px;
top:20px; 
width:10px;
height:10px;
background:#100d25}

/*moustaches - vous pouvez faire une liste si vous voulez pour plus de simplicite*/
.moustache,.moustache1,.moustache2,.moustache3,.moustache4,.moustache5{
position:absolute;
box-shadow:0 0 5px #000;
border-radius:50%;
height:300px;
width:2px}
.moustache{
top:90px;
left:200px;
background:linear-gradient(to top,#fff 75%,transparent 100%);
-ms-transform:rotate(100deg);/*ie9*/
-webkit-transform:rotate(100deg);
transform:rotate(100deg)}
.moustache1{
background:linear-gradient(to bottom,#fff 75%,transparent 100%);
position:absolute;
top:120px;
left:200px;
-ms-transform:rotate(-90deg);/*ie9*/
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg)}
.moustache2{
background:linear-gradient(to bottom,#fff 75%,transparent 100%);
top:150px;
left:200px;
-ms-transform:rotate(-100deg);
-webkit-transform:rotate(-100deg);
transform:rotate(-100deg)}
.moustache3{
background:linear-gradient(to top,#fff 75%,transparent 100%);
top:90px;
left:700px;
-ms-transform:rotate(-100deg);
-webkit-transform:rotate(-100deg);
transform:rotate(-100deg)}
.moustache4{
background:linear-gradient(to bottom,#fff 75%,transparent 100%);
top:120px;
left:700px;
-ms-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transform:rotate(90deg)}
.moustache5{
background:linear-gradient(to bottom,#fff 75%,transparent 100%);
top:150px;
left:700px;
-ms-transform:rotate(100deg);
-webkit-transform:rotate(100deg);
transform:rotate(100deg)}

/*animation goutte*/
@keyframes opacite{0%{opacity:0;transform:translatey(-60px)}100%{opacity:1;transform:translatey(0)}}
@-webkit-keyframes opacite{0%{opacity:0;-webkit-transform:translatey(-60px)}100%{opacity:1;-webkit-transform:translatey(0)}}

/*animation clignement yeux*/
@keyframes clignement{0%{background:#28215d}10%{background-color:transparent}100% {background-color:transparent}}
@-webkit-keyframes clignement{0%{background:#28215d}10%{background-color:transparent}100%{background-color:transparent}}



Support navigateurs :

CSS animation

CSS transforms 2d

Vous rencontrez un problème avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.