Archives par catégories: CSS

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, […]

Ouvrir un input au clic sur un bouton radio

Petit tuto pour rappeler la technique js css pour qu’au clic sur un bouton radio, un champ apparaisse en dessous : Ici je montre deux input radio :si je clique sur l’id ‘autre’, un input apparait juste en dessous, et si je clique sur l’autre input radio, le champs se referme, et j’efface les données. […]

Formulaire en plusieurs étapes

Voici un tuto bien lourd sur la possibilité de créer un formulaire multi page :le principe ici est de coder plusieurs formulaires dans la meme page html ou php, mais de n’en montrer qu’un à la fois, et  la fin de l’url du site prendrait donc en paramètre l’ID du formulaire . Au niveau requetes et […]

Les media queries

Ayant travaillé recemment sur le responsive, j’ai réalisé combien il etait difficile d’avoir un rendu similaire sur tous les types de mobiles.En codant pour l’iphone 6, généralement ca passe aussi pour les samsung et windows phone, iphone 5 et 4 sont quasi identiques, les Nokia ont des dimensions et donc  des medias queries qui peuvent rentrer […]