I recently made a console theme for my website. Photos left unmodified looked too clean and fancy to fit in with the theme. I played with the saturation and contrast functions of the CSS filter property, which gave okay results, but not enough. I thought a pixelated look fit in, and decided to see if it would be possible with pure CSS, something like pixel art or perhaps sixel on a low resolution terminal. This Stack Overflow answer led me to the solution of using an SVG filter through a url() value of the filter property.
css posts
CSS: Repeating character borders
Since adding a theme switcher to my site, I’ve created several new simple themes, including a console theme. It is meant to look somewhat like a command line console / terminal. For this theme, regular borders didn’t fit in. I wanted something with repeated characters, looking more like some terminal application output or Markdown would have. Looking for doing this with pure CSS, a Stack Overflow answer helped me come up with a solution.
There is no way with the CSS content or the like to just have a character repeat to fill a given width or height. So the solution has us manually repeat the character in the content of a pseudo element enough times to handle our largest likely container. We position absolutely and use overflow: hidden to prevent our content from expanding our container and to cut it off at the appropriate length. With alignment and padding, we can then have repeating characters that line up properly in a monospace font grid.
Compact about:profiles in Firefox
Firefox allows us to create multiple browser profiles to separate our activities, such as work, personal, finance, etc. It has an about:profiles page to manage and launch these. The page has not gotten much UX love and does not make very good use of space. On load, I can’t see the full second profile on my laptop (Macbook) screen. After living with this a long time, I decided to use userContent.css to customize the appearance so everything fits on one screen and I can quickly and easily find the two things I need most of the time: Each profile’s name, and the button to launch it with.
CSS wishes: add to existing rules
Some months ago, I wrote a 2023 CSS wishlist for things I’d like to see in the spec. Among them was the desire to be able to add to existing CSS values. This would be particularly useful for multi-value properties like transition and transform, although it would also be cool to be able to add to existing numeric values, like 2em more padding than this would otherwise have. There would be difficulties implementing this as described in that post though. I’ve thought of some other possible options that may be less problematic.
More CSS Wishes
After reading through a few more CSS wishlists, such as Chris Coyier’s and Ahmad Shadeed’s, I have come up with some more wishes I have for CSS, in addition to those I brought up in my recent CSS Wishlist post.
Continue reading post "More CSS Wishes"CSS Wishlist
After reading Eric Meyer’s and Dave Rupert’s recent CSS Wishlist, I decided to make my own. Working with CSS for many years, I have come across many things I’d like to see. Many have come about or improved since then, but there are still things I come across that I’d like to see. I agree with many of Eric and Dave’s items, and put them in my own list if I had more to say about them or especially want them. Here is the list of what I could come up with:
Continue reading post "CSS Wishlist"HTML + CSS toggle switch
I had to make a toggle switch widget for work recently. I had not done one before, having used built in or custom check-boxes for that purpose. My boss thought the switch would better fit a simple “form” that turns off and on a single setting though, so I made one.
Continue reading post "HTML + CSS toggle switch"Today, I learned that display: block on a <summary> element removes the disclosure triangle in Firefox.
The min-content in CSS grid apparently takes into account the full width of a <pre> element content, even if you put max-width: 100%; on it.
CSS: checking support for selectors
@supports is a good way to apply an entire block of styles only if (modern) browsers support a particular property-value combo. There is no similar block-level mechanism for selector support. Selectors are automatically ignored if their values or syntax aren’t recognized by the browser, so they basically already do this at the ruleset level.
Except, sometimes you want to apply styles to other elements that don’t use the selector, but only if the browser supports the selector.
Continue reading post "CSS: checking support for selectors"