Skip to content

Articles de la catégorie "CSS / CSS3"

Apprendre le positionnement en s’amusant – Partie 2 : Grid Layout

Lire l'article

Il y a 2 ans (ha ouai…) j’ai écrit un petit article ici : Apprendre le positionnement en s’amusant – Partie 1 : Flexbox. Ca fait un moment que je voulais écrire la deuxième partie sur Grid Layout mais je n’ai jamais vraiment pris le temps de le faire. J’ai parlé de Grid Layout pour la première fois il y a 6 ans (ha ouai x2 !) dans mon article sur The State Of Responsive Web Design 2013.

Webdesign à base de dégradés de couleurs en CSS

Lire l'article 4

La mode des dégradés revient ces derniers temps. Depuis presque un an déjà les Long/Big Gradients en fond d’éléments sont de mise, souvent en fond de page de votre application ou site web. Qu’ils soient linéaires, radiaux ou complètement abstraits, je vous présente quelques idées d’utilisation et le code CSS qui va avec, grâce à l’utilisation de linear-gradient() et radial-gradient(), notamment.

Des propriétés CSS supportées par Firefox…

Lire l'article 7

Firefox supporte certaines fonctionnalités que j’ai hâte d’utiliser en production, mais qui ne sont, à l’heure d’écriture de ces lignes, pas supportées par Chrome, ni Opera. Prenez donc cet article comme une invitation à motiver les autres navigateurs à aller de l’avant, et également comme une possibilité de faire de l’amélioration progressive dans certains cas.

Fast-tap : supprimer le délai de 350ms sur iOS

Lire l'article

Vous connaissez certainement cette fonctionnalité un peu bizarre sur smartphone qui bloque l’action durant un certain temps (350ms) lorsque l’on tapote sur un élément ? Il existe pas mal de techniques en JS pour éviter ce délai, mais ça n’est pas toujours sans effet de bord… Il est possible de le faire en CSS désormais !

Un effet lomographie en CSS

Lire l'article 8

Après un petit article sur l’effet vintage en CSS, voici une autre idée de l’exploitation des filtres CSS sur vos images grâce à la création d’un effet lomographie. Cet effet a tendance à augmenter les contrastes et la saturation des couleurs de la photo elle-même, ou d’un dégradé de couleurs, et peut parfois proposer des fusions d’images (par double exposition).

Un effet délavé sur vos photos en CSS

Lire l'article 5

L’effet délavé en photographie est très en vogue en ce moment. Les utilisateurs de ces effets cherchent l’aspect Vintage, ils cherchent à donner une histoire à leurs photos en leur offrant une apparence vieillie, certains utilisent le terme « authentique ». Voyons comment reproduire cet effet également nommé « Vintage Washout » en CSS.

La méthode Natural Flow First

Lire l'article 8

Il y a quelques semaines, j’ai travaillé sur un court projet web : le site internet de la société WP Media. C’est une simple page avec quelques sections typiques et animations subtiles. J’étais prêt à le coder à la sauce Mobile First, et finalement j’ai pensé à une méthode plus naturelle, je l’ai appelée (Natural) Flow First.

Créer une animation de neige ou de particules en CSS3

Lire l'article 9

Je vous propose aujourd’hui une animation de particules dans un tuto qui affichera une chute de neige en boucle. Il existe souvent une foule de solutions pour ce genre d’animation. Je vous présente une solution en CSS3 en utilisant la propriété animation et les séquences de keyframes.

Créer des colonnes de même hauteur en CSS

Lire l'article 8

Cela peut sembler évident à faire dans la théorie, mais en pratique créer des colonnes de même hauteur quel que soit le contenu de chacune d’elle demande de s’accorder un peu de temps de recherche, notamment si l’on souhaite la solution flexible et dépourvue de « hack » en JS. J’ai quelque chose pour vous !

Effet d’animation CSS3 sur menu vertical

Lire l'article 18

On m’a demandé une vingtaine de fois comment reproduire l’effet d’animation assez simple de mes menus sur la barre latérale de ce blog (si le design actuel est toujours le même d’ici à ce que vous lisiez cet article). Du coup je prends un peu de temps pour vous faire un mini tutoriel et vous expliquer le principe !

SMACSS (en français) – Organisez vos CSS efficacement !

Lire l'article 12

Des méthodologies pour organiser ses CSS, il en existe quelques unes. Elles répondent toutes à des questions de fonctionnement interne, personnel ou sont liées au projet web abordé. SMACSS en propose une plutôt flexible, à découvrir dans le bouquin de Jonathan Snook, récemment traduit en Français par Estelle Bonhomme.

Personnaliser l’aspect de boutons radio et checkbox en CSS

Lire l'article 89

Ces derniers temps je passe un peu de temps sur la recherche autour des éléments de formulaire. Vous savez certainement que historiquement il n’est pas toujours possible de personnaliser l’aspect de contrôles de formulaire pour des raisons d’accessibilité (m’a-t-on dit). Cependant il est vrai que l’apparence très variable de ces éléments est sujet à controverse. Et ce n’est pas un mal.

Knacss – Un framework CSS qui vous la met .w100

Lire l'article 5

Désolé pour ce titre d’article un peu décalé. Le sujet n’en reste pas moins sérieux.
Dans le monde des frameworks nous avons ceux qui font tout, ceux qui servent de « reset » ou encore de « kickstarter ». Knacss en fait pas mal, et vous laisse suffisamment de liberté pour faire le reste.