We Keep Coding

CSS/JS? How to reflect a border-radius?

I try to code a little rock-paper-scissors based game and used the CSS/JS-code from this youtube tutorial to create neon buttons with a snake animation around the edges of the button.
https://youtu.be/3RRgVHd2TXQ
I then softened the edges of the buttons using "border-radius: 15px" - but the reflection has still sharp corners.
How can I solve this?
Also the snake-animation to shine around the edges of the button does not work :( - would be great to know why!?
Try the game: https://bamory.com/?hotlink=FARTWAR (click link to start a game-session and invite another player with the session-code appearing on top of the screen)
CODE:
html{
text-align: center;
}
}
body.chapter2 {
color: yellow;
}
input {
margin: 10px;
height: 50px;
width: 90%;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #050801;
flex-direction: column;
}
.button
{
border-radius: 15px;
position: relative;
display: inline-block;
padding: 10px 15px;
margin: 10px 10px;
color: #03e9f4;
font-size: 24px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: 0.5s;
letter-spacing: 4px;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
width: 25%;
}
.button:nth-child(1)
{
filter: hue-rotate(290deg);
}
.button:nth-child(3)
{
filter: hue-rotate(110deg);
}
.button:hover
{
background: #03e9f4;
color: #050801;
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 200px #03e9f4;
}
.button span
{
position: absolute;
display: block;
}
.button span:nth-child(1)
{
top: 0;
left: 0;
width: 25%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: animate1 1s linear infinite;
}
#keyframes animate1
{
0%
{
left: -100%;
}
50%, 100%
{
left: 100%;
}
}
.button span:nth-child(2)
{
top: -100px;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: animate2 1s linear infinite;
animation-delay: 0.25s;
}
#keyframes animate2
{
0%
{
top: -100%;
}
50%, 100%
{
top: 100%;
}
}
.button span:nth-child(3)
{
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: animate3 1s linear infinite;
animation-delay: 0.5s;
}
#keyframes animate3
{
0%
{
right: -100%;
}
50%, 100%
{
right: 100%;
}
}
.button span:nth-child(4)
{
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: animate4 1s linear infinite;
animation-delay: 0.75s;
}
#keyframes animate4
{
0%
{
bottom: -100%;
}
50%, 100%
{
bottom: 100%;
}
}
Thanks for your help! (it´s my first time using JS / stackoverflow - please forgive me if I inserted too much code or did other mistakes!)

how about give up box-reflect and use transform. take look at this:
css box-reflect alternative for older browser
it's more messy but why not more to learn

Smooth Scroll CSS Property

I have the following code. Even though I have added scroll-behavior: smooth; to .containerScroll, why does it not scroll smoothly to the next section? How can I make it so it scrolls smoothly to the next section? Right now, its not scrolling smoothly to the next section even though I made use of the property. How can I fix this?
.containerScroll {
--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-right: auto;
margin-left: auto;
scroll-behavior: smooth;
}
.first-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
}
#media (min-width:320px) and (max-width:480px) {
.containerScroll {
display: none;
}
}
.long-container {
height: 600px;
background: yellow;
}
#about {
height: 600px;
background: green;
}
<a href="#about">
<div class="containerScroll">
<div class="first-scroll"></div>
<div class="second-scroll"></div>
</div>
</a>
<div id="" class="long-container">
long old container
</div>
<div id="about">
scroll to me
</div>

Add to root html tag:
html {
scroll-behavior: smooth;
}
The smooth scroll behavior should be added to the element that is being scrolled, not to the element that triggers the scroll.

CSS property scroll-behavior: smooth with html tag should wrap the #about div tag. And need CSS property overflow-y: scroll and height prop also.
Idk for some reason this site's code snippet shows error, So if you want to see my explanation in code, visit below codepen.
https://codepen.io/junzero741/pen/zYEWWEK

function scrollf() {//js function
let e = document.getElementById("about");//Your id to scroll
e.scrollIntoView({
block: 'start',
behavior: 'smooth',
inline: 'start'
});
}
.containerScroll {
/*--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-right: auto;
margin-left: auto;
scroll-behavior: smooth; //removed these unwanted lines,u may un comment*/
}
.first-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
cursor: pointer; /*added this for cursor click-like effect*/
}
.second-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
cursor: pointer; /*added this for cursor click-like effect*/
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
}
#media (min-width:320px) and (max-width:480px) {
.containerScroll {
display: none;
}
}
.long-container {
height: 600px;
background: yellow;
}
#about {
height: 600px;
background: green;
}
<div class="containerScroll" onclick="scrollf()"><!--use div with js-->
<div class="first-scroll"></div>
<div class="second-scroll"></div>
</div>
<div id="" class="long-container">
long old container
</div>
<div id="about">
scroll to me
</div>
ReadMe: Nowadays we are not understand what the anchor a tag does,even though it opens a div in the same page
what it actually does is reload the page and show the div.//yes this is false it may not reload the page ,its only my opinion
so in the above code we us pure js to scroll ,
we call this function when containerScroll is clicked,
since its js we dont get a pointable-mouse when we hover over those arrows, so we use cursor: pointer; in css for first-scroll&second-scroll.
This one below is another approach that I got from https://stackoverflow.com/a/70553396/14862885
It preserves your animation, fixed glitches & bugs but still not recommended, unless You need to avoid js
.containerScroll {
--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-right: auto;
margin-left: auto;
scroll-behavior: smooth;
}
.first-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
position: sticky; /*makes scroll arrow to stick to container*/
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: sticky;/*makes scroll arrow to stick to container*/
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
}
#media (min-width:320px) and (max-width:480px) {
.containerScroll {
display: none;
}
}
.long-container {
height: 600px;
background: yellow;
}
#about {
height: 600px;
background: green;
}
.smooth-container {
width: 100%;
height: 600px;
overflow: scroll;
scroll-behavior: smooth;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box;
}
.parent {
width: 100%;
height: 600px;
overflow: hidden;
}
<!-- div tag with class `smooth-container` is wrapping the `long-container` and `about`. and with CSS, `overflow-y: scroll` and `height` value. -->
<div class="parent">
<div class="smooth-container">
<div id="" class="long-container">
long old container
<a href="#about"><!-- added anchor tag inside long-container-->
<div class="containerScroll">
<div class="first-scroll"></div>
<div class="second-scroll"></div>
</div>
</a>
</div>
<div id="about">
scroll to me
</div>
</div>
</div>

How to make the button in such a way that hovering it results in the rotation and spinning of another object?

I have the following code in which the star is automatically "spinning" around the crescent and hovering it makes it "rotate". There is also a button on the left side: when it is hovered, it only changes its background-color and text-color; however, I want the star to start spinning and rotating when the button is hovered (and also want the effects of the button i.e. changing its background color and text color, to maintain simultaneously). I tried using different codes but everything I do results in messing the code up further.
<!DOCTYPE html>
<html>
<head>
<style>
body {
position: relative;
right: -500px;
bottom: -150px;
}
.moon,
.star {
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: 120%; /* Resize the background image to cover the entire container */
-moz-border-radius: 50%; /* to make circle shape */
-webkit-border-radius: 50%;
border-radius: 50%;
}
.moon {
background-color: transparent;
background-image: url("https://i.stack.imgur.com/0bcIk.png");
position: absolute;
width: 200px;
height: 200px;
margin: 50px;
}
.star {
position: relative;
background-color: transparent;
background-image: url("https://i.stack.imgur.com/gjbgR.png");
width: 100px;
height: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.moon:hover .counterrotate {
width: 50%;
height: 50%;
-webkit-animation: ccircle 10s infinite linear;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg);
}
to {
-webkit-transform: rotateZ(360deg);
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg);
}
to {
-webkit-transform: rotateZ(0deg);
}
}
.moon:hover .counterrotate {
animation-name: inherit;
animation-duration: 5s;
transition-duration: 0.2s;
}
button {
background-color: white;
color: black;
text-align: center;
padding: 16px 32px;
font-size: 16px;
cursor: pointer;
border: 2px solid green;
display: inline-block;
transition-duration: 0.3s;
position: relative;
left: -350px;
border-radius: 50px;
bottom: -100px;
}
button:hover {
background-color: green;
color: white;
display: inline-block;
border: 1px solid white;
transition: 0.5s;
}
</style>
</head>
<body style="background-color: green">
<div class="moon">
<div class="rotate">
<div class="counterrotate">
<div class="star"></div>
</div>
</div>
</div>
<button>Hover</button>
</body>
</html>
How can I do that?

If I have understood the requirement correctly, you do not need Javascript for this.
However, CSS is not currently able to style a sibling element that is before a hovered element (it can't 'go back up' the DOM). But it can style a sibling element that follows the hovered element.
So the first change is to put the button element before the moon element. Now when the button element is hovered we can select its immediate sibling using the + combinator and from there we can select the rotate and moon elements to give them the animations required for rotating and spinning. (In this case we have left the definition of rotate as it is in the code in the question and introduced the spin animation to keep the star spinning around its center).
Now when the button is hovered the star rotates (moves in a large circle) and spins (rotates about its own center).
This snippet also makes the star spin when it is hovered and doesn't have any movement when there is no hovering. Obviously you can change the styling to have what you want there. Also the counterrotation is removed and the -webkit- prefixes, just to simplify things (and you don't want -webkit- with no vanilla setting set as well as some browsers may not interpret it).
<!DOCTYPE html>
<html>
<head>
<style>
body {
position: relative;
right: -500px;
bottom: -150px;
}
.moon,
.star {
background-position: center;
/* Center the image */
background-repeat: no-repeat;
/* Do not repeat the image */
background-size: 120%;
/* Resize the background image to cover the entire container */
border-radius: 50%;
}
.moon {
background-color: transparent;
background-image: url("https://i.stack.imgur.com/0bcIk.png");
position: absolute;
width: 200px;
height: 200px;
margin: 50px;
}
.star {
position: relative;
background-color: transparent;
background-image: url("https://i.stack.imgur.com/gjbgR.png");
width: 100px;
height: 100px;
transform: rotate(0deg);
}
button:hover+.moon .star,
.star:hover {
animation: spin 5s infinite linear;
}
#keyframes spin {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
button:hover+.moon .rotate {
width: 100%;
height: 100%;
animation: circle 10s infinite linear;
}
#keyframes circle {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
button {
background-color: white;
color: black;
text-align: center;
padding: 16px 32px;
font-size: 16px;
cursor: pointer;
border: 2px solid green;
display: inline-block;
transition-duration: 0.3s;
position: relative;
left: -350px;
border-radius: 50px;
bottom: -100px;
}
button:hover {
background-color: green;
color: white;
display: inline-block;
border: 1px solid white;
transition: 0.5s;
}
</style>
</head>
<body style="background-color: green">
<button>Hover</button>
<div class="moon">
<div class="rotate">
<div class="star"></div>
</div>
</div>
</body>
</html>

Different animation behaviour for second background-image

I'm trying to create a sidebar menu with animations and trying to do as much as possible with css only. If it's not possible, JS / JQuery is ok as well.
My problem is, I've got a <span></span> element with two background images and I wanna have different animation behaviours for them. The first one should rotate and increase it's size according to the span's size, the second one should NOT rotate and stay with the same size as before, but should only appear after the animation has finished.
Is it possible to have kompletely different animations on one element for each background image? If yes, how?
Here's my code so far:
The list is done with an unordered list, each <li></li> should contain one menu-item
<ul>
<li>
<a class="menu-item-link" href="#"><span class="menu-item">1</span>Active or hovered Menu</a>
</li>
<li><li>
</ul>
Some CSS for it with animation keyframes
.menu-item-wrapper {
width: 500px;
clear: both;
}
.menu-item-link {
margin-left: 5px;
color: white;
text-decoration: none;
}
.menu-item {
float: left;
color: white;
text-align: center;
padding-top: 5px;
display: block;
width: 30px;
height: 30px;
background-image: url("hexagon.svg"), url("mars.png");
background-size: contain;
background-repeat: no-repeat;
}
.menu-item:hover {
animation-name: menuAnimation;
animation-duration: 0.5s;
animation-fill-mode: forwards;
color: transparent;
}
#keyframes menuAnimation {
from {
width: 30px;
height: 30px;
transform: rotate(0deg);
}
to {
width: 50px;
height: 50px;
transform: rotate(210deg);
}
}
And a Fiddle
And that's how it should look like after the animation has finished (the planet image and link text should only be visible after the animation has finished)

Do you mean something like this?
.menu-item-wrapper {
width: 500px;
clear: both;
}
.menu-item-link {
margin-left: 5px;
color: white;
text-decoration: none;
}
.menu-item {
float: left;
color: white;
text-align: center;
padding-top: 5px;
display: block;
width: 30px;
height: 30px;
position: relative;
}
.menu-item::before {
content: "";
background-color: green;
background-image: url("hexagon.svg"); /*added bg color because of the missing image*/
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 0;
left:0;
width: 30px;
height: 30px;
transition: all 0.5s ease;
}
.menu-item::after {
content: "";
background-color: red;
background-image: url("mars.png");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 0;
left:0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0s 0.5s ease;
}
.menu-item:hover::before {
animation-name: menuAnimation;
animation-duration: 0.5s;
animation-fill-mode: forwards;
width: 50px;
height: 50px;
transform: rotate(210deg);
}
.menu-item:hover::after {
opacity: 1;
}
https://codepen.io/zothynine/pen/GQQdLp

And idea is to split the element into two element using a pseudo element and then you can animate both of them separately and simultaneously:
body {
background: black;
}
.menu-item-link {
margin-left: 5px;
color: white;
text-decoration: none;
}
.menu-item {
color: white;
text-align: center;
padding-top: 5px;
display: block;
width: 30px;
height: 30px;
background-image: url("https://openclipart.org/image/2400px/svg_to_png/247374/Mars.png");
background-size: contain;
background-repeat: no-repeat;
position: relative;
}
.menu-item:before {
content:"";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index:1;
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQ4NS42ODggNDg1LjY4OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDg1LjY4OCA0ODUuNjg4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTM2NC4yNjksNDUzLjE1NUgxMjEuNDE2TDAsMjQyLjg0NEwxMjEuNDE2LDMyLjUzM2gyNDIuODUzbDEyMS40MTksMjEwLjMxMkwzNjQuMjY5LDQ1My4xNTV6IE0xMzEuOTA1LDQzNC45OTdoMjIxLjg3OCAgICBsMTEwLjkzOS0xOTIuMTUyTDM1My43ODMsNTAuNjkxSDEzMS45MDVMMjAuOTY2LDI0Mi44NDRMMTMxLjkwNSw0MzQuOTk3eiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
background-size: contain;
background-repeat: no-repeat;
}
.menu-item:hover {
animation-name: anime1;
animation-duration: 0.5s;
animation-fill-mode: forwards;
color: transparent;
}
.menu-item:hover::before {
animation-name: anime2;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
#keyframes anime1 {
from {
width: 30px;
height: 30px;
transform: rotate(0deg);
}
to {
width: 50px;
height: 50px;
transform: rotate(210deg);
}
}
#keyframes anime2 {
from {
transform: rotate(0deg);
opacity:0;
}
to {
transform: rotate(-210deg);
opacity:1;
}
}
<div class="menu-item-wrapper">
<a class="menu-item-link" href="#"><span class="menu-item">1</span>Active or hovered Menu</a>
</div>

Creating 3d measurements with css or js

I would like to know if it is possible to create a 3d measurement somehow with css or js. So that there would be a width a height and a length. I know there is no conventional way to do this but I'm sure someone has come up with something more simple than the solutions I've been finder.
I want to know if it is possible to stack divs with different z-indexes or if there is an even better way to do this.
Here is a demo of the non-3d version of what i want DEMO
.one {
width: 300px;
height: 300px;
border-radius: 50%;
border: 20px inset #81ff14;
text-align: center;
animation: spin 3s infinite linear;
}
.two {
width: 250px;
height: 250px;
border-radius: 50%;
border: 20px outset #81ff14;
margin: auto;
margin-top: 5px;
text-align: center;
animation: spin 5s infinite linear;
}
.survive {
font-size: 36px;
line-height: 35px;
max-width: 150px;
margin: -175px auto;
font-family: 'Titillium Web', sans-serif;
font-weight: 700;
position: relative;
z-index: 0;
}
.preserve {
transform-style: preserve-3d;
z-index: 100;
position: relative;
}
.containAnimation {
height: 300px;
width: 300px;
text-align: center;
}
#keyframes spin {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
50% {
transform: rotateX(-180deg) rotateY(180deg);
}
90% {
transform: rotateX(0deg) rotateY(0deg);
}
}
And this is an example of what I want the end result to be like.