R.I.P Posts - Answer Overflow

R.I.P

•Created by R.I.P on 10/12/2024 in #front-end

slow animation on corners

https://codesandbox.io/p/sandbox/kind-joliot-5jrqyn go there and u can see that it speeds up on corners so how can i change it? anyidea is acccpetable no boundaries and i dont want just 1

4 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/12/2024 in #front-end

in keyframes can i do a percent of a percent

hi(im getting banned for sure lol so many questions + stupidity)

@keyframes background {
          0%{--deg:45deg;}
          50%{
              0%{ --deg: 45deg;}
              7%{ --deg: 80deg ;}
              15%{ --deg: 100deg ;}
              25%{ --deg: 135deg;}
              32%{ --deg: 170deg ;}
              40%{ --deg: 190deg ;}
              50%{ --deg: 245deg;}
              57%{ --deg: 275deg ;}
              65%{ --deg: 290deg ;}
              75%{ --deg: 325deg;}
              82%{ --deg: 350deg ;}
              90%{ --deg: 370deg ;}
              100%{ --deg: 405deg;}
            }
          75%{--deg: 0deg;}
          100%{ --deg : 30deg}
        }

@keyframes background {
          0%{--deg:45deg;}
          50%{
              0%{ --deg: 45deg;}
              7%{ --deg: 80deg ;}
              15%{ --deg: 100deg ;}
              25%{ --deg: 135deg;}
              32%{ --deg: 170deg ;}
              40%{ --deg: 190deg ;}
              50%{ --deg: 245deg;}
              57%{ --deg: 275deg ;}
              65%{ --deg: 290deg ;}
              75%{ --deg: 325deg;}
              82%{ --deg: 350deg ;}
              90%{ --deg: 370deg ;}
              100%{ --deg: 405deg;}
            }
          75%{--deg: 0deg;}
          100%{ --deg : 30deg}
        }

how to do it from 50 % to 75% =I have a list of stuff to do and i want them to done in the exact order so when it reaches 50% of the main work till 75% I can split it to 100 parts (100%) now i want to do a exact thing in 25th part is it possible ? or anything like this?

32 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/12/2024 in #front-end

is it bad to use -numbers in margin padding insets translate and other stuff

hi guys i was wondering to know this

top: 50%;
        left: 50%;
        translate: -50% -50%;

top: 50%;
        left: 50%;
        translate: -50% -50%;

is bad? so instead of that i wanna use

inset: -8px;
        padding: 8px;

inset: -8px;
        padding: 8px;

so the result is the same and its for a div::before/after so i can see it when its absoloute and under the main div I just wanna know is it wrong or ok?

11 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/11/2024 in #front-end

animation with gradiants

hi how can i get a animation css like this

.dd2::before{
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background-image:
            repeating-conic-gradient(
            from var(--deg),
            purple  0deg 25deg,
            rgba(0,0,0,0)  25deg 90deg);
            z-index: -4;
            animation: dd2before 5s infinite linear none;}
        @keyframes dd2before{
        from{--deg: 360deg;}
        to{--deg: 0deg;}
}
@property --deg{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;}

.dd2::before{
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background-image:
            repeating-conic-gradient(
            from var(--deg),
            purple  0deg 25deg,
            rgba(0,0,0,0)  25deg 90deg);
            z-index: -4;
            animation: dd2before 5s infinite linear none;}
        @keyframes dd2before{
        from{--deg: 360deg;}
        to{--deg: 0deg;}
}
@property --deg{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;}

which lets me to rotate stuff in the background without rotating the box I got 2 issues here first is about going

 background:linear-gradient(blue,red,purple);

 background:linear-gradient(blue,red,purple);

how can i animate it like conic gradient above? 2nd is how can i animate this

background:
radial-gradient(
at 8.827085852478838% 8.963641188959661%,
#ff006f 0px, transparent 50%) ,

radial-gradient(
at 14.026602176541717% 80.08890658174099%,
#9818dc 0px, transparent 50%) ,
            
radial-gradient(
at 79.68561064087062% 81.15047770700637%,
#eb02d7 0px, transparent 50%)

radial-gradient(
at 51.26964933494559% 48.029458598726116%,
#162cd4 ,red 50px, transparent 50%) #000000;

background:
radial-gradient(
at 8.827085852478838% 8.963641188959661%,
#ff006f 0px, transparent 50%) ,

radial-gradient(
at 14.026602176541717% 80.08890658174099%,
#9818dc 0px, transparent 50%) ,
            
radial-gradient(
at 79.68561064087062% 81.15047770700637%,
#eb02d7 0px, transparent 50%)

radial-gradient(
at 51.26964933494559% 48.029458598726116%,
#162cd4 ,red 50px, transparent 50%) #000000;

again i want to rotate the background not the box with the -25% inset like below

z-index:-1;
content:'';
position:absolute;
inset: -25%;
background-image: conic-gradient(
    hsl(297.3, 84.6%, 20.4%),
    hsl(192.6, 51.4%, 58.0%),
    hsl(297.3, 84.6%, 20.4%)
);
animation: 3s linear infinite rot;
}
@keyframes rot {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

z-index:-1;
content:'';
position:absolute;
inset: -25%;
background-image: conic-gradient(
    hsl(297.3, 84.6%, 20.4%),
    hsl(192.6, 51.4%, 58.0%),
    hsl(297.3, 84.6%, 20.4%)
);
animation: 3s linear infinite rot;
}
@keyframes rot {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

i would appreciate if u could say it and the rotations should work this is real code unless i missed sth (i mean u can see it for yourself what i mean but for the last one use inspect then u see the before is rotating not background)

3 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/11/2024 in #front-end

relative div and button

37 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/11/2024 in #front-end

relative

13 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/8/2024 in #front-end

4questions

hi i recently thought of making a canvas without having access to html so just css and no js of course 1-lets say the whole page doesnt have canvas and div and button and p so can i use ::after/before and change it to canvas or any other ways that make another element live div canvas 2-just create canvas from nothing 3-another question is about making the actual site by css html and js I realised recently that i need to learn php and i thing other stuff too i was wondering is it possible that i do js and html and css but the rest would be on someone elses hand and if i look for a partnership like this what would i call myself ?am i frontend? and need a backend? 4-im using @property --deggg{ syntax: "<angle>"; initial-value: 0deg; inherits: false; } and all of my html changed its color like it works tho its has a different color than it use to have now(it works perfectly but i want the old color and with @property --deggg{ syntax: "<angle>"; initial-value: 0deg; inherits: false; } i cant have that so it there sth wrong with this property or do i need to do sth else?

21 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/2/2024 in #front-end

zindex not workig as i want

<!DOCTYPE html>
<html lang="en">
<head></head>
    <style>
        button{
            background-color: red;
            position: absolute;
            z-index: 2;
            color: hotpink;
        }
        button::before{
            content: '';
            position: absolute;
            inset: -5px;
            background-color: black;
            padding: ;
            z-index: -10000;
        }
    </style>
</head>
<body>
    <button>
        fewefwdqhtr
    </button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head></head>
    <style>
        button{
            background-color: red;
            position: absolute;
            z-index: 2;
            color: hotpink;
        }
        button::before{
            content: '';
            position: absolute;
            inset: -5px;
            background-color: black;
            padding: ;
            z-index: -10000;
        }
    </style>
</head>
<body>
    <button>
        fewefwdqhtr
    </button>
</body>
</html>

hi i want to make it so the the after or before goes behid the button completly i dont know how but i only managed to bring the text up front

5 replies

KPCKevin Powell - Community

•Created by R.I.P on 9/29/2024 in #os-and-tools

shortcuts

hi guys can someone tell me what is the shortcuts he uses in this video or give me a full list of them so i know what i can use 1-i want to know the shortcuts from 5.30 to 6.30 2-and how to jump after ; like when u wrote hight:60px; then jump after ; https://youtu.be/kINNs4uYYnY?si=pefUnthHCIQ1-oUH

12 replies

KPCKevin Powell - Community

•Created by R.I.P on 9/16/2024 in #os-and-tools

vscode design (like animations ans other js css html addinh)

hi guys i want to add a code with html css and js to the default page (im using vscode app in widows)(the default page is where u try to write the codes or generally the whole page with full size in the app) so yea i wanted to add html and jss to the page but i didnt find anything that can add it so i ask it here is there a way to add html css and js together or seperatly in the app if yes what should i install or do?

32 replies

Gaming

Programming