Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site
CSS est incontournable en matière de programmation web.
Même si vous développez avec des langages "côté serveur" comme PHP ou Python, votre site aura forcément une ou plusieurs feuilles
de style codées en CSS.
Pour les grands débutants en HTML & CSS, je leur conseille de visiter d'abord le tuto (dans le même site) : Débuter en programmation web (HTML & CSS & PHP)
Le présent tutoriel porte sur le CSS (Cascading Style Sheets) et plus précisément sur sa version 3.
C'est grâce à des règles écrites avec la syntaxe CSS que les pages d'un site sont mises en forme.
En effet et à l'exception de quelques balises (B,S,I,U), le HTML ne gère plus la forme mais se contente de gérer le fond
(sémantique et structure).
Le CSS ne cesse de s'enrichir de nouvelles fonctionnalités. Désormais on peut réaliser de véritables animations uniquement
avec le couple HTML & CSS.
Cependant CSS a ses limites ; certaines modifications du DOM ne peuvent pas être réalisées en CSS.
Par exemple, si vous voulez manipuler les attributs des éléments ou rajouter/supprimer des éléments, il faut recourir au JavaScript.
Vous trouverez dans mon site, un tuto sur JavaScript (et son framework jQuery) :
Tutoriel JavaScript
Compte tenu de la puissance de CSS3, il est possible désormais de dessiner et d'animer uniquement avec le couple HTML & CSS.
Ci-dessous deux animations HTML & CSS (sans aucun script).
Un avion survole la piste d'atterisage en rase-motte. Et à la fin il "crève" l'écran.
Le code de cette animation 3D
Je tiens à préciser d'emblée que je suis l'auteur de la cette deuxième animation.
Je me suis contenté de recopier le code sur un site très intéressant (lien ci-dessous).
Le code est un peu lourd mais c'est assez logique ; il faut dessiner la maison avec moultes détails, les arbres, les flocons, animer les flocons.
Et oui on peut dessiner avec CSS 3. L'élément DIV crée par défaut un rectangle mais avec certaines propriétés on peut
transformer ledit rectangle en cercle (border-radius), en parallélogramme, losange (transformations).
On peut superposer les éléments avec z-index, les ombrer, les colorier avec un dégradé, etc.
Suivez le lien : 24 animations CSS
Vous pensez que j'affiche une image (un fichier JPEG) et bien pas du tout.
Cette image est obtenue uniquement avec un instruction HTML et des règles de style CSS.
Je vous communique le code ci-dessous.