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, vous avez besoin de solides notions en CSS (et HTML).
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 stylisées.
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 pour de nombreux effets graphiques le
JavaScript devient inutile ; les nouvelles propriétés CSS gèrent les transitions et animations.
Cependant CSS a ses limites ; certaines modifications du DOM ne peuvent pas être réalisées en CSS.
Si vous voulez manipuler les attributs des éléments rajouter ou supprimer des éléments, il faut encore 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 des transformations 3D avec transitions réalisées via CSS3.
Pour tout savoir sur les transformations 2D & 3D en CSS3
On peut même réaliser des animations complexes sans devoir recourir au JavaScript.
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
Les possibilités offertes par CSS3 sont "bluffantes".
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.