CSS
HTML
COMPONENTS
CODE HUB
CSS Sepia generátor
Konfiguráció
Sepia
Osztály
Előnézet
Kód
Tanulj meg kódolni Larával
Sajátítsd el a programozási alapokat lépésről lépésre az interaktív AI tutorod segítségével. Lara elmagyarázza a komplex logikát, átnézi a gyakorló feladataidat, és segít szilárd alapokat építeni a szoftverfejlesztésben.
Interaktív kódolási leckék a saját tempódra szabva.
Tanulás indítása LarávalCSS Sepia generátor
A CSS-ben a "filter" tulajdonság segítségével alkalmazhatja a "sepia" hatást az elemekre. A "sepia" hatás barnás, vintage vagy régimódi megjelenést kölcsönöz egy elemnek azáltal, hogy a színeit a barna árnyalataira alakítja át.
Íme, hogyan használhatod a "sepia" hatást CSS-ben:
.sepia-element {
filter: sepia(100%);
}
ebben a példában:
- A ".sepia-element" osztály a "sepia" hatást alkalmazza a célzott elemre.
- "sepia(100%)" 100%-os szepia hatást ad meg, ami azt jelenti, hogy az elem teljes egészében a barna árnyalataiban jelenik meg.
A százalékos értéket beállíthatja a szepia hatás intenzitásának szabályozásához. Például a "sepia(50%)" részben szepiaszínű megjelenést eredményez, az eredeti színek egy részének megőrzésével.
Itt egy másik példa részleges szepiával:
.partial-sepia-element {
filter: sepia(30%);
}
Ebben az esetben a ".partial-sepia-element" osztály 30%-os szepia hatást alkalmaz, ami részleges átalakulást eredményez a barna árnyalataira.
A "sepia" hatást gyakran használják a képek vagy elemek vintage vagy nosztalgikus, régi fényképekre emlékeztető megjelenésének megteremtésére. Ez egy kreatív eszköz, amellyel különleges vizuális stílusokat érhet el, és karaktert kölcsönözhet webdesignjainak.