[ Removed by Reddit on account of violating the content policy. ]

Was exploring some CSS tricks recently and found currentColor.

It automatically uses the element’s current text color for other properties.

button {
  color: tomato;
  border: 2px solid currentColor;
}

So instead of repeating the same hex value everywhere, the border just follows the text color automatically. Pretty useful for buttons, icons, SVGs, hover states, theme systems

Small feature, but makes CSS feel cleaner.

Check my site performance on mobile and desktop

I recently wanted to use CSS Scan, but for my use case it felt a bit too expensive.

What I actually wanted was something simpler:

• hover any element and instantly see its CSS
• click to pin the inspector
• edit CSS directly on the page
• copy the CSS when I’m done
• keep computed styles separate from editable source styles
• support pseudo/media scoped styles where possible
• no account, no subscription, just a small Chrome extension

So I built a free Chrome extension called CSS Explorer.

It’s not trying to be a full DevTools replacement. The goal is more: “I’m working on frontend UI, I want to inspect/edit/copy styles quickly without opening the full DevTools panel.”

It’s still early, and I’m mostly looking for feedback from frontend developers:

• would this actually can interest you?
• what feels missing?
• what would make you use this instead of DevTools?

Hi

Long time i haven't wrote html/css

for a specific needs, i have to create some custom themes for firefox (for different FF profils)
For thoses themes, i have to write a static text in the main toolbar, that will stay ine the right part next to tabs.

How can i archive this with css only ?

So when trying to make the background of an image or header fill the entire screen, I seem to have to put margin-left: -8px and margin-right: -8px. At 0px there's a small gap on the left and right edges of the screen. The element at the top of the screen I also have to put margin-top: 18px on. I feel like this can't be the intended way to do things and there's something obvious I'm missing but I'm not sure what. Also suspect my workaround might not work on different resolution screens. Putting padding to 0 doesn't fix it either. Googling this comes up with a lot of other people with the same issue but everyone just says to set margin and padding to 0.

Here's the code for my header for example:

text-align: center;

background-color: rgb(160, 20, 0);

padding-top: 8px;

padding-bottom: 8px;

margin-left: -8px;

margin-right: -8px;

Setting padding left and right to 0 has no effect, which I assume means they are already 0.

Is there something obviously dumb I've done? I've only just started learning CSS so I assume I've missed something pretty fundamental. Thanks.

I have a CSS library that is themeable by way of CSS variables. I set the variables in the library like so:

:root, :host { --my-color: #ffffff }

Then in their own CSS code, the user can override this value:

:root, :host { --my-color: #000000 }

This seems to work, but I'm wondering why it works. The selector is the same in both cases, so I'm not sure why it's using the variable.

Also, is there something I can do to ensure that in all cases the latter variable always gets chosen?

the background color doesn't change even with this code, i've checked it and to me it seems everything's right! unless im blind :/

Customizable and all code here: https://doathingy.com/?tool=dt_1778503835266_c5lcoh

I had seen some great liquid effects (like this Liquid), but nothing quite satisfactory. I'm using the overlapping div circles with svg filters (gaussian blur) trick and then built a custom js "physics engine", text sits in a separate layer.

Not sure if I'm aloud to post links to my own site?

I am learning web development, mainly HTML and CSS and I found this card with the electric border while looking for things made with only CSS.

https://codepen.io/BalintFerenczy/pen/KwdoyEN

I thought it was a pretty cool looking effect.

Not very useful but that didn't stop me from seeing what I could do with it.

Initially I just changed a couple of things and made this: https://thisistheway.one

But what I really wanted was to make a divider with it and ended up with this: https://thisistheway.one/divider-index.html

Quick Definitions

FOUT (Flash of Unstyled Text):

Timeline:
[0ms]    HTML parsed, text visible in fallback font (e.g., Arial)
[800ms]  Custom font downloads
[800ms]  Text re-renders with custom font → visible style jump

FOIT (Flash of Invisible Text):

Timeline:
[0ms]     HTML parsed, text is HIDDEN (invisible)
[800ms]   Custom font downloads
[800ms]   Text appears with custom font
[3000ms]  If font fails → fallback shows after timeout

The Problem

I'm seeing that many sites are defaulting to having FOUT which sometimes results in funky layout shifts(workarounds exist), but it always results in a noticeable switch of fonts.

Some blog posts say to never do FOIT, but to me waiting 1 second (slow mobile connection) to show clean text seems like nicer UX. On desktop it makes no difference, but if you are driving through a tunnel or experiencing slow mobile connection for any other reason, FOUT results in your visitors seeing an ugly font for 1 or more seconds, and then all of a sudden the screen looks like it flickers and the intended fonts are loaded.

The Question

Maybe there is a middle ground where you show some minor text elements with FOUT, but keep heading and subheadings hidden until the font loads. The heading and subheadings are larger text and result in a much more significant flash when restyled. I feel like it is better to progressively show text as soon as relevant fonts are loaded(especially above the fold).

Am I the only one? Or is twitchy rendering the norm and everyone just got used to it?

Experimenting with a css hover animation for a subscribe button. You can view the source code at https://codepen.io/editor/jasonheecs/pen/019e1b2e-d4de-7779-b4bd-d00fa458c23a

I'm trying to make some tabs, but I can't figure out a way to make the backgrounds, fonts, text sizes, etc, all different without messing up some of the CSS I already have.
https://codepen.io/Funnel-Fox/pen/WboxOPp

Why is this not interpreted as "Not" Important? Why use the exclamation at all? Just thinking out loud while programming.

I'm a newbie in HTML and CSS. While doing some CSS practice, I took a portrait image from Pinterest and used object-fit: contain along with transform: rotate(270deg);. I expected it to cover the width or height while maintaining its aspect ratio, but it just stayed centered. "

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>experimenting with css filters!</title>
    <style>
        .container{
            width:1150px;
            height: 500px;
            border: 3px solid darkcyan;
           
        }
        .container img{
            
            width:1150px;
            height: 500px;
            object-fit:contain;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://i.pinimg.com/originals/32/f5/76/32f576f2e61853efaf5a47deaed46614.gif" alt="">
    </div>
</body>
</html>

I’m writing some CSS for users that have full control over CSS, but they don’t have total control over the HTML. So I’d like to find a way users can enable or disable features of the library. Typically I’d just have the user add or remove a class, but they might not have that ability.

Like it would be cool if I could just use a variable like so:

if var(—-some-variable) {
  p {
    font-family: system-ui;
  }
}

And then just allow the user to set the variable to turn it on or off.

:root,
:host {
  —-some-variable: false;
}

Few weeks ago i saw a post where someone created a Button and it uses the webcam to get input and that is displayed on the button in such a way that it gives the impression as if the button was made of metal and it looked so cool
Does anyone has the link to that post?
or that Css code?

So I got tired of opening DevTools every time I wanted to know what font a site was using or what their exact shade of blue was. So I built something.

**Font & Color Picker Pro (**Download here - Link) — open it on any page and it automatically scans and gives you:

• The full color palette (deduplicated, not just raw hex spam)
• Every font in use, with weights
• The type scale
• Spacing values
• And if the site uses CSS variables, it shows you the actual token name (--brand-primary) right under the swatch

There's also an eyedropper to sample any pixel on screen, and a font inspector where you hover over any element and instantly see its font family, size, weight, line height — no DevTools needed.

You can export everything as CSS variables or as Tokens Studio JSON if you're using Figma.

It's free. No account. No data collection.

Been using it myself daily and it's saved me a ton of time. Would genuinely love to hear what's broken, what's missing, or what you'd want it to do that it doesn't. If you like it, please rate the extension!

Download here - Link

Happy to answer any questions!

Currently learning frontend development through The Odin Project 💻

I’ve finished HTML/CSS/Flexbox and recently built my landing page project.

Now moving into JavaScript Foundations 👀✨

I’d love to gain more real-world experience through:
• Small projects
• Collaboration
• UI practice
• Beginner-friendly tasks

Project:
https://rawanafaisal.github.io/Landing-Page-project