On peut vouloir afficher des images en couleur pour des produits à vendre par exemple, mais griser ces images une fois le produit vendu par exemple. Si je crée mon style d’image pour obtenir un rendu comme ceci : Pour le cas où mon produit est vendu et que je souhaite donc mettre l’image en…
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; }…
Pour certains site vitrine, il est parfois adapté de faire une simple page informative mais attractive pour le visiteur. Même si on a pas beaucoup de contenu on a envie d’avoir une présentation offrant une expérience utilisateur sympa qui fera qu’on se souviendra de nous. Un plugin est bien pour réaliser ce type de site…
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…
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…
Web Essentials est une extension bien pratique pour visual studio, et ce qui nous intéresse particulièrement aujourd’hui, c’est l’intégration de styles avec LESS. 1 – Installer Web Essentials Rien de plus simple, ça se passe ici : http://vswebessentials.com/download 2 – Le paramétrage En y accédant par : Outils > Options > Web Essentials > LESS…
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…
J’ai découvert, il y a quelques mois l’éditeur SublimeText3 … Et là, il est rapidement devenu mon « chouchou » ! Bien qu’il ne roule pas des mécaniques (au premier abord), il est en réalité très riche car il est assez facile de créer des plugins pour l’enrichir, ce qui a encouragé la communauté autour de ce…
Afin de commencer un projet avec une idée assez précise des interfaces, il existe plusieurs logiciels qui permettent de réaliser rapidement une maquette. Le Wireframing (maquette en fil de fer) consiste donc à réaliser une maquette de la structure visuelle du projet, que ce soit un site web ou une application, peu importe. Effectivement, les…
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…