[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Farticles\u002Fuseful-css-one-liner-trick":3},{"id":4,"title":5,"body":6,"date":59,"description":60,"extension":61,"head":62,"imageUrl":30,"meta":63,"navigation":64,"ogImage":62,"path":65,"robots":62,"schemaOrg":62,"seo":66,"sitemap":67,"stem":68,"__hash__":69},"articles\u002Farticles\u002F19.Useful-css-one-liner-trick.md","Useful CSS one-liner trick",{"type":7,"value":8,"toc":56},"minimark",[9,13,25,38,41,44,53],[10,11,5],"h1",{"id":12},"useful-css-one-liner-trick",[14,15,16,17,24],"p",{},"There is the ",[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FValues\u002Ffilter-function\u002Fgrayscale",[22],"nofollow","grayscale filter"," in CSS that can make your images fully grayscale.",[26,27,31],"v-image",{":hasBorder":28,":rounded":28,"alt":29,"src":30},"true","Applying grayscale filter","\u002Fimg\u002Fuseful-css-one-liner\u002Fgrayscale-logos.png",[32,33,35],"template",{"v-slot:description":34},"",[14,36,37],{},"Applying grayscale to UI elements",[14,39,40],{},"It is useful when you show a list of logos in grayscale by default and bring color back on hover.",[14,42,43],{},"Another trick is to apply grayscale to the whole page. This gives you a different perspective on your UI without color.",[26,45,48],{":hasBorder":28,":rounded":28,"alt":46,"src":47},"Whole page in grayscale","\u002Fimg\u002Fuseful-css-one-liner\u002Fgrayscale-whole-page.png",[32,49,50],{"v-slot:description":34},[14,51,52],{},"A page preview with grayscale applied globally",[14,54,55],{},"This helps you check what draws user attention and whether links, buttons, and interactive elements remain recognizable without color.",{"title":34,"searchDepth":57,"depth":57,"links":58},2,[],"2026-01-07T10:00:00+04:00","A simple CSS trick with grayscale(): use it on images, logos, or even on the whole page to inspect visual hierarchy without color.\n","md",null,{},true,"\u002Farticles\u002Fuseful-css-one-liner-trick",{"title":5,"description":60},{"loc":65},"articles\u002F19.Useful-css-one-liner-trick","qKdCLIn7p4Dd5hbddIgepSS-f_yM9F-lgu7KXdSb344"]