Les joies du CSS ...

Coins « carré » en bordure

Réalisation de coins « carré » en bordure de cadre en utilisant la propriété CSS background-image associée à fonction linear-gradient()..

Slide avec défilement en boucle

Réalisation d'un slide (diaporama) avec défilement en boucle, le but est de calculer les étapes et non la réalisation proprement dite du diaporama.

Système notation par étoiles

Réalisation d'un système de notation par étoiles sans JavaScript.

Animation d'une progress bar

Comment animer simplement des « progress-bars » à l'aide du CSS ou avec une animation gérée en JavaScript.

Effet de coin plié, folded corner

Réalisation d'un effet de coin plié, folded corner en anglais. Cet effet est simple à réaliser et à comprendre.

Ancre cachée par un menu en position:fixed

Comment afficher les liens internes à une page, les ancres, juste en dessous d'un bandeau en position:fixed situé en haut de celle-ci, sous un menu par exemple.

Table scrollable avec colonne fixe

Réalisation d'une <table> scrollable, avec une colonne fixe, en pur CSS en utilisant le positionnement sticky.

Font par défaut des <select>, <button>

Appliquer aux éléments <input>, <select>, <textarea> ou <button> la fonte du parent en utilisant la déclaration CSS font:inherit.

Lien retour haut de page

Faire apparaître un lien « retour haut de page » au scroll de la page et le fixer à une certaine position.

Texte défilant avec départ à droite

Défilement d'un texte à la manière de la balise <marquee>, de droite vers la gauche, avec départ du texte à droite de la fenêtre de défilement.

Panneau latéral coulissant

L'objectif est de faire apparaître un panneau latéral en cliquant sur une « languette » située en haut à gauche de la fenêtre d'affichage.

Personnalisation des <input type="range">

Modifier le style des éléments <input type="range"> est tout à fait réalisable et nous allons voir comment.

Diaporama avec défilement automatique

Réalisation d'un diaporama à défilement continu, le but ici est de calculer les données pour les étapes et non la réalisation proprement dite du diaporama.

Diaporama avec effet fade in/out

Réalisation d'un diaporama avec effet de transition entre images, le but ici est de calculer les étapes et non la réalisation proprement dite du diaporama.

Effet ruban sur un titre

L'effet ruban (Ribbon en anglais) est des plus simple à réaliser en utilisant les pseudo-éléments ::before et ::after

Espace entre éléments « inline »

Comment supprimer les espaces, whitespace, apparaissants entre deux éléments de type display:inline ou display:inline-block et qui peuvent être indésirables.

Texte défilant

Texte défilant horizontalement un peu à la manière des balises <marquee>.

Animation CSS simple

Exemples d'animations basiques.

Progress Bar circulaire

Comment réaliser une « progress bar » circulaire en CSS, et comment se faciliter la vie avec l'utilisation du javascript.

Effet porte coulissante (slide)

Réalisation d'un effet de slide type "porte coulissante" en CSS uniquement.

Effet sur menu multi-niveaux

Effet d'ouverture sur menu horizontal multi niveaux.