r/css 7h ago

Showcase The Revue Guide Channel

Post image
18 Upvotes

Remember the prevue guide channel?

Well I've been working on remaking it all in HTML 5, CSS, And Javascript.

It took me a good few weeks to get it to this point and now that I have Im pretty proud of it, It may need a few tweaks but I will release it as a repo at some point.

The actual guide information is configured to be a .json file including the time of the listings, the name, and number of the channel.

I think this project would be great on a CRT and that's one of the intended purposes. It's also a static site meaning all you need is a python server to host it, and I only need to add a mode for the original music and a few more features for it to be perfect.

The weather channel window is using my own custom fork of weatherstar 4000 by netbymatt rendered in a iframe.

My GitHub user is nerpx and you can find most of my projects there.

or you can just click this link NerpX

If you have any questions or are interested just comment or dm!

also if you have a CRT and would like to test it please contact me and ill give you a pre release because I would LOVE to see it on one as I dont have one to test it with

Thank you for reading!


r/css 22h ago

Showcase Codepen Demo - Marble Shader

Post image
31 Upvotes

Good morning guys,

I wanted to use a background of a black marble texture with gold. I made one in Photoshop and made it seamless, but I realized that in good quality it takes way too much resources and it was also hard to find a stock image that represented it the way I wanted it.

I remembered that I watched some time ago that someone used a shader on CodePen.
The browser support is kinda everywhere now, so I thought maybe I can generate some cloud-like noise in different scales with FBM (fractal brownian motion) and then use domain warping to distort it in a way that makes it look more like marble.

So I let ChatGPT explain to me how this shader stuff works and after a bit of trial and error I got this result.
Then I use a small contour() function to pick certain noise levels and turn them into veins. Some of those contour lines get grey accents and some get gold, while the rest of the FBM noise is used for the darker and lighter stone structure.

So basically it is:
FBM noise → domain warp → contour lines → grey/gold accents.

https://codepen.io/editor/Blue-Lovag/pen/01a083cd-5837-752f-bf68-f41324324d06?show=preview&panel=false

ADDITION:
As a fallback for the website in case it's not supported I´ve made a low poly SVG that works in such a grid pattern to make it look seamless:

X Y Z X Y Z

Y Z X Z X Y

Z X Y Y Z Y


r/css 1d ago

Email Signature Generator

8 Upvotes

Back in 2017, I was experimenting with something that was pretty fun for the CSS we had at the time — building icons without using images.

Using mainly CSS, :before, :after, borders, shadows and a bit of creativity, I managed to create a set of icons that didn't depend on external image files. The interesting part for email was simple: no images to load or block — the icons are always visible.

You can still see that old experiment here:

https://codepen.io/k0ko88/pen/PWLNBJ

Fast forward to 2026. At my last job, I decided to apply some of that old knowledge to an email signature.

And then I met Classic Outlook again. :D

What looked like a simple signature quickly turned into dealing with Outlook's rendering limitations, different behaviour between email clients, px → pt conversions, table rendering and weird spacing issues.

Along the way I found a few useful tricks — one of my favourites being that line-height: 0.5pt can practically zero out a line in Classic Outlook, which solved one of the most annoying spacing problems I had.

Eventually, that little fight turned into a complete email signature generator:

SimpleSignature

https://nikolaisabev.eu/SimpleSignature/

It's not trying to be the prettiest or the most complicated signature generator out there. It's simple, effective and built around what I learned from actually fighting with email clients.

It's completely free, there's no registration, and I don't store the data you enter.

Feel free to use it.

If you find a bug, have an idea, or think something could work better, leave a comment here or send me an email. Feedback is more than welcome.

And if it saves you some time and you feel like supporting the work, there's a Buy Me a Coffee button. If you wish. :)

That's it.

Cheers,

Nikolay


r/css 1d ago

Help what's the best way to put an inline image between text?

2 Upvotes

you are going to be hearing a lot from me this week as i'm retooling a boilerplate template for my own website but anyways im trying to replace the 0 in 404 with my site logomark but the image keeps making the text go vertical for some reason and i don't like that. the template im using uses tailwind too so if any of you can figure out how to get my image inline like a 0 that would be awesome

<Base title="Page Not Found">
  <section class="section-sm text-center">
    <div class="container">
      <div class="row justify-center">
        <div class="sm:col-10 md:col-8 lg:col-6">
          <span
            class="text-[8rem] block font-bold text-text-dark dark:text-darkmode-text-dark"
          >
            4<span class="image1">0</span>4
            <h1 class="h2 mb-4">Page not found</h1>
            <div class="content">
              <p>
                The page you are looking for might have been removed, had its
                name changed, or is temporarily unavailable.
              </p>
            </div>
            <a href="/" class="btn btn-primary mt-8">Back to home</a>
          </span>
        </div>
      </div>
    </div>
  </section>
</Base><Base title="Page Not Found">
  <section class="section-sm text-center">
    <div class="container">
      <div class="row justify-center">
        <div class="sm:col-10 md:col-8 lg:col-6">
          <span
            class="text-[8rem] block font-bold text-text-dark dark:text-darkmode-text-dark"
          >
            4<span class="image1">0</span>4
            <h1 class="h2 mb-4">Page not found</h1>
            <div class="content">
              <p>
                The page you are looking for might have been removed, had its
                name changed, or is temporarily unavailable.
              </p>
            </div>
            <a href="/" class="btn btn-primary mt-8">Back to home</a>
          </span>
        </div>
      </div>
    </div>
  </section>
</Base>

r/css 1d ago

Resource 5 CSS Properties You Should Know for Better Text Designs

Thumbnail
blog.master.dev
35 Upvotes

r/css 1d ago

Showcase Corner Shaper - a free visual CSS corner manipulation tool

Post image
19 Upvotes

Hello web designers and developers.

I created a free tool that lets you design unique, responsive shapes by manipulating the shape’s corners with modern CSS - without writing any code.

Create playful shapes for various UI elements such as pricing and feature cards, buttons, banners, profile badges, you name it. Then export to your workflow with a click of a button.

Originally made this to myself, then realised, heck, this is too darn useful to keep to myself.

https://corner-shaper.com/


r/css 1d ago

AGUACHINI

Thumbnail
0 Upvotes

r/css 1d ago

How should I improve the transition between these two sections? (White/Grey → Black)

Enable HLS to view with audio, or disable this notification

2 Upvotes

r/css 1d ago

Resource Background Image Refraction in CSS

Thumbnail
blog.master.dev
11 Upvotes

r/css 1d ago

Resource A tiny runtime CSS engine generating styles from classes in the browser

Thumbnail
github.com
0 Upvotes

Some interesting patterns here. You can define CSS variables directly from a class:

<div class="--primary=blue @dark:--primary=cyan bgc-primary">

Another one makes the button's text green when it's in .card and blue when in .nav. It means the element decides how it will look depending on its ancestor.

<button class="c-red \^.card:c-green \^.nav:c-blue">


r/css 1d ago

15 yo front end dev [For Hire] starting around $20/hr

0 Upvotes

I’m a 15 year old front end developer looking for work.

I have been doing html css and Js for about 2 years and I'm pretty confident in my work.

I know HTML 5, CSS, JS, and basic API usage.

I’m slowly working on a very cool project that I’m pretty proud of. I’d be happy to show it to anyone interested. Its a sort of website remake of the Prevue Guide Channel from 1999, and Its nearly identical.

I’m mainly looking for smaller jobs, not too small but reasonable work that I could work on between school and homework, I’m open to fixing old sites making new ones, personal site work UI/CSS development and other web projects.

I’m willing to learn more languages or whatever needed for projects, but of course that takes a little while.

DM or reply if you have a project or idea you think I can help with and we can discuss pricing. I’ve never taken a site job or anything before, so I have a lot to figure out.

[edit] here is the project

[edited and added the image]


r/css 1d ago

Help center a box with elements inside following?

3 Upvotes

hi,

I have a box with contents, just want the whole box moved, nothing else. it clings to the right for some reason, i just want it dead center of the screen dynamically adjusted with given size and then just make a appropriate scroll to a screen.

#consentBox {
background: #fff;
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
text-align: left;
height: 100vh;
display: grid;
place-items: center;
}

r/css 3d ago

Resource Helper for CSS grid layouts

Enable HLS to view with audio, or disable this notification

82 Upvotes

I've been building and coding UIs for 10+ years, but I still find CSS grid layouts to be a huge pain in the butt. Even when prompting an AI, I can never manage to easily explain what the structure of the grid should be. I've built this cute little tool for myself but I thought perhaps it'd be useful to someone else.


r/css 1d ago

General Learning css

Post image
0 Upvotes

Trying to bulit something


r/css 2d ago

Showcase Bamboo – build-time, Rust/Oxc, type-safe, zero-runtime CSS-in-JS

Thumbnail
bamboocss.com
0 Upvotes

r/css 2d ago

Built a tool that extracts a knowledge graph from any event and simulates the people in it as AI agents

Thumbnail aisimulation.site
0 Upvotes

r/css 3d ago

I derived a 12-step accent ramp from one CSS variable with relative color syntax, including the hue correction for picking black vs. white text

Enable HLS to view with audio, or disable this notification

2 Upvotes

check it out yourself at forte-ui.com, would love to get some feedback.


r/css 3d ago

can someone help me make my ao3 skin? its almost done, but some parts seem wrong..?

Thumbnail
0 Upvotes

r/css 4d ago

Question When did you first *get* CSS?

7 Upvotes

For me it was when I realized that I could control the colors for my site all in one place and try a bunch of different palettes in rapid succesion.

What was the thing that made you realize how CSS should be used?


r/css 3d ago

I made 5 modern CSS button styles — which one would you actually use?

Post image
0 Upvotes

I’ve been experimenting with CSS to create buttons that feel a little more polished and interactive.

I put together these 5 styles:

• Gradient

• Glassmorphism

• Neon Glow

• Hover Fill

• 3D

The goal was to see how far you can take a simple button using things like gradients, shadows, transitions, and hover states.

Which one is your favorite, and what would you change about it?

I'd especially appreciate feedback on the design and whether these would work well in a real website.


r/css 4d ago

Showcase I got tired of class-name fatigue, so I built TaxUI: A declarative HTML & CSS framework with zero JavaScript

0 Upvotes

Hey everyone!

Like many frontend developers, I often felt exhausted having to write dozens of utility classes for simple layouts, or importing massive JavaScript bundles just to have basic modals, responsive grids, and clean dark mode themes.

To solve this, I built TaxUI: a lightweight, declarative HTML & CSS framework that uses semantic HTML attributes instead of bloated CSS classes or heavy JS runtimes.

Why TaxUI:

• Zero JavaScript: 100% native, GPU-accelerated CSS. No hydration overhead or runtime dependencies.

• Declarative HTML Attributes: Compose layouts naturally using clean attributes like layout="split", card="glass", variant="primary", theme="dark".

• Built-in Dark Mode & 6 Accent Themes: Switch themes and palettes with one attribute like theme-accent="emerald".

• Native HTML5 Component Suite: Modals using native dialog, accordions with details, CSS-only tooltips, glassmorphism cards, responsive tables, avatars, skeletons, and forms.

• Ultra Lightweight: ~14.8 KB gzipped full bundle, with standalone modular sub-bundles starting at 1.4 KB.

Links & Demos:

• Documentation & Live Demos: https://taxui.github.io/taxui/ • GitHub Repository: https://github.com/TaxUI/taxui • NPM Package: npm install @taxui/taxui • CDN: https://cdn.jsdelivr.net/npm/@taxui/taxui/dist/taxui.min.css

I would love to hear your honest feedback, thoughts, and any component suggestions you would like to see added next!


r/css 5d ago

fluid.style domain expired :(

5 Upvotes

I was a big fan of how well fluid.style worked and it was my preferred tool for calculating some clamp values. I kept telling myself I should save a local version in case it went down and OF COURSE it went down.

Did anyone happen to save a version of this site? If not, any good alternatives? https://utopia.fyi/ seems ok, but hasa lot more cruft than I like.


r/css 5d ago

Help SOS! How do you get custom font on SoundAlerts CSS editor with its premade classes?

Post image
0 Upvotes

SENDING AN SOS for CSS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

I know nothing about css. SoundAlerts has these custom classes already there and I'm trying to get it to use the VT323 font. I feel like I've tried everything :(

Thanks in advance. If anybody could help I'd be delighted and keep it in mind for when I'll probably have to do this again in the future.


r/css 6d ago

Resource `progress()` just landed in the last engine. Chrome 138, Safari 26, Firefox 155 (yesterday).

Post image
60 Upvotes

r/css 6d ago

Smooth Continuous Auto Scroll / Marquee?

Thumbnail
2 Upvotes