| Autor | Zpráva | ||
|---|---|---|---|
| jirka2 Profil |
#1 · Zasláno: 27. 8. 2023, 11:29:57
Ahoj, mám takový drobný problém. Dostanu nějakou barvu a tu potřebuji zesvětlit. Zde je příklad, první div je to vybarven zadanou barvou a ten pod nim je vybarven světlejší.
<div style='background:green;'>Ahoj</div> <div style='background:green;filter:brightness(150%);'>Světlé ahoj</div> <div style='background:lime;'>Ahoj</div> <div style='background:lime;filter:brightness(150%);'>Světlé ahoj</div> <div style='background:hsl(120,100%,50%);'>Ahoj</div> <div style='background:hsl(120,100%,90%);'>Světlé ahoj</div> Díky za inspiraci, Jirka |
||
| ttttttttt Profil * |
#2 · Zasláno: 28. 8. 2023, 15:18:30
Pojem "zesvětlit" není jednoznačně definovaný.
Brightness CSS filtr jen přenásobí RGB složky zadanou konstantou. Se složkami, které jsou nulové nebo na maximu neudělá nic. Lightness v HSL je rozdíl mezi nejvyšší složkou a průměrem nejvyšší a nejnižší RGB složky. To lze zvyšovat i když je některá ze složek na maximu. Jsou i další modely, např. luma. Pak ještě narazíš na to, že vnímání není lineární, změna o 10 % v hodnotách barev, je v tmavých odstínech pro člověka výraznější než změna o 10 % ve světlejších. Ve výsledku záleží na tom,co vnímáš pod "zesvětlit", kterou interpretaci si vybereš. CSS na přímou modifikaci L nemá filtr, v SASS je lighten. |
||
| jirka2 Profil |
#3 · Zasláno: 28. 8. 2023, 16:42:50
ttttttttt:
Díky za reakci. Původní problém byl tento: V PHP generuji jednoduchý čtvereček zadané barvy. A pak jsem chtěl přidat 3D efekt rámečku outset, tedy levý a horní pás světlejší a na opačné straně zase tmavší. To jsem udělal tak, že daným polygonům jsem přidal tu správnou class. To fungovalo do té doby, než jsem zadal barvu lime. Tak jsem to obešel výše popsaným způsobem. Malá komplikovanost nastane, pokud se barva zadá jako název (a nikoliv RRGGBB), ale databáze barev pomohla. Nic jednoduššího pro takovýto SVG efekt jsem nenašel... |
||
|
Časová prodleva: 3 dny
|
|||
| jirka2 Profil |
#4 · Zasláno: 31. 8. 2023, 13:22:04
Ještě se k tomu vrátím, nakonec jsem to obešel následovně: kde to má být světlejší, tam nakreslím polygon s atributy:
fill='white' opacity='0.5' fill='black' opacity='0.2 |
||
| Tomáš123 Profil |
#5 · Zasláno: 1. 9. 2023, 00:12:57
jirka2:
Ak ide iba o border, tak existuje border-style: outset, ktorý robí presne to, čo potrebuješ iba v CSS - funguje ale tak, že stmavuje dolnú a pravú stranu, nie zosvetľuje hornú a ľavú.
|
||
| jirka2 Profil |
#6 · Zasláno: 1. 9. 2023, 08:11:30
Tomáš123:
Ten efekt dělám v SVG. |
||
|
Časová prodleva: 8 měsíců
|
|||
0