CSS Brighter

Like Matsuko, I also sometimes find videos too dark when watching Netflix or YouTube in the evening. Usually I just turn up my screen brightness, but I’d prefer to brighten only the video itself. The following code snippet lets you do exactly that. /* Brighter Netflix and YouTube videos */ video[src^="blob:https://www.netflix.com/"], video[src^="blob:https://www.youtube.com/"] { filter: brightness(1.4); } The text was automatically translated from German into English. The German quotations were also translated in sense. ...

August 6, 2020 · 1 min · 73 words

Hello Darkness

If you’re using a device that supports dark mode, this little blog will now adapt its appearance to match your system settings. With the help of Jeremy Keith’s description, I was able to implement this very quickly. It’s actually incredibly simple. Just drop the following code into your style.css and define whichever CSS properties you want to apply in dark mode. @media (prefers-color-scheme: dark) { /* Dark mode CSS properties go here */ } You might also consider adding a switch to the blog so users can override the default setting. Thomas Steiner explains this quite well here. ...

March 31, 2020 · 1 min · 115 words

CSS Shadows

Writing shadows in CSS by hand is possible, but it’s a pain. There have been various tools for years to visually create nice-looking shadows. Another tool is from Philipp Brumm. Smooth Shadow For anyone who doesn’t know what I mean, a simple shadow in CSS can look like this: box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), The text was automatically translated from German into English. The German quotations were also translated in sense. ...

January 17, 2020 · 1 min · 81 words

A Single Div

What you can do these days with pure CSS is pretty astonishing. The page A Single Div by Lynn Fisher shows what can be packed into a single div. Everything’s there — from heads and candy to cartoon characters and lovely icons. Really an impressive bit of fun. Thank you Stefan The text was automatically translated from German into English. The German quotations were also translated in sense.

January 11, 2018 · 1 min · 68 words

Edit images with CSS (currently only Webkit)

CSS3 Filters: Altering HTML and Images with just CSS → CSS3 Filters are a quite interesting offshoot from SVG, allowing you to modify HTML elements and images with blurs, brightness and a lot more. In this quick tutorial we’ll go over exactly how they’re going to work. Black-and-white and blur filters should definitely be added to the HTML5 standard. They would make it possible to create some really great effects. ...

July 8, 2012 · 1 min · 90 words