Instead of using 3 sets of gradients, would I be able to use 1?

HTML & CSS
1

Is something like this possible to do?

There should be a way to do this, right?

Implemented in here:
https://jsfiddle.net/hfkc2Lw9/

Here I have 1 root working in the above code:
https://jsfiddle.net/y6ngLuw0/

I was thinking something like this to add a 2nd one in.

:root body.bg1 .play2 {
  --color-a: purple;
  --color-b: black;
  --color-c: purple;
  --color-d: black;
}

With something like this?

body.bg1:before,
body.bg2 .play2:before{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 165px 165px;
  background-image: 
       linear-gradient(var(--color-a) 5px, #0000 5px),
}

:root .playa{
  --color-a: blue;
  --color-b: black;
  --color-c: red;
  --color-d: black;
}

:root .playb{
  --color-a: purple;
  --color-b: black;
  --color-c: purple;
  --color-d: black;
}

:root .playc{
  --color-a: teal;
  --color-b: black;
  --color-c: orange;
  --color-d: black;
}

body.bg1{
  animation: fadebody 5s ease 0s forwards;
}

body.bg1:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 165px 165px;
  background-image:
     linear-gradient(var(--color-a) 5px, #0000 5px),
     linear-gradient(90deg, var(--color-a) 5px, #0000 5px),

     linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
     linear-gradient(90deg, var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
  
     linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
     linear-gradient(90deg, var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
     
     linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
     linear-gradient(90deg, var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
     
     linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
     linear-gradient(90deg, var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),

     linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
     linear-gradient(90deg, var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
 
     linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
     linear-gradient(90deg, var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),

     linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
     linear-gradient(90deg, var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),

     linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
     linear-gradient(90deg, var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),

     linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
     linear-gradient(90deg, var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),

     linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
     linear-gradient(90deg, var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),

     linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
     linear-gradient(90deg, var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),

     linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
     linear-gradient(90deg, var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),

     linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
     linear-gradient(90deg, var(--color-b)70px, #0000 70px 100px, var(--color-b) 100px),

     linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
     linear-gradient(90deg, var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),

     linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
     linear-gradient(90deg, var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),

     linear-gradient(var(--color-a), var(--color-a));
 }
}

Working single root: gradient code by itself.
https://jsfiddle.net/t5wq0sb7/

5

@PaulOB Is this right?

Is that good?

It works.
Anything you would change or adjust?

https://jsfiddle.net/q32mhe0k/1/

:root{
  --color-a: blue;
  --color-b: black;
  --color-c: red;
  --color-d: black;
}

:root .play2{
  --color-a: purple;
  --color-b: black;
  --color-c: purple;
  --color-d: black;
}

:root .play3{
  --color-a: green;
  --color-b: black;
  --color-c: green;
  --color-d: black;
}

body.bg1{
  animation: fadebody 5s ease 0s forwards;
}

body.bg1:before,
body.bg1 .play2:before,
body.bg1 .play3:before{
  content: "";
  position: fixed;
 /*z-index: 1;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 165px 165px;
  background-image: 
       linear-gradient(var(--color-a) 5px, #0000 5px),
6

You don’t need the :root on the last two.

e.g.

:root{
  --color-a: blue;
  --color-b: black;
  --color-c: red;
  --color-d: black;
}

.play2{
  --color-a: purple;
  --color-b: black;
  --color-c: purple;
  --color-d: black;
}

.play3{
  --color-a: green;
  --color-b: black;
  --color-c: green;
  --color-d: black;
}
1 Like
7

I know :root gets placed above body.

Are these allowed to be placed above body?

.play2{
  --color-a: purple;
  --color-b: black;
  --color-c: purple;
  --color-d: black;
}

.play3{
  --color-a: green;
  --color-b: black;
  --color-c: green;
  --color-d: black;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
8

I’m not sure what you are thinking is happening but all you are doing is redefining the variables for elements with the class specified.

It’s much the same as if you set font size on the body but then set a different font size for the playb and c classes.

The :root element is just the document root but much the same as setting on the html element apart from specificity.

9

So, the answer is yes,

This is fine:

.play2 {
  --color-a: purple;
  --color-b: black;
  --color-c: purple;
  --color-d: black;
}

.play3 {
  --color-a: green;
  --color-b: black;
  --color-c: green;
  --color-d: black;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

I don’t use root, or these custom properties that much in code.

But this was a way of not having to fill up the css with multiple gradient codes, and where it is easy to change the colors without having to take apart the whole code.

1 Like
10

Yes that’s a good use of css variables.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.