I’m trying to convert the color part here to root:
This uses $color: with 9 buttons on the screen.
https://jsfiddle.net/sLo6ptkd/
Starting from that version might be an easier way to do it.
$color: #ff1818;
You can convert $color in the normal way using :root(–my-color:blue) and then call it as var(–my-color) but that code uses the scss function darken of which there is no equivalent in css so you would need to compile the code into css before you copy it and then replace the blue colours with the variable my-color as per usual.
Where would var(--color) be placed in here?
root:
background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
SCSS
background-image: radial-gradient(transparent 30%, rgba(darken($color, 35%), 0.7) 70%);
I tried each one and it doesn’t really work.
The SCSS can’t really be transferred.
https://jsfiddle.net/co7fm30x/
What is $height: 1.3 * $width; referring to in this code?
https://codepen.io/ykadosh/pen/ExNOmZx
$width: 200px;
$height: 1.3 * $width;
And can it be added to the code that doesn’t use SCSS?
There is no darken property in CSS as I mentioned before so you would need to use the css that is compiled from that code.
Width is the width of your button and the height is defined as 1.3 times your width. It more or less says that by itself 
There would be little need as you only use it once that I can see but if you did want it it would like this.
:root{
--width:150px;
--height: calc(1.3 * var(--width));
}
.playButton {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background-color: black;
/*width: 150px;
height: 195px;
*/
width:var(--width);
height:var(--height);
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
border-radius: 5px;
padding: 20px;
perspective: 700px;
}
I meant, without using root:
Can this be placed in the css?
:root{
--width:150px;
--height: calc(1.3 * var(--width));
}
How would this part be written in the css?
height: calc(1.3 * var(--width));
Doing this didn’t work.
https://jsfiddle.net/156t947m/1/
width: 150px;
height: calc(1.3 * width:150px);
That’s because it’s not css. You can’t multiply properties.
You can multiply values with calc.
height: calc(1.3 * 150px);
But seeing as you only do that once you are better off just saying:
height: 195px;
2 Likes
I get it now.
width: 150px;
height: calc(1.3 * 150px);
Is the same as.
width: 150px;
height: 195px;
If I were to do the math, how would I figure out that height is 195?
width: 150px;
height: calc(1.3 * 150px);
1.3 x 150 = 195
I got it.
1 Like
Using this would darken/lighten be able to be converted to css?
Would it be able to be figured out?
you can change the color by using something like
color: color(black darkness(50%));, without the use of any CSS preprocessor like Sass.
Original scss code.
https://jsfiddle.net/cLgarmyd/
background: linear-gradient(rgba(white, 0.8) 10%, rgba(white, 0.3) 30%, darken($color, 35%) 75%, darken($color, 45%)) 50% 50% / 97% 97%, darken($color, 20%);
background: linear-gradient(rgba(white, 0.8) 10%, rgba(white, 0.3) 30%, darken($color, 35%) 75%, darken($color, 45%)) 50% 50% / 97% 97%, darken($color, 20%);
background-image: linear-gradient(darken($color, 35%), darken($color, 45%));
background-image: radial-gradient(adjust-hue(lighten($color, 20%), 35), $color 40%, transparent 70%);
background-image: radial-gradient(transparent 30%, rgba(darken($color, 35%), 0.7) 70%);
Like this?
SCSS
background: linear-gradient(rgba(white, 0.8) 10%, rgba(white, 0.3) 30%, darken($color, 35%) 75%, darken($color, 45%)) 50% 50% / 97% 97%, darken($color, 20%);
CSS
background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
SCSS
background: linear-gradient(rgba(white, 0.8) 10%, rgba(white, 0.3) 30%, darken($color, 35%) 75%, darken($color, 45%)) 50% 50% / 97% 97%, darken($color, 20%);
CSS
background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50% / 97% 97%, #b10000;
SCSS
background-image: linear-gradient(darken($color, 35%), darken($color, 45%));
CSS
background-image: linear-gradient(#650000, #320000);
SCSS
background-image: radial-gradient(adjust-hue(lighten($color, 20%), 35), $color 40%, transparent 70%);
CSS
background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
SCSS
background-image: radial-gradient(transparent 30%, rgba(darken($color, 35%), 0.7) 70%);
CSS
background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
If this is the code with SCSS removed, can’t root: be added to it?
I’m confusing myself, it just can’t be done.
body, html {
width: 100%;
height: 100%;
}
body {
background-color: #fafcff;
background-image: radial-gradient(circle, transparent, #afb5bf), linear-gradient(transparent, #d3d8e0);
display: flex;
align-items: center;
justify-content: center;
}
.switch {
background-color: black;
width: 150px;
height: 195px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
border-radius: 5px;
padding: 20px;
perspective: 700px;
}
.switch input {
display: none;
}
.switch input:checked + .button {
transform: translateZ(20px) rotateX(25deg);
box-shadow: 0 -10px 20px #ff1818;
}
.switch input:checked + .button .light {
animation: flicker 0.2s infinite 0.3s;
}
.switch input:checked + .button .shine {
opacity: 1;
}
.switch input:checked + .button .shadow {
opacity: 0;
}
.switch .button {
transition: all 0.3s cubic-bezier(1, 0, 1, 1);
transform-origin: center center -20px;
transform: translateZ(20px) rotateX(-25deg);
transform-style: preserve-3d;
background-color: #9b0621;
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
background-repeat: no-repeat;
}
.switch .button::before {
content: "";
background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
background-repeat: no-repeat;
width: 100%;
height: 50px;
transform-origin: top;
transform: rotateX(-90deg);
position: absolute;
top: 0;
}
.switch .button::after {
content: "";
background-image: linear-gradient(#650000, #320000);
width: 100%;
height: 50px;
transform-origin: top;
transform: translateY(50px) rotateX(-90deg);
position: absolute;
bottom: 0;
box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}
.switch .light {
opacity: 0;
animation: light-off 1s;
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}
.switch .dots {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
background-size: 10px 10px;
}
.switch .characters {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
background-repeat: no-repeat;
}
.switch .shine {
transition: all 0.3s cubic-bezier(1, 0, 1, 1);
opacity: 0.3;
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
background-repeat: no-repeat;
}
.switch .shadow {
transition: all 0.3s cubic-bezier(1, 0, 1, 1);
opacity: 1;
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
background-repeat: no-repeat;
}
@keyframes flicker {
0% {
opacity: 1;
}
80% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}
@keyframes light-off {
0% {
opacity: 1;
}
80% {
opacity: 0;
}
}
Yes you can use :root for the base colour but the problem is that the scss generates a number of colours based on this root. It uses darken with a percentage to change to darker or lighter colours.
e.g. It changes this:
background: linear-gradient(darken($color, 25%) 0%, darken($color, 33%) 30%, darken($color, 33%) 70%, darken($color, 25%) 100%);
to this:
background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
So you can see that the dark red (I think) is changed into 2 different values.
Then if you want to use CSS variables then you would need to specific all the alternative shades of the colour you want. You have to define blue and then define the other shades of blue.
e.g.
background: linear-gradient(var(--color1) 0%, var(--color2) 30%, var(--color2) 70%, var(--color1) 100%);
You could then set those up as your main :root styles but then you could add classes to the buttons and set up new rules for those colours. You wouldn’t need to change the specific css but you would need to set it up properly.
A simple example using just 2 shades.
I’ve just seen this article below which suggests that you may be able to automate the process with just css based on the primary color.
I don’t have time to implement that today but you are welcome to try
I’ll see what I can do, I don’t think I will be able to figure it out.
Only one of them uses hue.
background-image: radial-gradient(adjust-hue(lighten($color, 20%), 35), $color 40%, transparent 70%);
The hue would be added to this one I think.
background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
I’ll wait to see what you are able to do because I’m confused.
Were you able to figure out how to do it?
Can this be converted to use css instead?
Not yet. I’ve been busy. It’ll probably be tomorrow when I get some spare time now.
The adjust-hue function may also be an issue if we can’t quantify what it does as the SCSS has adjust-hue and Darken in the same rule. That just seems a bridge too far for normal CSS.
1 Like
This might help you with that.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.