dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
TW Toate comenzile Tailwind CSS

Filtre grafice CSS cu blur-, brightness- și contrast- în Tailwind în Tailwind CSS

Filtre, Tranziții, Transformări și Animații Tailwind CSS 3.0+ Q&A / Distribuie cod

Filtre grafice native CSS aplicate direct pe imagini sau elemente pentru efecte de estompare, luminozitate și contrast.

Sintaxă 
blur-sm | brightness-110 | contrast-125 | grayscale

Ce sunt filtrele grafice în Tailwind CSS

Utilizând proprietatea CSS filter, Tailwind oferă o gamă completă de efecte vizuale aplicate direct pe imagini:

  • blur-sm / blur-md: estompează conținutul grafic.
  • grayscale: convertește imaginea în alb-negru (util pentru logo-uri de parteneri cu efect color la hover: grayscale hover:grayscale-0).
  • brightness- și contrast-: ajustează intensitatea luminii și contrastul.
Exemplu Concret: Logo-uri alb-negru care revin la culoare la hover
<img class="grayscale hover:grayscale-0 transition duration-300 opacity-70 hover:opacity-100" src="logo.png" alt="Partener" />

Comunitate & Schimb de cunoștințe

Întrebări & Exemple de Cod: Filtre grafice CSS cu blur-, brightness- și contrast- în Tailwind

Ai o nelămurire despre utilizarea comenzii Filtre grafice CSS cu blur-, brightness- și contrast- în Tailwind sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!

💬

Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!

Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.

Comunitate Adaugă o întrebare sau distribuie un cod

Moderare & Siguranță:

Pentru a menține calitatea și securitatea informațiilor, fiecare întrebare sau fragment de cod/prompt este analizat (manual sau prin moderare asistată de AI) înainte de publicare.