Un nouveau tutoriel CSS 3 pour faire une illustration sans passer par un logiciel de graphisme, cette fois nous allons construire un dragon, en utilisant toujours plus de CSS 3 et toujours plus de détails !
Je vais moins détailler les différentes étapes dans ce tutoriel, car le déroulement est globalement le même que pour le blob, je ne m’attarderai pas non plus que les 2 premiers attributs CSS 3 que nous avons précédemment vu (les dégradés et les border-radius), pour les revoir je vous envoie vers le tuto du blob.
Pour commencer voici l’aperçu et le tout compris :
La démonstration
Le pack à télécharger
Pour ce dragon nous allons introduire 2 nouveautés CSS : transform et shadow.
L’attribut transform permet une bonne quantité d’effet à lui tout seul, en effet vous allez pouvoir effectuer une modification sur élément comme un déplacement, une rotation… C’est un peu comme dans Illustrator la fonction transformation. Ici nous allons seulement effectuer un ‘rotate’ qui applique une simple rotation, mais si vous voulez voir tout ce dont le transform est capable je vous invite à lire cette page de Mozilla (même si elle site le webkit c’est surtout pour les utilisateurs de firefox).
Voici ce que donne une rotation de 30° dans votre CSS :
#rotate {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
Rien de bien sorcier, comme on aime. Voyons maintenant les ombres portées en CSS.
C’est pas bien compliqué non plus, il suffit d’indiquer la couleur hexadécimale dont vous souhaitez partir (vous pouvez donc faire une lumière plutôt qu’une ombre) et vous indiquez à la suite 3 valeurs, dans l’ordre : la distance horizontale, la distance verticale et la taille de l’ombre.
#shadow {
-webkit-box-shadow: #879d20 0 5px 5px;
-moz-box-shadow: #879d20 0 5px 5px;
box-shadow: #879d20 0 5px 5px;
}
L’inconvénient c’est qu’on ne peut pas mettre de valeur en pourcentage apparemment.
Je vous mets à présent la structure HTML que je vais commenter au fur et à mesure. (excusez encore la non-indentation… ^^’)
Encore une fois nous avons beaucoup de zones en overflow:hidden qui nous permettent de ne faire apparaître ce qui nous intéresse.
Sans plus attendre voici le copieux CSS, commenté pour vous y retrouver un peu.
Une chose importante à prendre en compte, toutes les tailles sont en pourcentage et sont relatives à celle de #dragon vous pouvez donc afficher un dragon de 50px ou 10 000px sans problème. Il suffit de remplacer les taille de #dragon.
body {
margin:0;
}
.relative {
position:relative;
width:100%;
height:100%;
}
#dragon {
position:relative;
width:400px;/*Valeur à modifier si vous voulez changer la taille générale du dragon*/
height:400px;/*Idem que width*/
margin-top:10%;/*A modifier où enlever pour positionner autrement dans la page*/
margin-left:35%;/*Idem pour la position*/
}
#corps {
position:relative;
float:right;
width:75%;
height:100%;
background:#bfd12b;
-webkit-border-radius: 50% 50% 10% 0;
-moz-border-radius: 50% 50% 10% 0;
border-radius: 50% 50% 10% 0;
z-index:10;/*Indique le niveau du plan pour les superpositions*/
}
/*_________________________ YEUX _______________________*/
#oeil_gch,
#oeil_drt {
position:absolute;
overflow:hidden;
}
#oeil_gch .fond,
#oeil_gch .lumiere,
#oeil_gch .pupille,
#oeil_gch .lentille,
#oeil_gch .rond,
#oeil_gch .reflet1,
#oeil_gch .reflet2,
#oeil_drt .fond,
#oeil_drt .lumiere,
#oeil_drt .pupille,
#oeil_drt .lentille,
#oeil_drt .rond,
#oeil_drt .reflet1,
#oeil_drt .reflet2 {
position:absolute;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
#oeil_gch {
width:20%;
height:15%;
-webkit-transform: rotate(30deg);/*On fait tourner l'oeil dans son entier*/
-moz-transform: rotate(30deg);
top:20%;
right:55%;
border-top:2px solid #879d20;
}
#oeil_gch .fond {
width:100%;
height:100%;
bottom:15%;
left:0;
background:#a3b726;
}
#oeil_gch .lumiere {
width:100%;
height:100%;
bottom:5%;
left:0;
background:#d9ed38;
}
#oeil_gch .pupille {
width:100%;
height:100%;
bottom:10%;
left:0;
background:#fff;
}
#oeil_gch .lentille {
width:75%;
height:75%;
top:12.5%;
left:20%;
background:#f69154;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.50, #fcbb56),
color-stop(0.75, #f78122)
);
background: -moz-radial-gradient(
center,
#fcbb56 50%,
#f78122 75%
);
}
#oeil_gch .rond {
width:25%;
height:25%;
top:37.5%;
left:50%;
background:#4c4c4c;
}
#oeil_gch .reflet1 {
width:40%;
height:40%;
background:#fff;
top:15%;
left:20%;
}
#oeil_gch .reflet2 {
width:20%;
height:20%;
background:#fff;
top:43%;
left:70%;
}
#oeil_drt {
width:20%;
height:15%;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
top:20%;
right:3%;
border-top:2px solid #879d20;
}
#oeil_drt .fond {
width:100%;
height:100%;
bottom:15%;
left:0;
background:#a3b726;
}
#oeil_drt .lumiere {
width:100%;
height:100%;
bottom:5%;
left:0;
background:#d9ed38;
}
#oeil_drt .pupille {
width:100%;
height:100%;
bottom:10%;
right:0;
background:#fff;
}
#oeil_drt .lentille {
width:75%;
height:75%;
top:12.5%;
right:20%;
background:#f69154;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.50, #fcbb56),
color-stop(0.75, #f78122)
);
background: -moz-radial-gradient(
center,
#fcbb56 50%,
#f78122 75%
);
}
#oeil_drt .rond {
width:25%;
height:25%;
top:37.5%;
right:50%;
background:#4c4c4c;
}
#oeil_drt .reflet1 {
width:40%;
height:40%;
background:#fff;
top:2%;
left:18%;
}
#oeil_drt .reflet2 {
width:20%;
height:20%;
background:#fff;
top:58%;
left:32%;
}
/*_________________________ BOUCHE _______________________*/
#bouche {
position:absolute;
overflow:hidden;
width:80%;
height:30%;
top:36%;
right:0;
}
#bouche .fond {
position:absolute;
width:200%;
height:300%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background:#553c11;
bottom:-100%;
left:0;
}
#bouche .surfond {
position:absolute;
width:200%;
height:300%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background:#fff;
bottom:-100%;
left:80%;
}
#bouche .dent1,
#bouche .dent2,
#bouche .dent3,
#bouche .dent4,
#bouche .dent5,
#bouche .dent6 {
position:absolute;
width:50%;
height:90%;
background:#bfd12b;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
z-index:150;
}
#bouche .dent4,
#bouche .dent6 {
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.50, #fcbb56),
color-stop(0.75, #f78122)
);
background: -moz-linear-gradient(
bottom right,
#bfd12b 80%,
#9ead24 90%
);
}
#bouche .dent5 {
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.50, #fcbb56),
color-stop(0.75, #f78122)
);
background: -moz-linear-gradient(
bottom right,
#bfd12b 70%,
#9ead24 85%
);
}
#bouche .dent1 {
top:-65%;
left:0%;
}
#bouche .dent2 {
top:-65%;
left:45%;
}
#bouche .dent3 {
top:-80%;
left:75%;
}
#bouche .dent4 {
top:90%;
left:-5%;
}
#bouche .dent5 {
top:80%;
left:30%;
}
#bouche .dent6 {
top:85%;
left:70%;
}
/*_________________________ VENTRE _______________________*/
#ventre {
position:absolute;
right:5%;
bottom:0;
width:65%;
height:30%;
background:#a7ba26;
-webkit-border-radius:50%;
-moz-border-radius:20% 20% 20% 0;
border-radius:50%;
}
#ventre .bande1,
#ventre .bande2 {
width:100%;
height:5%;
position:absolute;
top:35%;
}
#ventre .bande2 {
top:65%;
}
#ventre .bande_ombre,
#ventre .bande_lumiere {
width:100%;
height:50%;
background:#95a622;
float:left;
}
#ventre .bande_lumiere {
background:#b9d32b;
}
/*_________________________ PATTES _______________________*/
#pattes .pied_gch,
#pattes .pied_drt {
width:30%;
height:15%;
position:absolute;
bottom:0;
right:55%;
}
#pattes .pied_drt {
right:-20%;
}
#pattes .orteil1,
#pattes .orteil2,
#pattes .orteil3 {
position:absolute;
width:35%;
height:100%;
-webkit-border-radius:50% 50% 0 0;
-moz-border-radius:50% 50% 0 0;
border-radius:50% 50% 0 0;
background:#bfd12b;
background: -webkit-gradient(linear, left top, left bottom, from(#4a6378), to(#ccc), color-stop(0.5, #fff), color-stop(0.5, #6d94b4));
background: -moz-linear-gradient(left, #879d20 5%, #bfd12b);
}
#pattes .orteil1 {
z-index:100;
left:0;
}
#pattes .orteil2 {
z-index:75;
left:30%;
}
#pattes .orteil3 {
z-index:50;
left:60%;
}
#pattes .ongle {
position:absolute;
bottom:0;
left:40%;
width:75%;
height:30%;
background:#eee;
-webkit-border-radius:50% 50% 0 0;
-moz-border-radius:50% 50% 0 0;
border-radius:50% 50% 0 0;
}
/*_________________________ ECAILLES _______________________*/
.ecaille1,
.ecaille2,
.ecaille3,
.ecaille4,
.ecaille5 {
width:10%;
height:7.5%;
position:absolute;
background:#bfd12b;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
-webkit-box-shadow: #879d20 0 5px 5px;
-moz-box-shadow: #879d20 0 5px 5px;
box-shadow: #879d20 0 5px 5px;
}
.ecaille1 {
top:20%;
left:10%;
}
.ecaille2 {
top:65%;
left:15%;
}
.ecaille3 {
top:65%;
left:87%;
}
.ecaille4 {
top:80%;
left:0%;
}
.ecaille5 {
top:5%;
left:60%;
}
/*_________________________ QUEUE _______________________*/
#queue {
position:relative;
float:left;
width:25%;
height:50%;
top:50%;
overflow:hidden;
}
#queue .queue {
position:absolute;
bottom:0;
width:200%;
height:100%;
background:#bfd12b;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
#queue .masque {
position:absolute;
width:100%;
height:50%;
left:50%;
top:-3%;
background:#fff;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
/*_________________________ FLAMME _______________________*/
#flamme {
position:absolute;
width:50%;
height:20%;
right:-40%;
top:36%;
/*-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);*/
z-index:100;
}
#flamme .flamme_gch,
#flamme .flamme_drt {
width:50%;
height:100%;
float:left;
overflow:hidden;
position:relative;
}
#flamme .flamme_gch .feu {
width:200%;
height:200%;
position:absolute;
top:30%;
left:0;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background:#f69154;
}
#flamme .flamme_gch .masque {
width:400%;
height:400%;
position:absolute;
top:70%;
left:-100%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background:#fff;
}
#flamme .flamme_drt .feu {
width:200%;
height:200%;
position:absolute;
bottom:30%;
right:0;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background:#f69154;
background: -webkit-gradient(linear, left top, left bottom, from(#4a6378), to(#ccc), color-stop(0.5, #fff), color-stop(0.5, #6d94b4));
background: -moz-linear-gradient(left, #f69154 60%, #ffce57);
}
#flamme .flamme_drt .masque {
width:400%;
height:400%;
position:absolute;
bottom:70%;
right:-100%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background:#fff;
}
Et voilà le résultat :
C’est assez long comme vous pouvez le voir, mais le résultat c’est un dragon sympa, que vous pouvez positionner où vous voulez (sur fond uni), à la taille que vous voulez.
A bientôt pour un autre tutoriel d’illustration CSS !
Joli boulot!
Une remarque: sauf erreur de ma part, tous les utilisés sont inutiles. Sauf s’il s’agit de faire rentrer l’un ou l’autre navigateur dans le rang (auquel cas je serais curieux d’en savoir plus).
Merci,
Malheureusement il manque l’élément principal de ta question, et je n’arrive pas à voir sur quoi elle portait.
Je suis bien conscient qu’il y a des choses à optimiser, je compte bien améliorer ma technique pour chaque illustration produite, quitte à revenir sur les précédentes.
Alors l’élément viré du commentaire c’est «div class=”relative”»«/div» mais avec des chevrons à la place des guillemets. En général tu as déjà un conteneur qui est positionné en absolu, et tu le doubles en mettant à l’intérieur un DIV avec une classe “relative” (position relative, hauteur et largeur à 100%). Dans ce cas de figure au moins, c’est inutile.
Pour l’ombre et la bordure claire de l’oeil j’ai pensé à l’utilisation de box-shadow (avec deux ombres), mais je crois que certains navigateurs n’acceptent pas les ombres multiples (webkit?).
Tu as tout à fait raison !
Je m’étais persuadé qu’un élément en absolute ne se positionnait que par rapport à un élément spécifiquement en position:relative, et dans mon esprit les enfants d’un éléments en absolue se positionnait par rapport au parent le plus proche en relatif, d’où la création de cette classe relative… (si tu me suis ^^)
Merci infiniment pour cette remarque !
Pour la bordure de l’oeil c’est une possibilité, le seul inconvénient étant qu’ici, toutes les mesures et positionnements se font en % pour que le tout se redimensionne automatiquement, et (je crois que) l’attribut shadow ne gère pas ces %… :/
J’ai essayé sur l’ombre des écailles mais sans succès
(Note pour moi-même : Il va falloir que je m’occupe de ce décalage de sous-commentaires ! :p )
Ouahou! O_o
Assez impressionnant en effet.
Bizarre que les arrondis ne fonctionnent pas sur Chrome : je n’ai pas regardé en détail mais tu as pourtant bien des webkit-border-radius
Intéressant ce dragon !
Ce qui me fait rire c’est la tête du bazard sous Internet Explorer. Même IE8 bien sûr… là il craint un peu le dragon.
Waouh, c’est dingue.
L’idée est originale, et le rendu est vraiment bien, quand on pense que c’est fait sans logiciel de dessin comme Photoshop ou Illustrator !
[...] 6. CSS Dragon [...]
[...] CSS Dragon [...]
[...] adverts – it truly is a good eye opener to what you can do. We’re rather partial to the CSS Dragon – post is in French but the examples is all [...]
[...] adsence 10-7-7 */ google_ad_slot = "5755027623"; google_ad_width = 300; google_ad_height = 250; CSS DragonCSS Monster 相当可爱！Reddit AlienCSS3 CheckboxesCSS 3D 简单但很有创意。 [...]
[...] 6. CSS Dragon [...]
[...] CSS Dragon (CSS Ejderha) [...]
[...] 6. CSS Dragon [...]
[...] 6. CSS Dragon [...]