Maîtriser les sélecteurs nth-child

Que ça soit lors de l’utilisation de liste ou de tableau, le sélecteur css nth-child est bien pratique dans divers cas. On va voir les différentes possibilités. Sélection du premier élément li:first-child { background-color: #008080; } Sélection d’un élément spécifique li:nth-child(2) { background-color: #008080; } Sélection des 5 premiers éléments li:nth-child(-n+5) { background-color: #008080; }…

Un pack icônes bien fait, Font-Awesome !

Si vous avez déjà utilisé Bootstrap, vous connaissez déjà le système de classe pour ajouter une icône sur une balise html. Avec font-awesome, c’est le même principe avec en plus des classes pour gérer la taille, des icônes animées comme des spinner de loading, le tout embarqué dans des fichiers fonts, ce qui donne un…

Idée de création de site CV (téléchargeable)

Aujourd’hui, j’ai refait mon site de présentation dont je voulais partager les sources. Pour ce simple site, j’ai utilisé bootstrap 3 pour le système responsive, le site htmlcodescouleur pour la palette et font-awesome pour les pictogrammes.   Voir la demo de mon site CV gratuit Télécharger les sources Vous pouvez l’utiliser à titre personnel comme…

Design (css) et images pour écrans rétina (ipad3 & +)

Adapter son design à tous les supports (tablettes, smartphone, pc etc…) devient un travail supplémentaire. Pour l’ipad3, nous allons ajouter les medias queries apparues avec les spécifications CSS3, nécessaires et créer nos images afin d’avoir une qualité accrue. Attention, ces media queries ne fonctionnent que si la propriété width=device-width et height=device-height sont désactivées de la balise…

Bootstrap, le design web facilité !

Bootstrap est un framework très utile à la création de site web ou d’application mobile HTML5 créé par Mark Otto et Jacob Thornton et soutenu par Twitter. Cette boite à outils du web designer est bien complète puisqu’elle nous propose, aussi bien des snippets HTML, du CSS responsive design poussé et des composants spécifiques en…

A la découverte de LESS

LESS est un langage de définition de style, du type CSS, mais étoffé de quelques fonctionnalités supplémentaires comme la définition de variables, expressions et fonctions pour un code plus structuré et plus facile a maintenir, et oui c’est possible ! Les variables : Vous pouvez donc définir des variables pour aider a maintenir l’homogénéité de…