Lädt...


🔧 Opacité vs CSS Filter


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

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 propriété 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.

...

🔧 Opacité vs CSS Filter


📈 53.87 Punkte
🔧 Programmierung

🔧 Introduction of CSS, What is CSS, Why we use CSS and How CSS describe the HTML elements


📈 27.76 Punkte
🔧 Programmierung

🔧 Choosing the Right CSS Approach: Tailwind CSS vs Bootstrap vs Vanilla CSS


📈 20.82 Punkte
🔧 Programmierung

🔧 A BRIEF REVIEW OF CSS CASCADING, CSS SELECTORS and CSS SPECIFICITY.


📈 20.82 Punkte
🔧 Programmierung

🔧 Stylify CSS: Automagic CSS bundles splitting into CSS layers in Astro.build


📈 20.82 Punkte
🔧 Programmierung

🔧 CSS Grid: Moving From CSS Frameworks To CSS Grid (2018 and beyond)


📈 20.82 Punkte
🔧 Programmierung

🐧 Combining blue light filter with a grayscale filter results in a better and more pleasant night light mode


📈 17.22 Punkte
🐧 Linux Tipps

🕵️ libMirage 3.2.2 CSO Filter filter-stream.c Heap-based memory corruption


📈 17.22 Punkte
🕵️ Sicherheitslücken

🕵️ ZoneMinder up to 1.32.3 filter.php filter[Query][terms][0][val] cross site scripting


📈 17.22 Punkte
🕵️ Sicherheitslücken

🕵️ ZoneMinder up to 1.32.3 filter.php filter[AutoExecuteCmd] cross site scripting


📈 17.22 Punkte
🕵️ Sicherheitslücken

🔧 AWS: Metric Filter vs. Subscription Filter


📈 17.22 Punkte
🔧 Programmierung

🔧 Codepen logo with filter (filter challenge) by tidycoder


📈 17.22 Punkte
🔧 Programmierung

🔧 CS50 PSet Filter(more) : filter.c


📈 17.22 Punkte
🔧 Programmierung

📰 Snapchat Baby Filter 2024: Ways to Get Baby Face Filter on Snapchat


📈 17.22 Punkte
📰 IT Security Nachrichten

🕵️ Medium CVE-2022-34972: So filter shop by project So filter shop by


📈 17.22 Punkte
🕵️ Sicherheitslücken

🔧 The backdrop-filter CSS property has been unprefixed


📈 15.55 Punkte
🔧 Programmierung

🔧 storm effect with svg filter no css animation no js


📈 15.55 Punkte
🔧 Programmierung

🔧 How to build a dropdown filter component with Tailwind CSS and Flowbite


📈 15.55 Punkte
🔧 Programmierung

🕵️ CVE-2022-22738 | Mozilla Thunderbird up to 91.4 CSS Filter heap-based overflow (Bug 1742382)


📈 15.55 Punkte
🕵️ Sicherheitslücken

🕵️ Vuln: WebKit '-webkit-backdrop-filter CSS' Property Denial of Service Vulnerability


📈 15.55 Punkte
🕵️ Sicherheitslücken

🔧 Tailwind CSS vs. Traditional CSS in a React app: Pros, Cons, and Best Use Cases


📈 13.88 Punkte
🔧 Programmierung

🔧 CSS Hooks and the state of CSS-in-JS


📈 13.88 Punkte
🔧 Programmierung

🔧 Ruby on Rails 8 - Frontend Rápido Usando CSS-Zero como um Frameworks CSS Classless


📈 13.88 Punkte
🔧 Programmierung

🔧 Creating an animated text gradient with Tailwind CSS (and vanilla CSS)


📈 13.88 Punkte
🔧 Programmierung

🔧 CSS: How About Building A Search Engine With CSS?


📈 13.88 Punkte
🔧 Programmierung

🔧 Flex, Grid, and Positioning in CSS: The Ultimate Tailwind CSS Guide


📈 13.88 Punkte
🔧 Programmierung

🔧 Exploring Pigment CSS, a zero-runtime CSS-in-JS library by MUI


📈 13.88 Punkte
🔧 Programmierung

🔧 Learn CSS by Building the Figma Logo in Pure CSS


📈 13.88 Punkte
🔧 Programmierung

🔧 Yumma CSS - The new alternative to modern CSS Frameworks


📈 13.88 Punkte
🔧 Programmierung

🔧 Mojo CSS vs. Tailwind: Choosing the best CSS framework


📈 13.88 Punkte
🔧 Programmierung

matomo