Articles de la catégorie ‘CSS / CSS3’

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 8

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 15

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 83

Ces derniers jours 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.

Les compteurs en CSS

Lire l'article 7

CSS depuis sa version 2.1 propose un système de compteur relativement méconnu du fait d’une compatibilité relativement récente sur IE. D’autant plus que certains défendront la position suivante : CSS n’est pas fait pour cela, il faut utiliser JavaScript. Soit ! Mais sachez que ça existe. Petite introduction !

Du Retina et HD pour votre site web : image-set, picture et srcset

Lire l'article 15

Retina, ou la haute définition de manière plus générale pour les images de nos sites web pose un problème relatif. En effet depuis la sortie du premier Mac Book Pro à écran Retina (et avant pour certain), la question qui revient le plus souvent est : doit-on boycotter Retina, ou au contraire y accorder de l’importance ?

Une taille de police en fonction de la largeur d’écran

Lire l'article 53

J’ai souvent eu l’occasion à travers mes divers projets Web mobile (responsive), d’avoir à réduire la taille des polices de titre car même un simple mot ne passait pas en largeur. Pour éviter d’avoir une césure sur chaque mot du titre, le plus simple était de s’autoriser une réduction approximative du corps. (approximative… façon de parler). Je vous propose des solutions relative.