Tentokrát jen pár kusých poznámek na téma "barvičky a Sass". Řešil jsem automatické odvozování odstínů zadané "základní barvy" (pro pozadí) a nalezení kontrastní barvy, aby na tomto pozadí byl text vždy čitelný.
Sass je na práci s barvami vybavený dost dobře. Nastuduj si Module: Sass::Script::Functions — Sass Documentation. K výše uvedenému zadání mi byly užitečné hlavně funkce lightness($color), lighten($color, $amount) a darken($color, $amount).
Jak na kontrastní barvu jsem dohledal postupně na How to dynamically change text color based on a background color, Compass Color Contrast | Compass Documentation, How to get an accurate contrast color with Sass – Medium.
A dále pak na Sass text-contrast mixin, Sass text-contrast mixin a nakonec pro změnu Sass text-contrast mixin. To jsou různé verze téhož. Výsledek se mírně liší. Však se podívej.
Trochu barevné teorie načerpej z HSL and HSV na Wikipedia a Barevný model – Wikipedie.
S přepočtem barev v různých barevných modelech včetně HSV si pohraj s Color Calculator nebo složitějším Color Wheel - Color Calculator na Sessions College. Na vytvoření celých barevných schémat použij RGB Hex HSL HTML | Colour Calculator | Colour Scheme Tool nebo notoricky známý Barevný kruh | Barevná schémata - Adobe Color CC.
úterý 6. prosince 2016
Přihlásit se k odběru:
Komentáře k příspěvku (Atom)
MAKE Magazine
Technology Review RSS Feeds
Nejčtenější příspěvky
-
Jednou ráno se z ničeho nic na displayi našeho set-top-boxu HD Mediabox od UPC objevila chyba E201 . Něco se stalo. Přes noc. Samo. Vyzkou...
-
Dnešní napájecí zdroje a adaptéry pro notebooky a další zařízení nejsou, jak vás možná při pokusu o rozebrání zaskočí, sešroubované, ale lep...
-
To si zase tak jednou sednu k nějaké té práci a... nespustí se PostgreSQL ! Prý: LOG: invalid value for parameter "lc_monetary"...
-
Když nezapojujete ethernetové kabely denodenně, zřejmě si před každým kabelovým večírkem taky musíte zopakovat, jak ty drátky vlastně patří....
-
Při oprašování naklonovaných Windows jsem si všiml, že jsou seklé aktualizace. Prý chyba 0x8024a105 . Návodů na opravu se dá rychle najít n...
Žádné komentáře:
Okomentovat