CSS : Faisons des petites formes !

CSS

Faisons des petites formes

Bonjour ! Pour apprendre à manier le CSS en s'amusant, on vous propose ce petit jeu où il suffit de donner le code pour faire la forme demandée par le joueur précédent !

Comment ça fonctionne ?

Déjà, rappelons ce qu'est une algorithme :
Un algorithme est une suite d'instructions qui permettent de répondre à un problème.
Ici, c'est simple :
Un membre poste 3 notes de musiques (do - ré - mi - fa - sol - la - si) et expose un problème (assez simple ou complètement louphoque) du genre : Comment aller sur la Lune ?.
Et le membre suivant doit trouver un algorithme (là aussi, simple ou louphoque) pour répondre au problème tout en intégrant les 3 notes de musique dans son algorithme.

Un exemple

Joueur A : J'aimerais un carré vert de 50*50px
Joueur B :

Code:: <div style="border: 1px solid green; width: 50px; height: 50px; background:green;"></div>

Moi j'aimerais un triangle rouge !
Et ainsi de suite !

Pour commencer, j'aimerais un demi cercle gris !

Je ne sais pas si ton histoire de note de musique comptait pour ce jeu aussi aha
Et ça semble amusant comme jeu, mais on peut vraiment faire toutes les formes possibles ? x'3 (perso je sais juste faire le rond et le carré 0w0)

Code:: <div style="width:20px;overflow:hidden;"><div style="border: grey 20px solid; border-radius: 50px; width:0px;"></div></div>

Bon bah du coup j'aimerais un losange bleu.

Ahah :p, tout est possible en CSS en fait !
Faut souvent jouer avec les bordures ou avec les sélecteurs.

Code:: <div style="width: 0;height: 0; border-left: 20px solid transparent;border-right: 20px solid transparent; border-bottom: 32px solid blue;"></div>
<div style=" width: 0;height: 0;border-left: 20px solid transparent;border-right: 20px solid transparent; border-top: 32px solid blue;"></div>

J'aimerais un rectangle en dégradé, de gris à orange !

Voilà ton beau rectangle ^^
Merci Google pour m'avoir aidé, les dégradés, c'est un des trucs que je ne maîtrise PAS !

Code:: <div style="width: 80px;height: 40px; background-image:linear-gradient(gray, orange);"></div>

J'aimerais... attention... un carré avec une bordure en pointillés bleus, et un dégradé virant du rouge au rose à l'intérieur ♥
Oui, j'aime compliquer la vie :c

Voilà !
(Ne connaissant pas le css j'ai galéré, mais c'est fait x) )

Code:: <div style="border: dotted; color: blue; width: 50px; height: 50px; background-image:radial-gradient(pink, red);"></div>

Je voudrais une étoile (si c'est possible, sinon un triangle) rouge foncé avec les pointes noires, et des bordures en relief !

Bon bah je réponds à ma propre demande ! J'ai l'étoile et le motif, mais pas les deux en même temps x). Je n'arrive pas à l'afficher, donc je vous screen ça !

Là je demande un coeur bleu, c'est facile non ? CSS : Faisons des petites formes ! 3613946129

CSS : Faisons des petites formes ! 3613946129

CSS : Faisons des petites formes ! Screen10

Code:: <style type="text/css">

#etoile{
position: relative; margin: 50px 0; position: relative;
display: block; color: #7B0800; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #7B0800; border-left: 100px solid transparent;-moz-transform: rotate(35deg);-webkit-transform: rotate(35deg);-ms-transform: rotate(35deg);-o-transform: rotate(35deg);
}

#Carre{
height: 150px;
width: 150px;
background-color:#7B0800;
background-image: radial-gradient(black 15%, transparent 16%),
radial-gradient(black 15%, transparent 16%);
background-size:60px 60px;
background-position: 0 0, 30px 30px;
border: 10px grey groove;
}

#etoile:before {
position : relative; border-bottom: 80px solid #7B0800;border-left: 30px solid transparent;border-right: 30px solid transparent;position: absolute;height: 0;width: 0;top: -45px;left: -65px;display: block;content: '';-webkit-transform: rotate(-35deg);-moz-transform: rotate(-35deg);-ms-transform: rotate(-35deg);-o-transform: rotate(-35deg);

#etoile:after {
position: relative;
display: block;
color: #7B0800;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #7B0800;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
</style>

<div id="etoile"></div></div>
<div id="Carre"></div>

Code:: <style>#heart{position: relative;width: 100px;height: 90px;}#heart:before,#heart:after{position: absolute;content: "";left: 50px;top: 0;width: 50px;height: 80px;background: blue;-moz-border-radius: 50px 50px 0 0;border-radius: 50px 50px 0 0;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-ms-transform-origin: 0 100%;-o-transform-origin: 0 100%;transform-origin: 0 100%;}#heart:after{left: 0;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);-webkit-transform-origin: 100% 100%;-moz-transform-origin: 100% 100%;-ms-transform-origin: 100% 100%;-o-transform-origin: 100% 100%;transform-origin :100% 100%;}</style>
<div id="heart"></div>

Je pensais être bonne en css, mais j'ai douillé avec cet abruti de cœur é_é

MDVV, je te met au défis de faire un rond avec un déradé de couleur + des petits points qui se répètent ♥