|
|
|
@ -18,7 +18,7 @@ main { |
|
|
|
opacity: 80%; |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
margin: 0 1rem 3rem 0; |
|
|
|
margin: 6rem 3rem 1rem 0; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
@ -31,7 +31,7 @@ main { |
|
|
|
opacity: 90%; |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
margin: 0 0 3rem 1rem; |
|
|
|
margin: 6rem 0 1rem 2rem; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
@ -44,7 +44,7 @@ main { |
|
|
|
opacity: 80%; |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
margin: 6rem 0 0 0; |
|
|
|
margin: 2rem 0 0 0; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
@ -108,4 +108,376 @@ main { |
|
|
|
font-size: 24px; |
|
|
|
min-width: 196px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* overengeneered pure css action button */ |
|
|
|
/* UIVERSE CSS Challenge entry */ |
|
|
|
/* by kennyotsu <3 */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* container wraps everything together, applies general styles and does nothing else*/ |
|
|
|
.container { |
|
|
|
|
|
|
|
position: relative; |
|
|
|
display: -webkit-box; |
|
|
|
display: -ms-flexbox; |
|
|
|
display: flex; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-box-direction: normal; |
|
|
|
-ms-flex-direction: column; |
|
|
|
flex-direction: column; |
|
|
|
-webkit-box-pack: center; |
|
|
|
-ms-flex-pack: center; |
|
|
|
justify-content: center; |
|
|
|
-webkit-box-align: center; |
|
|
|
-ms-flex-align: center; |
|
|
|
align-items: center; |
|
|
|
width: 200px; |
|
|
|
height: 200px; |
|
|
|
color: rgb(131, 131, 131); |
|
|
|
-webkit-transition: 400ms ease-in-out; |
|
|
|
transition: 400ms ease-in-out; |
|
|
|
transform: translateY(20px); |
|
|
|
} |
|
|
|
|
|
|
|
/* clickHandler, as the name suggests, handles clicks. |
|
|
|
Its a label for invisible checkbox, positioned absolutely and taking whole container space. |
|
|
|
Comes with insane z-index. Stays above .container |
|
|
|
When clicked, will change input state to checked */ |
|
|
|
#shuttle-wrapper { |
|
|
|
position: absolute; |
|
|
|
opacity: 0; |
|
|
|
-webkit-transition: 200ms ease-in; |
|
|
|
transition: 200ms ease-in; |
|
|
|
z-index: 200; |
|
|
|
} |
|
|
|
|
|
|
|
#b { |
|
|
|
width: 80px; |
|
|
|
height: auto; |
|
|
|
z-index: 200; |
|
|
|
} |
|
|
|
|
|
|
|
#shadow { |
|
|
|
position: absolute; |
|
|
|
width: 100px; |
|
|
|
height: 80px; |
|
|
|
-webkit-transform: rotateX(45deg) rotateZ(45deg); |
|
|
|
transform: rotateX(45deg) rotateZ(45deg); |
|
|
|
bottom: -10px; |
|
|
|
z-index: -1; |
|
|
|
background: radial-gradient(rgba(0, 0, 0, 0.382) 0%, rgba(0, 0, 0, 0) 70%); |
|
|
|
} |
|
|
|
|
|
|
|
#clickHandler { |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
inset: 0; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
#clickHandler:hover { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.container:hover #shuttle-wrapper { |
|
|
|
opacity: 1; |
|
|
|
-webkit-transform: translateY(-100px) translateZ(140px); |
|
|
|
-ms-transform: translateY(-100px) translateZ(140px); |
|
|
|
transform: translateY(-100px) translateZ(140px); |
|
|
|
-webkit-transition: 400ms ease-in-out; |
|
|
|
transition: 400ms ease-in-out; |
|
|
|
} |
|
|
|
|
|
|
|
#checkbox { |
|
|
|
/* comment out to actually see the checkbox state */ |
|
|
|
display: none; |
|
|
|
/* */ |
|
|
|
position: absolute; |
|
|
|
bottom: 0px; |
|
|
|
width: 200px; |
|
|
|
} |
|
|
|
|
|
|
|
/* this pseudo-selectors will fire animations when |
|
|
|
clickHandler changes checkbox state to checked */ |
|
|
|
#checkbox:checked ~ #shuttle-wrapper #b { |
|
|
|
-webkit-animation-name: launch_31; |
|
|
|
animation-name: launch_31; |
|
|
|
-webkit-animation-timing-function: ease-in-out; |
|
|
|
animation-timing-function: ease-in-out; |
|
|
|
-webkit-animation-duration: 6s; |
|
|
|
animation-duration: 6s; |
|
|
|
} |
|
|
|
|
|
|
|
#checkbox:checked ~ #shuttle-wrapper #shadow { |
|
|
|
-webkit-animation: shadow-launch 6s ease-in-out; |
|
|
|
animation: shadow-launch 6s ease-in-out; |
|
|
|
} |
|
|
|
|
|
|
|
#checkbox:checked ~ #to-hover { |
|
|
|
-webkit-animation-name: fadeout_010; |
|
|
|
animation-name: fadeout_010; |
|
|
|
-webkit-animation-duration: 6s; |
|
|
|
animation-duration: 6s; |
|
|
|
} |
|
|
|
|
|
|
|
#checkbox:checked ~ #button #to-launch { |
|
|
|
-webkit-animation-name: fadeout_010; |
|
|
|
animation-name: fadeout_010; |
|
|
|
-webkit-animation-duration: 6s; |
|
|
|
animation-duration: 6s; |
|
|
|
} |
|
|
|
/* and this will take care of hover */ |
|
|
|
#clickHandler:hover ~ #button { |
|
|
|
width: 200px; |
|
|
|
height: 200px; |
|
|
|
-webkit-transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg); |
|
|
|
transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg); |
|
|
|
-webkit-box-shadow: 2px 2px 0 2px #b2b2b2, -1px 0 28px 0 rgba(255, 250, 225, 0.512), |
|
|
|
28px 28px 28px 0 rgba(28, 27, 88, 0.315); |
|
|
|
box-shadow: 2px 2px 0 2px #b2b2b2, -1px 0 28px 0 rgba(255, 250, 225, 0.512), |
|
|
|
28px 28px 28px 0 rgba(28, 27, 88, 0.315); |
|
|
|
-webkit-transition-delay: 0ms; |
|
|
|
transition-delay: 0ms; |
|
|
|
} |
|
|
|
|
|
|
|
.container:hover { |
|
|
|
-webkit-transform: translateY(30%); |
|
|
|
-ms-transform: translateY(30%); |
|
|
|
transform: translateY(30%); |
|
|
|
} |
|
|
|
|
|
|
|
#to-launch { |
|
|
|
color: rgb(1, 85, 255); |
|
|
|
font-size: large; |
|
|
|
font-weight: bold; |
|
|
|
-webkit-transition: ease-out 200ms; |
|
|
|
transition: ease-out 200ms; |
|
|
|
} |
|
|
|
|
|
|
|
#to-hover { |
|
|
|
margin-top: 1em; |
|
|
|
text-align: center; |
|
|
|
-webkit-transition: ease-out 200ms; |
|
|
|
transition: ease-out 200ms; |
|
|
|
} |
|
|
|
|
|
|
|
#tag { |
|
|
|
opacity: 0; |
|
|
|
color: rgb(43, 43, 43); |
|
|
|
position: absolute; |
|
|
|
} |
|
|
|
|
|
|
|
#platform { |
|
|
|
position: absolute; |
|
|
|
width: 70%; |
|
|
|
height: 0; |
|
|
|
border-radius: 16px; |
|
|
|
background-color: rgb(234, 234, 234); |
|
|
|
-webkit-transition: 0.3s ease-in-out; |
|
|
|
transition: 0.3s ease-in-out; |
|
|
|
-webkit-transition-delay: 150ms; |
|
|
|
transition-delay: 150ms; |
|
|
|
border: solid 0px rgba(42, 42, 42, 0); |
|
|
|
outline: dashed rgba(255, 173, 57, 0); |
|
|
|
-moz-outline-radius: 16px; |
|
|
|
outline-width: 0px; |
|
|
|
outline-offset: 0px; |
|
|
|
} |
|
|
|
|
|
|
|
#clickHandler:hover ~ #button #platform { |
|
|
|
height: 70%; |
|
|
|
background: rgb(244, 244, 244); |
|
|
|
border: solid 4px rgb(42, 42, 42); |
|
|
|
outline: dashed rgb(255, 172, 57); |
|
|
|
outline-width: 4px; |
|
|
|
outline-offset: -4px; |
|
|
|
-webkit-animation: shake_010 80ms infinite; |
|
|
|
animation: shake_010 80ms infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.caution { |
|
|
|
-webkit-transform: translateY(-200); |
|
|
|
-ms-transform: translateY(-200); |
|
|
|
transform: translateY(-200); |
|
|
|
position: absolute; |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
#checkbox:checked ~ .caution { |
|
|
|
-webkit-animation-name: fadeout_010; |
|
|
|
animation-name: fadeout_010; |
|
|
|
-webkit-animation-duration: 6s; |
|
|
|
animation-duration: 6s; |
|
|
|
} |
|
|
|
|
|
|
|
#caution-left { |
|
|
|
-webkit-transition: 200ms ease; |
|
|
|
transition: 200ms ease; |
|
|
|
opacity: 0; |
|
|
|
-webkit-transform: translate3d(83px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-90deg); |
|
|
|
transform: translate3d(83px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-90deg); |
|
|
|
} |
|
|
|
|
|
|
|
#caution-right { |
|
|
|
-webkit-transition: 200ms ease; |
|
|
|
transition: 200ms ease; |
|
|
|
opacity: 0; |
|
|
|
-webkit-transform: translate3d(0px, 62px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); |
|
|
|
transform: translate3d(0px, 62px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); |
|
|
|
} |
|
|
|
|
|
|
|
#clickHandler:hover ~ #button .caution #caution-left { |
|
|
|
opacity: 1; |
|
|
|
-webkit-transition: 400ms ease-in; |
|
|
|
transition: 400ms ease-in; |
|
|
|
animation: glow_010 1.2s infinite; |
|
|
|
} |
|
|
|
|
|
|
|
#clickHandler:hover ~ #button .caution #caution-right { |
|
|
|
opacity: 1; |
|
|
|
-webkit-transition: 400ms ease-in; |
|
|
|
transition: 400ms ease-in; |
|
|
|
animation: glow_010 1.2s infinite; |
|
|
|
} |
|
|
|
|
|
|
|
#button { |
|
|
|
width: 200px; |
|
|
|
height: 80px; |
|
|
|
border: none; |
|
|
|
border-radius: 1.8rem; |
|
|
|
-webkit-transition: 0.4s ease-in-out; |
|
|
|
transition: 0.4s ease-in-out; |
|
|
|
-webkit-box-shadow: 5px 5px 8px 0 rgba(28, 27, 88, 0.315); |
|
|
|
box-shadow: 5px 5px 8px 0 rgba(28, 27, 88, 0.315); |
|
|
|
background: -webkit-gradient(linear, left top, right top, from(#ffffff), to(#ececec)); |
|
|
|
background: linear-gradient(125deg, #ffffff 50%, #f5f5ff); |
|
|
|
display: -webkit-box; |
|
|
|
display: -ms-flexbox; |
|
|
|
display: flex; |
|
|
|
-webkit-box-pack: center; |
|
|
|
-ms-flex-pack: center; |
|
|
|
justify-content: center; |
|
|
|
-webkit-box-align: center; |
|
|
|
-ms-flex-align: center; |
|
|
|
align-items: center; |
|
|
|
font-family: inherit; |
|
|
|
-webkit-transition-delay: 100ms; |
|
|
|
transition-delay: 100ms; |
|
|
|
} |
|
|
|
|
|
|
|
#clickHandler:hover ~ #button #to-launch { |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
|
|
|
|
#clickHandler:hover ~ #to-hover { |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
|
|
|
|
#checkbox:checked ~ #button #tag { |
|
|
|
-webkit-animation: tag-transition 5s ease-in-out; |
|
|
|
animation: tag-transition 5s ease-in-out; |
|
|
|
} |
|
|
|
|
|
|
|
/* launch sequence, takes only 20% of duration to completely fade out, |
|
|
|
and stays there til 90% */ |
|
|
|
|
|
|
|
@keyframes launch_31 { |
|
|
|
5% { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
15%, 90% { |
|
|
|
-webkit-transform: translateY(-200px); |
|
|
|
transform: translateY(-200px); |
|
|
|
-webkit-transition-timing-function: ease-in; |
|
|
|
transition-timing-function: ease-in; |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes shadow-launch { |
|
|
|
0% { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
10%, 90% { |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes fadeout_010 { |
|
|
|
100% { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
0%, 20%, 90% { |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes shake_010 { |
|
|
|
0%, 50% { |
|
|
|
-webkit-transform: translate3d(1px, 0px, 0px); |
|
|
|
transform: translate3d(1px, 0px, 0px); |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
-webkit-transform: translate3d(0px, 1px, 0px); |
|
|
|
transform: translate3d(0px, 1px, 0px); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes glow_010 { |
|
|
|
0% { |
|
|
|
color: rgb(94, 94, 94); |
|
|
|
-webkit-filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90)); |
|
|
|
filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90)); |
|
|
|
} |
|
|
|
|
|
|
|
70% { |
|
|
|
color: rgba(255, 255, 255, 0); |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
color: rgb(94, 94, 94); |
|
|
|
-webkit-filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90)); |
|
|
|
filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90)); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes tag-transition { |
|
|
|
0%, 100% { |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
|
|
|
|
20%, 80% { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.noselect { |
|
|
|
margin: auto; |
|
|
|
-webkit-touch-callout: none; |
|
|
|
/* iOS Safari */ |
|
|
|
-webkit-user-select: none; |
|
|
|
/* Safari */ |
|
|
|
/* Konqueror HTML */ |
|
|
|
-moz-user-select: none; |
|
|
|
/* Old versions of Firefox */ |
|
|
|
-ms-user-select: none; |
|
|
|
/* Internet Explorer/Edge */ |
|
|
|
user-select: none; |
|
|
|
/* Non-prefixed version, currently |
|
|
|
supported by Chrome, Edge, Opera and Firefox */ |
|
|
|
} |
clement callaert
2 years ago