Archives par catégories: CSS

Centrer les colonnes bootstrap

Voici une petite astuce desormais bien connue pour centrer une colonne boostrap Par exemple, pour un site qui contiendrait un conteneur principal sans sidebar, on pourrait donner à la colonne principale la classe suivante: On aurait alors notre colonne fixée à gauche , à cause des règles css bootstrap qui appliquent un float left aux […]

Entourer les titres de deux tirets latéraux en css

Bien des articles ont été rédigés sur la facon d’obtenir deux tirets latéraux autour d’un texte, un titre, comme ici Cet article ci montre les différentes solutions en cours pour parvenir à ce résultat Tous ont des inconvénients ou des avantages, mais le plus adaptable quelque soit la taille du texte reste cet exemple ci: c’est […]

Un menu avec icones open close

Dans ce petit tuto, on va voir comment utiliser des icones autre que celles utilisées par bootstrap notamment, ou font awsome.. On va se servir de Linear Icon qui génère de belles icones comme l’icone menu de ce site. Voici le lien  cdn à mettre dans le header, ou le fichier functions de votre wordpress: La […]

Décaler le scroll des ancres

Dans la plupart des sites actuels, surtout les one pages, on retrouve les fonctions jquery d’ancres, sur les menus, des boutons « descendre », des boutons « back to top » etc.. Je suis tombé sur un site wordpress qui utilise la fonction localScroll, qui applique une fonction permettant d’agir sur tous les liens contenant une ancre.Le problème est […]

Changer de background avec un input radio

Petit mémo css pour changer de background (couleur ou image) au clic sur un input radio:   See the Pen XbqOdr by yuyazz (@yuyazz) on CodePen. Ici a technique, reprise d’un post de Stack Overflow, consiste à rajouter une div en position absolute, ici la div class active, et on la colore en bleu ciel […]

Un menu pour un site latéral ou horizontal

Voici un code pen d’un menu crée pour un site horizontal.. ici je mets le code hml css, pour le menu, le code js pour l’ouverture au clic du menu Le menu baisse ou remonte au clic et reste en position fixe sur la page. See the Pen NqXaaG by yuyazz (@yuyazz) on CodePen. Cliquez […]

Un menu latéral oblique

Voici un code sommaire pour un menu latéal oblique, qui s’ouvre et se referme au clic sur l’icone burger. J’utilise ici icon-font.min.css pour les deux icones d’ouverture et fermeture du menu. Le Js fait le reste See the Pen zGpEwE by yuyazz (@yuyazz) on CodePen.

Faire apparaitre un texte plus large derrière une image

Pas d’explication, juste du code, pour faire apparaitre au survol un texte d’explication à la place de l’image, un texte plus large que l’image, à l’inverse des beaux effets jquery qui la plupart du temps restent à l’intérieur du cadre See the Pen zGpENd by yuyazz (@yuyazz) on CodePen.

Choisir entre deux listes d’input radios

Je n’arrive pas à trouver de titre évocateur pour ce genre de tuto : en fait ici j’ai un formulaire à deux colonnes.de chaque coté une liste d’input radio, pour laisser à l’utilsateur le choix du montant de son don Par défaut tous les input sont en mode disabled, donc on ne peut cliquer dessus;Sauf, […]