Exemple de placeholders sur fond de Tre Cime di Lavaredo dans les Dolomites italiennes

Effet de placeholder sur un input

Les éléments de formulaire HTML input possèdent un attribut placeholder qui permet de donner à l’utilisateur une indication sur une information à entrer. Par exemple, si l’on demande un...
Deux boutons toggles agrandis sur fond de fête de ballons montgolfières dans les monts Sandia à Albuquerque au soleil couchant

Input checkbox, bouton toggle

On peut styliser un input type checkbox en un joli bouton toggle. Cela se fait en javascript pour insérer et envelopper l’input avec des éléments label et span. L’élément...
SASS & Media Queries

SASS et media queries

Cet article traite des mixins pour les media queries avec SASS en définissant et utilisant des largeurs comme points d’arrêts. Cela permet de définir une fois pour toute les...
Sass & Sublime text

Sass et Sublime Text 3

Sass build, Sublime Text Ruby Sass , Syntactically Awesome Style Sheets, a besoin de Ruby pour fonctionner. Si l’on ne dispose pas encore de Ruby, installez-le. Ruby possède un...
Sliding colors button

Effet de couleurs coulissantes sur un bouton – CSS

On cherche à obtenir un effet de couleurs coulissantes sur un bouton en CSS3. On utilise les pseudo-éléments ::before et ::after pour les fonds de couleurs en position absolute...
Changer le texte du bouton Paypal

Boutons Paypal personnalisés

Les boutons Paypal permettent de rapidement offrir un produit à la vente sans la mise en place d’un système compliqué de boutique et de panier. Les ventes sont gérées...
AnimateCSS plugin jQuery

AnimateCSS : plugin pour jQuery

Après avoir fait un article expliquant l’utilisation de animate.css avec jQuery il était bon d’écrire un plugin animateCSS.js permettant d’automatiser la tâche. Ce plugin prend en argument un tableau JSON où l’on...
Positionner le contenu d'une iframe

Positionner le contenu d’une iframe

L’élément HTML <iframe> permet d’obtenir le contenu d’une page HTML de même origine ou d’origine extérieure, intégrée dans la page courante. Il convient d’indiquer la source src HTML à...
Inputs responsives et adaptables en largeur

Ajuster un input avec un label inline pour s’adapter en largeur

Démo : Input qui s’adapte à toute la largeur du bloc avec un label inline. Nom : Adresse de messagerie : Site web : Les labels sont des blocs...