Catégorie : CSS & styles

Comment passer une image en noir et blanc avec les filtres CSS ?

Comment passer une image en noir et blanc avec les filtres CSS ?

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 …

+ Read More

Maîtriser les sélecteurs nth-child

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; } …

+ Read More

Découverte de Scrollify : Créer un site en single page

Découverte de Scrollify : Créer un site en single page

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 …

+ Read More

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

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 …

+ Read More

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

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 …

+ Read More

Utilisation de LESS dans Visual Studio – Web essentials

Utilisation de LESS dans Visual Studio – Web essentials

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 …

+ Read More

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

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 …

+ Read More

Un bon éditeur, SublimeText 3

Un bon éditeur, SublimeText 3

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 …

+ Read More

Créer simplement la maquette de son site ou de son application

Créer simplement la maquette de son site ou de son application

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 …

+ Read More

Bootstrap, le design web facilité !

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 …

+ Read More