Voici quelques exemples de diagonales, faites de différentes manières. Il est en effet possible de créer ce genre de design à l’aide d’images ou de svg qu’on insère au début et à la fin de chaque bloc. On peut aussi le faire avec des div coupés en triangles, placés en dur ou en pseudo élément. […]
Sur le net, vous pouvez très facilement trouver un générateur pour à peu près tout et n’importe quoi !! Les développeurs qui les ont conçus facilitent grandement la vie des intégrateurs web, leur permettant d’obtenir les effets désirés en peu de temps Voici donc une liste non exhaustive de générateurs en tout genre theappguruz.com animista.net […]
Dans ce petit mémo, je donne l’exemple d’une page à sections, dont les séparateurs sont en fait des figures svg non linéaires. Pour aller plus vite, j’utilise l’excellent générateur https://getwaves.io/. Cet outil puissant permet de créer en un clic une figure svg comme une diagonale, des vagues arrondies, rectangulaires ou triangulaires ! C’est parti ! […]
Voici un exemple de menu responsive construit avec flexbox. See the Pen flexbox menu/expandable search box/material icons by yuyazz (@yuyazz) on CodePen. Dans ce menu en flexbox, on joue sur l’ordre des éléments et leur visibilité, en fonction de la taille d’écran. Dans le code, le menu est composé d’abord du logo, des éléments de […]
Voici un exemple html/css de blocs extensibles au survol. Un voile d’opacité est ajouté, il se retirz également au survol. Le principe est assez simple : on crée une div d’une certaine largeur, on la décale au survol grâce à la propriété transform:translate, et on la ramène à sa position initiale lorsque le curseur quitte […]
Lors de vos intégrations web, il vous est sans doute déjà arrivé d’avoir une marge à droite avec l’apparition d’une scroll bar horizontale. Il y a un élément dans la page qui sort du flux, mais on ne le voit pas forcément tout de suite. On peut dans ce cas supprimer les blocs un à […]
Voici un exemple de blocs « accordéons », qui s’ouvrent et se ferment au clic sur un élément input. Ici on va utiliser des boutons radio. Je donne ici trois exemples, adaptés de modèles trouvés sur internet. Ces accordéons ne sont pas optimisés pour l’accessibilité. Pour un exemple de référence, reportez vous à l’exemple donné par le […]
Voici un bout de code à appliquer à n’importe quel élément html de vos pages web, pour un effet fondu progressif en css. Voici un rendu visuel, cliquez sur « rerurn » pour observer l’effet. See the Pen Simple css FadeIn effect by yuyazz (@yuyazz) on CodePen.
Pour un site onepage ou dans tout type de configuration, si l’on souhaite placer des ancres sur la page, il se peut qu’il y ait des problèmes de marges ou de padding qui font que la page ne se positionnera pas tout à fait à l’endroit désiré. Typiquement un sous menu en position sticky peut […]
Voici un petit bout de code css à appliquer directement sur vos images ou tout autre bloc de couleur. Imaginons que nous avons une image en background d’une div.home_image. A l’aide de ce bout de code, à modifier bien sûr selon ses besoins, on obtient rapidement un effet de fondu du bas vers le haut. […]