Ici le but est de créer une ombre sur les coins, pour donner l’impression qu’on a devant soi la page d’un livre. Sur le net, vous trouverez une foule d’exemples pour des ombres horizontales. En revanche pas grand chose sur des ombres verticales. Voici donc un exemple. Il doit y avoir une façon plus simple, […]
Voici une fonctionnalité bien pratique pour créer ses listes dynamiques sans avoir à passer par des pseudos éléments avec images. On commence par créer une instance du compteur avec l’attribut counter-reset sur la liste. On annule le style par défaut avec le list-style-type:none. Dans mon exemple, je ne me sert pas de ce code par […]
Ce genre de design est surtout visible sur les sites e-commerce ou les formulaires multi-étapes. On affiche des numéros, au clic sur un bouton on passe à l’étape suivante. Les numéros permettent de voir où l’on se situe. Voici donc un exemple simple, les numéros sont grisés par défaut (opacity;0.5) et au clic s’affichent à […]
De plus en plus de sites utilisent cette technique de surlignement des liens, parfois débordant sur le mot lui même. Au survol, le surlignage recouvre tout ou partie du lien. Voici quelques exemples de surlignement et d’effets au survol : On utilise ici les propriétés css background-image, linear-gradient et transition. Pour le dernier, quelques propriétés […]
Si l’on se réfère à la page référence, « La propriété shape-outside définit une forme (qui peut ne pas être un rectangle) autour de laquelle le contenu en ligne devra « s’écouler ». Cette propriété permet donc de contourner un élément en épousant sa forme. On peut utiliser une valeur avec un mot clé Une valeur […]
Voici un CodePen dans lequel je teste différentes solutions souvent citées sur stackoverflow. Le but est de faire en sorte que la div enfant déborde et prenne toute la largeur de l’écran. See the Pen Full Width Containers in Limited Width Parents by blogob (@yuyazz) on CodePen. La solution la plus pratique est la deuxième […]
Ce mémo est une adaptation de l’article posté par l’agence Themetry. A peu près tous les sites ont un footer disposant de blocs de contenu : des sous menus, des liens, un logo, un calendrier ou tout autre élément décoratif. C’est particulièrement vrai sur les thèmes premium des CMS tels que wordpress. Des sidebar ou […]
Voici un exemple de page oblique crée uniquement en html/css. C’est le genre de design que l’on voit souvent sur des images, portfolio ou présentation de thèmes. Rarement codées puisque très difficiles à maintenir, notamment le côté responsive qui est impossible à réaliser, ca reste néanmoins un exercice intéressant. Le rendu en tout cas est […]
Voici un exemple de grille flex, trouvée sur le CodePen de Ruslan Pivovarov. Reprenant la logique bootstrap, elle comporte la base d’une disposition en 12 colonnes et permet de structurer sa page très facilement. Pour l’utiliser, il faut se servir du « container » pour englober son contenu. A l’intérieur on glisse autant de row que nécessaire. […]
Les infographies sont partout, du bloc au site plus sérieux, et nous sommes peu nombreux à rendre cette image descriptive accessible. Pour rendre une infographie ou toute autre image complexe accessibles, une simple alternative textuelle ne suffit pas. Les infographies sont là généralement pour regrouper tout un tas d’informations de manière ludique visuelle et concise. […]