It's been years, many years, actually, since I last built a site with HTML. Recently, I've been wanting to end my participation in the larger web and start contributing to a smaller web. A web that was full of creative people, building cool and fun sites, and sharing information. Not the web of today that is full of companies pumping ads at us, forcing us to use ad blockers to keep us safe, or the companies scraping the web to build their AI models. The web of today is terrible, bloated, and not what the internet was originally created for.

I've deleted my personal and freelance/consulting sites, both built on bloated WordPress, and I have been reintroducing myself to HTML and CSS so I can rebuild my sites. I've been having so much fun. To do this, I've joined https://bearblog.dev for my personal site/blog, and https://neocities.org as a practice space for working on my HTML and CSS. Both are brilliant, and to support both, it's really affordable.

To start my journey of reintroducing myself to HTML and CSS, I read (multiple times) @bw's online book, "HTML for People". You can find it at https://htmlforpeople.com/. And if you enjoy reading it, throw a bit of money Blake's way for all of the hard work.

Anyway, I'll get off my soapbox about the bloated web of today and get back to learning HTML and CSS. My personal site is still a bit crap, but I'm working on it!

#html #css #smallweb #bloatedweb

YouTube is now recommending me a bunch of videos of people making their own cute little HTML websites, usually on Neocities or what they are calling The Indie Web and its giving me hope.

I knew this was a thing, and I knew people are still making websites like this, but it's really fun to see people encouraging people to do the same or making tutorials on YouTube.

@marighoul.bsky.social@bsky.brid.gy

https://youtu.be/Tv223kX0SRg

Tänään olen tehnyt:
– Korjasin kotisivujeni #CSS:ää sarakkeistuksen osalta käytettävämmäksi. Vielä pitäisi heittää muuttuneet sivut palvelimeen. #atkjuttuja
– Silppusin vanhoja asiapapereita saadakseni kansioihin tilaa. #byrokratia
– Kokosin kangaskassillisen kirjoja kirjaston #kierrätyshylly'yn vietäväksi. Saa nähdä lähtevätkö oikeasti sinne vai palaavatko vaivihkaa yksi kerrallaan hyllyyn. #miehenelämää #kotijuttuja

Worked on the Lunatics release page CSS a little.

I had noticed that the page works very poorly on e-ink devices like my InkPad 3 Color reader's browser, because of the animated background effect, which I'm still pretty attached to.

It moves pretty slowly, but it still created updates with constant flickering as my e-reader tried to keep up.

Of course, the page is really designed to distribute or stream video, so it's normally intended for full-motion video browsers. The video is never going to work right on an e-reader.

But there's also credits and other text information on the site.

So, I looked up methods to fix this with CSS media queries, and I think it's fixed now.

It now only animates if the browser reports media type "screen" and feature "update: fast".

And this correctly suppresses animation now on my InkPad 3 Color e-reader. If you happen to have a similar device or other oddball browser, I'd be interested if the page is working for you.

Still working on honoring other parameters like "prefers-reduced-motion", "prefers-color-scheme", and "prefers-contrast". I would like to get those working as well.

Ultimately, I may add a Javascript button to change the behavior manually, but the page currently is HTML and CSS only to keep it lighter weight.

I did also test it in a text-only browser, w3m, where it looks pretty correct. Haven't tried other ones.
#LunaticsProject #WebDesign #CSS #MediaQueries #Testing

I've been unemployed for more than a year. To help bring some money in, I've been trying to get clients that need a website for their business, org, etc. For now, I'm using WordPress to build the sites, but as my HTML and CSS skills improve, I am going to completely move away from WordPress and build sites with HTML and CSS. People keep telling me that it's not possible, but these people are also WordPress, Joomla, and Drupal users and developers. You can totally do it. Some business sites can even be built with static site generators. We don't need all the bloat in website builds.

#html #css #smallweb

Step Gradients With a Given Number of Steps, by @anatudor (@frontendmasters.com):

https://frontendmasters.com/blog/step-gradients-with-a-given-number-of-steps/

That's kind of neat.

https://glass3d.dev/

Styling Emojis for Dark Mode

TIL you can use CSS to apply filters so that emojis look good (well, better anyway) in dark mode.

I've recently changed the style and behaviour for external links on my website. I use them a lot and while the icons I used previously to indicate external links are very clear, they make the text look cluttered to me (see first pic).

Inspired by https://thomasrigby.com (thanks @hryggrbyr !) I opted for a subtler visual difference: dotted underline for inline links and a double underline for external links. To me it looks calmer.

Also, everything now opens in the same tab, so it's up to you to open links in a new tab, if you prefer.

What do you think? Do you have any preference or do you not really care to know if a link is external or internal?

#css #indieweb #webdesign #webdev

I’m in the process of a major technical rearchitecture of my website and as part of that restructure I’m foregoing the use of CSS preprocessor SASS in favor of vanilla CSS. Lots of features I used SASS for, such as variables and nesting, are now a part of native CSS. But one feature I’ve been really missing is mixins.

I was able to approximately replicate this structure of mixins in vanilla CSS using the behavior of custom properties (variables)!

https://chromamine.com/2025/07/mixins-with-vanilla-css/

So I made a thing: #russia​n-speaking visitors are now greeted with an anti-war popup on https://forgoodeyesonly.eu and https://blog.forgoodeyesonly.eu!

Feel free to copy it to your own website! You can try it out without changing your browser's language on Codepen: https://codepen.io/realpixelcode/pen/RNPOmdw

And, yes, you can adjust it to be shown without JavaScript (but to all visitors then), because the popup is actually just an #HTML details element.

I haven't been following the new #CSS gap decorations updates closely, so this post has been a great intro https://css-tricks.com/the-gap-strikes-back-now-stylable/

Though, I must admit, I'm bummed that drawing lines seems to be all we can do with this right now. I thought we'd be able to use images for gap decorations.

CSS Tip!

You created a CSS shape using shape(), and you want to invert it? Easy! With a few lines of code, you have both the main shape and its cut-out version.

https://css-tip.com/invert-shape/

As a bonus, you can also control the space around the inverted shape.

You can find all demos made for & mentioned in the article gathered up in this @codepen collection https://codepen.io/collection/yyNzVe

I wrote a new article for Frontend Masters: Step Gradients with a Given Number of Steps!

Consider this problem: you are given 2 hex codes + a number of steps. How would you code a step gradient? Think about it, then see my solution https://frontendmasters.com/blog/step-gradients-with-a-given-number-of-steps/

Hope you enjoy, a lot of work went into it.

Please tell me if I'm hallucinating or is this the WTAF of the day: do the two rectangles look the same for you in Chromium browsers or does the first have thicker and more faded lines (screen 1)?

They look the same in Firefox and Epiphany for me (screen 2).

https://codepen.io/thebabydino/pen/gbpymQq

Thank you!

Help?

Stupid #CSS #layout question: why isn't my #subgrid respected?

https://codepen.io/thebabydino/pen/xbGeReB