CSS Hue-Rotate Generator BÉTA

A CSS-ben a "hue-rotate" hatást a "filter" tulajdonság segítségével alkalmazhatja. A "hue-rotate" hatás lehetővé teszi, hogy egy elem színeit a színkör mentén eltolja, ami a színárnyalat változását eredményezi, miközben a telítettség és a világosság értékei változatlanok maradnak. Ez egy módja annak, hogy érdekes színváltozásokat vagy animációkat hozzon létre a webdesignban.

Íme, hogyan használhatod a "hue-rotate" hatást CSS-ben:

ebben a példában:

• A ".hue-rotate-element " osztály a "hue-rotate" hatást alkalmazza a célzott elemre.
• "hue-rotate(90deg) " 90 fokos elforgatást ad meg a színkörön. Ez azt jelenti, hogy az elem színei 90 fokkal eltolódnak, ami a színárnyalat változását eredményezi.

A szögértéket (fokban) állíthatja be, hogy szabályozza a színárnyalat elforgatásának mértékét és irányát. A pozitív értékek az óramutató járásával megegyező irányba, míg a negatív értékek az óramutató járásával ellentétes irányba forgatják a színeket.

Itt egy másik példa részleges szürkeárnyalatokkal:

Ebben az esetben a ".hue-rotate-element-2" osztály egy "hue-rotate" hatást alkalmaz -45 fokos szöggel, ami a színeknek az óramutató járásával ellentétes irányú eltolódását eredményezi.

A "hue-rotate" effektus kreatív módja a színek manipulálásának és animálásának a weboldalon, ami vizuálisan érdekessé és változatossá teszi a designt.