CSS Battle

cssbattle.dev website
cssbattle.dev website

Caution cssbattle.dev this is an enormous time sink. You battle to recreate the examples using as few characters of code as possible.

How the heck did somebody do the first challenge in so few characters? Everyone wants to know!


Reader Mode: The Button to Beat | CSS-Tricks

For reading articles, the core problem is turning my ignorance about an issue into understanding (the funding model for this is a whole other complicated concern). The more obstructions you throw in my way to achieve this goal, the more I am inclined to leave and get my understanding elsewhere—all I’ll remember is how poor a time I had while trying to access your content. What is the value of an ad impression if it ultimately leads to that user never returning?

via Reader Mode: The Button to Beat | CSS-Tricks

Yep, this. A post of mine, ‘Read Only Web’ on my portfolio site, pondered if this would happen more frequently until it became the norm:

Make your content easy to consume the way you intended, otherwise your readers may find another way. So make sure it loads first, and fast, in the way you want it presented.

Lets not settle for a homogenous, text-only tier of the web. Web design is your sites individuality and your control of your brand, so make sure it puts your content first.

We’ve never had more tools available to detect, deliver and present the best experience to users. I hope we can keep them from hitting the reading view permanently.

Read ‘Read Only Web’ on paulfosterdesign.co.uk – no need for reader mode!

Meanwhile on CodePen…

Check out my CodePen profile for my latest dabblings in web code.

  • Expanding Line Nav Effect, three different hover effects for tabs / site navigation using CSS3 transitions and pseudo elements.
  • Excerpt Peek a transition effect to reveal a sample of article text beneath a featured image. A different take on other reveal effects. My most popular Pen so far with and 100+ hearts.

  • Hop Over Notification Badge make badges or alerts hop over a foreground element.

  • Snap.js Logo trying out the latest method from Adobe of modifying scalable vector graphics.

Also see my portfolio site, for complete projects showcasing my web design skills.