Opacité vs CSS Filter

Paul Fleury — Fri, 20 Dec 2024 14:31:09 +0000

Quand on place du texte sur image on est toujours confronté au problème de la lisibilité.

Je joue souvent avec l’opacité pour corriger ce problème. Et il y a la propriété CSS Filter et ses nombreux effets.

Par défaut je pense que cette dernière propose un rendu plus qualitatif que l’opacité. Mais je veux en avoir le cœur net.

Avec l’opacité

C’est facile. On ajoute une couleur de fond à l’élément parent et on joue avec la propriété opacity de l’image.

.element-parent {
  background-color: #000;
}

.element-image {
  opacity: 0.7;
}

Avec CSS Filter

La propriété filter permet d’appliquer des filtres ou des effets graphiques.
Cette propriété propose les filtres suivants : blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate et sepia.

Le filtre qui m’intéresse ici c’est brightness.
C’est encore plus facile que l’opacité. On applique la propriété filter à l’élément image.

.element-image {
  filter: brightness(0.7);
}

Le résultat

J’ai fait un codepen pour comparer.
A gauche la version opacity et à droite la version filter.
Résultat des courses, je ne vois pas de différence !

Alors si vous vous demandez quelle solution utiliser, je vous dit c'est comme voulvoul. Celle qui vous convient le mieux.

Un blog statique sur mesure avec Notion headless

Paul Fleury — Sun, 15 Dec 2024 05:12:14 +0000

Quand je surfe internet, j’ai la manie d’aller voir sous le capot des sites web que je visite. La plupart du temps la motorisation est assurée par WordPress ou Webflow. Et la surprise, je découvre Super, un outil nocode qui permet de transformer des pages Notion en site web.

J’ai trouvé l’idée très intéressante. Le principe que Notion, mon espace personnel, devienne le back office de mon site web ou de mon blog c’est vraiment cool.

Après je ne vous cache pas que je me sens à l’étroit avec Super. Le nocode ce n’est pas ma came et en plus j’ai pas envie de claquer 150 balles par an.

J’ai décidé de reprendre le concept de Super mais en version jamstack : utiliser Notion en headless pour générer un site statique avec Eleventy et de déployer tout ça avec Vercel.

Voici les étapes du projet en version courte :

Installation de Notion et configuration des tables nécessaires (posts, pages, settings)
Design et développement du blog avec Eleventy
Intégration de l'API Notion via Node.js et le client Notion
Implémentation de l'optimisation d'images avec Sharp et conversion en WebP
Déploiement automatisé sur Vercel via Git

Pour compléter le tout, j’ai ajouté un bouton pour lancer un déploiement à partir de Notion.

En résumé : Notion + Eleventy + Github + Vercel = un blog gratuit, sur mesure et très performant.

Le résultat est ici : https://paulfleury.vercel.app/

Ce test m’a confirmé le gros potentiel de Notion comme solution headless et particulièrement avec les espaces de travail.

DEV Community: Paul Fleury

Opacité vs CSS Filter

Avec l’opacité

Avec CSS Filter

Le résultat

Un blog statique sur mesure avec Notion headless