R.I.P Posts - Answer Overflow

R.I.P

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

help making a code better

hi guys im using this 2 together 1- is snow and ash 2- is a gradient rotating but these 2 heavily impact performance and cause lag and slow moving on the damn site so any advices would be appreciated for making them less laggy here is the link for it https://stackblitz.com/edit/vitejs-vite-4lmugs?file=style.css though be careful its like rainbow god and Ground carousel had a baby (its rotatey and changing background color & I CANNOT make it any better so u have to put it in codepen dont ask me I really cant)

12 replies

KPCKevin Powell - Community

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

scroll + space on top

6 replies

KPCKevin Powell - Community

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

fix before and fix positioning

I want a fix position and a before/after tho the fixed posiotion need to be above the after and before? i search and it said i couldnt and i had to go for the changing the some css in before and parent but i dont really want it! so is there anything else both are fixed tho the before can be anything but i want it before the damn parent

23 replies

KPCKevin Powell - Community

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

random number and tracking them / sending signal via keyframes

hi guys I wanna test a thing with my question (1st is it enough for me to talk alone with no code sometimes i know its harder tho i just wanna know so the first part is without the code and the second part the code exists) I created a program to give me 2 random numbers and put them in keyframes so just imagine a ball that goes from point 1 to point 2 and then 1 and the 2 variables are different + changing all the time each time animation stops by timing them so the ball always change direction and comeback and i created 4 varaiables in hopes of achievig the ball goes to point 2 from 1 and then back to point 1 but the thing is i want it all infinite and the point 1 is changing now too so its a chaotic move since there is no order the problem: what ever i do i cant fix the timing since after animation finish the ball jumps its sth like the ball goes from point a to b then i want it to go to c without adding any variables and use the a variables but this either needs a ton and endless of keyframes or sth that i dont know of https://codesandbox.io/p/sandbox/f4lyv8 i dont think this site shows it completly it goes koko after a while https://stackblitz.com/edit/stackblitz-starters-3uzqkd?file=index.html i hope this ones work these all are the example of the first one i couldnt create the second

33 replies

KPCKevin Powell - Community

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

get a random number after keyframes done its work / just get a random number every second

hi guys

let x 
    x =
    Math.floor(Math.random() * 100);
    var r = document.querySelector(':root');
    function set1() {
  // Set the value of variable --blue to another value (in this case "lightblue")
    r.style.setProperty('--at11', x + '%');
}
window.onload = set1;

let x 
    x =
    Math.floor(Math.random() * 100);
    var r = document.querySelector(':root');
    function set1() {
  // Set the value of variable --blue to another value (in this case "lightblue")
    r.style.setProperty('--at11', x + '%');
}
window.onload = set1;

ok so now i inserted the x% in the --at11 which is a % but i need sth so like every second it gives me a new random number what should i do? the reason i need it:(css)

@keyframe animation-goes{
10%{--sth : var(--at11)
    }
20%{--sth : var(--at11)
    }
30%{--sth : var(--at11)
    }
......
}

@keyframe animation-goes{
10%{--sth : var(--at11)
    }
20%{--sth : var(--at11)
    }
30%{--sth : var(--at11)
    }
......
}

so i need it to change the animation all the time and be random (this is a simple example not the real deal)

4 replies

KPCKevin Powell - Community

•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)

9 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