Welcome to CSS JOY (lol)!

A CSS Webring!

This is the home of a new webring that I've decided to set up for those of us who take joy in messing around with CSS :)

Why a webring?

I am enjoying the resurgence of old-web nostalgia, and think it's fun to just land on interesting websites without being funnelled through social media, or searching for them first.

Join us!

Would you like to join the CSS JOY webring?

Contact me with the URL you want to add :)

Webring rules:

  1. Sign up if you enjoy playing with CSS!
  2. Add the webring link(s) to your site.
  3. Don't have anything nasty on your site.
  4. Sara gets to decide what "nasty" means.

Links

Being that you're CSS people, I imagine you will already have strong ideas on how you would like the webring to appear on your website.

Most important are the Previous and Next links, as they allow the ring to be navigated in a circuit. Inclusion of the Random link is up to you.

You will need to replace "example.com/path" with your own URL, the very same one you will give to me, to add to the webring.

<a href="https://webri.ng/webring/cssjoy/previous?via=https://example.com/path">Previous</a>
<a href="https://webri.ng/webring/cssjoy/random?via=https://example.com/path">Random</a>
<a href="https://webri.ng/webring/cssjoy/next?via=https://example.com/path">Next</a>

If your URL ends something like /#anchor, we need to encode it.

Then it will look more like:
https%3A%2F%2Fexample.com%2Fpath%2F%23anchor
I can provide this for you :)

Code

If you would like a snippet to drop in, have at it! 

<div style="border: 2px outset; text-align:center">
  <p style="margin: 0; padding: 0.1em; border: 2px inset">CSS JOY Webring</p>
  <div style="display: flex">
    <a style="flex: 1; margin: 0; padding: 0.1em; border: 2px inset" href="https://webri.ng/webring/cssjoy/previous?via=https://example.com/path">Previous Site</a>
    <a style="flex: 1; margin: 0; padding: 0.1em; border: 2px inset" href="https://webri.ng/webring/cssjoy/random?via=https://example.com/path">Random Site</a>
    <a style="flex: 1; margin: 0; padding: 0.1em; border: 2px inset" href="https://webri.ng/webring/cssjoy/next?via=https://example.com/path">Next Site</a>
  </div>
</div>

That code gives you a cute old-web-style set of links:

CSS JOY Webring

Previous Site Random Site Next Site

(looks like a table, is not a table!)

Placement

I actually don't mind if you want people to land on your usual landing page, and then put the webring links out of the way in another page.
That's OK as long as it's findable within one click!

If you have tucked them away somewhere a couple of levels deep, please submit the location of the webring links as your URL.

💜

Sites already in this webring:

The webring is hosted at webri.ng :)

💜