Articles de la catégorie "CSS / CSS3"

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.

Flexbox.ninja est un projet que j’ai commencé il y a quelques années et que je n’avais jamais pris le temps de finir et publier. Je voulais proposer au moins 6 cas pratiques, mais les gens du web m’ont proposé de la publier avec 3 cas et d’ouvrir aux contributions. C’est chose faite, voyons cela plus en détail.

Récemment dans un petit projet assez proche du prototype, j’ai eu à proposer quelques petites choses comme un menu sticky, un scroll-spy, mixé avec du smooth-scroll. Plein d’effets qui demandent quand même quelques lignes de JS. Et bien pas cette fois.

J’ai commencé à apprendre le CSS en jouant avec des flottants et tentant de positionner des éléments en absolute et relative tout en espérant arriver à peu près au résultat escompté dans le navigateur. Pour mettre en page nos sites web nous avons aujourd’hui la chance d’avoir de nouveaux outils à notre disposition : Flexbox et Grid Layout.

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.

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.

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 !

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).

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.

J’ai bossé récemment sur plusieurs sites web, et la requête d’un menu sticky était quasiment systématique. Parfois elle était justifiée, parfois je me rapprochais du contre-exemple ergonomique stéréotypé. (Dois-je utiliser un sticky menu ?) Mais quand même ! Je vous propose de voir ensemble comment on peut faire ça.

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.

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.

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 !

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 !

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.

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.

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.

On va parler un peu mise en page et typographie aujourd’hui, avec une traduction de l’article de David Storey (en) sur le contrôle des césures grâce aux apports de CSS level 4. Rien de complètement utilisable encore, mais l’article me semblait suffisamment intéressant.