DEV Community: D7460N

Short fun read on how make CSS do JS

D7460N — Wed, 15 Oct 2025 17:05:54 +0000

Adam

Oct 15 '25

Styling by State: How to make CSS do JS

#cleancode #css #javascript

Comments 5

7 min read

[Boost]

D7460N — Wed, 13 Aug 2025 13:46:59 +0000

Henk van Hoek

Aug 7 '25

My AI Co-Pilot Has No Common Sense

#ai #development #programming #productivity

Comments 16

2 min read

How to animate or transition multiple linear-gradient backgrounds from a single element

D7460N — Mon, 20 Jan 2020 20:46:01 +0000

Trying to emulate this Codepen but with a single link element and the animated underline wraps with the text. https://codepen.io/dragontheory/pen/JjorrKL

One way to have an underline wrap with the text is to use background linear gradients. Like this solid line at this Codepen...

https://codepen.io/dragontheory/pen/XWJydQE

Then add three identical background linear-gradients colored the same as the background.

Not sure if backgroundColor or currentBackgroundColor (like currentColor) - is a valid property...

Three identical 6x1 background linear gradient shapes:

linear-gradient(backgroundColor, backgroundColor) left bottom / 6px 1px no-repeat,
linear-gradient(backgroundColor, backgroundColor) left bottom / 6px 1px no-repeat,
linear-gradient(backgroundColor, backgroundColor) left bottom / 6px 1px no-repeat;

Then animate or transition them on top of the solid underline (from left bottom to right bottom), giving the illusion of broken lines.
And then stagger them (see first Codepen above).

  /* Staggered delay */
  animation: break01 2s infinite,
             break02 2s 0.5s infinite,
             break03 2s 1s infinite;

}
@-webkit-keyframes "break01" {
  from { background-position: left bottom; }
  to { background-position: right bottom; }
}
@-webkit-keyframes "break02" {
  from { background-position: left bottom; }
  to { background-position: right bottom; }
}
@-webkit-keyframes "break03" {
  from { background-position: left bottom; }
  to { background-position: right bottom; }
}

So the question is how to animate or transition multiple linear-gradient backgrounds from a single element?

Hope that makes sense.

No idea if this is the best way. Open to ideas.

Anyone?

Pure CSS solution for detecting presence of child selector?

D7460N — Thu, 21 Nov 2019 20:33:57 +0000

Hello dev.to community!

Thankful for you! Articles are very helpful. Learning so much!

Trying to leverage CSS's "live-ness" (rather than JS poling) to detect the presence of a dynamically loaded child selector to change it's parent's sibling's width per the below scenario and CSS.

Problem is that the CSS relational pseudo-class ":has" is not supported by any browsers yet.

Would CSS variables or a pre-processor be able to handle the below scenario? Not used them yet.

Probably making this too complicated. Open to more efficient ways/techniques.

Any assistance is much appreciated.

Thanks again for all that you do for our community!

Scenario : :

Classic left to right master-detail, holy grail layout, using Bootstrap/Flexbox.

End-user clicks a list item in .results.
Dynamic content is loaded into .details.
.loaded class is loaded LAST into .details.
The "Open State" CSS rule becomes TRUE.
.details slides in from the right.
End-user clicks "X" to close .details.
.loaded is removed from .details.
The "Open State" CSS rule becomes FALSE.
.details reverts to it's "Closed State" (default).
.details slides out to the right.

Hope that makes sense...

CSS : :

/* Closed State (default) */
.results {
     flex: 0 0 auto;
     width: 0;
     transition: width 550ms ease;
}
/* Open State */
.details .loaded {     
     .results {          
          width: 25%;
     }
}

HTML : :

<div class="results">
     <div class="list-of-results"></div>
</div>

<div class="details">
     <div class="dynamically-loaded-content **loaded**">

     </div>
</div>

                               '
             ( ON SCRN )       ' ( OFF SCRN )
                               '             _[ close btn ]
 _____ ________.results________'__.details__/
|     |                        |           x| 
|     |                        |            | When the child class
|     |                        | + .loaded  | '.loaded' is present in
|     |                      <-|---         | '.details', '.details' slides
|     |                        |            | on screen from right
|     |                        |            | 
|     |                        |            |
|     |                        | - .loaded  | When '.loaded' disappears
|     |                      --|-->         | '.details' slides off screen
|     |                        |            |
 ----- ------------------------ ------------