Les transformations 3D en CSS3

Les transformations 3D en CSS3

L’une des innovations majeures apportées par le CSS3 est la capacité à “transformer” des éléments. Ces transformations, qui peuvent être effectuées en 2D (sur la plan de la page) ou en 3D, permettent d’enrichir l’expérience utilisateur avec de tout nouveaux types d’effets visuels. Les transformations combinées avec les transitions permettent en effet d’animer des éléments HTML en effectuant des rotations, des transitions ou des changements d’échelle. Nous allons aujourd’hui appliquer ces transformations dans l’espace grâce aux transformations 3D du CSS3 !

Continue reading

Les dégradés de couleurs en CSS3 avec gradient

Un dégradé CSS3 avec gradient

Bonjour à tous !

Aujourd’hui nous allons parler des dégradés en CSS3. Vous en avez probablement déjà rencontré, et peut-être même déjà utilisé via des générateurs. Ce tutoriel très complet va vous permettre d’aller plus loin et de comprendre en détail comment les utiliser, ce qui améliorera les performances d’affichage de votre site en évitant d’avoir à utiliser des images !

Continue reading

Introduction au CSS3

Introduction au CSS3Cette introduction est destinée à ceux qui souhaitent avoir un aperçu global de ce qu’apporte le CSS3. Vous y découvrirez un ensemble conséquent de nouveautés, comment utiliser les préfixes propriétaires afin d’en tirer profit dès maintenant et nous discuterons du caractère non-critique de son utilisation. Il s’agit de la suite logique de l’Introduction à l’HTML5, mais elle peut être lue indépendamment.

Continue reading

Une police personnalisée CSS3 avec @font-face ou Google Font

Une police personnalisée CSS3 avec @font-face et Google Font

L’utilisation de polices personnalisées a toujours été un problème pour les développeurs et les webdesigners. Une image de texte est affichée correctement par tous les navigateurs, tandis q’un vrai texte peut être référencé et sélectionné. Il est à présent possible grâce à la propriété @font-face d’embarquer des polices sur son site, et que celles-ci s’affichent correctement même si l’utilisateur n’a pas la police installée.
Continue reading

Les ombres en CSS3 avec box-shadow

Ombre CSS3 box-shadowCe tutoriel a pour but de détailler l’utilisation de la nouvelle propriété du CSS3 “box-shadow”. Cette puissante propriété permet des réaliser de très beaux effets de volume ou de creux tout en conservant un code d’un poids minimal pour la page, et sans utiliser la moindre image.
Continue reading