Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save MbarkT3STO/595fcd53f78b4757a1a773ca60109d18 to your computer and use it in GitHub Desktop.
Save MbarkT3STO/595fcd53f78b4757a1a773ca60109d18 to your computer and use it in GitHub Desktop.
Error 500 alert - #CodePenChallenges
div#error
div#box
h3 ERROR 500
p Things are a little #[span unstable] here
p I suggest come back later
$color-1 = magenta;
$color-2 = cyan;
html,body
height 100%;
body
display grid;
width 100%;
font-family: Inconsolata, monospace;
div#error
position relative;
margin auto; padding: 20px;
z-index 2;
div#box
position absolute; top 0; left 0;
width 100%; height 100%;
border 1px solid #000;
&:before, &:after
content '';
position absolute; top 0; left 0;
width 100%; height 100%;
box-shadow inset 0px 0px 0px 1px #000;
mix-blend-mode: multiply;
animation dance 2s infinite steps(1);
&:before
clip-path: polygon(0 0, 65% 0, 35% 100%, 0 100%)
box-shadow inset 0px 0px 0px 1px currentColor;
color $color-1;
&:after
clip-path: polygon(65% 0, 100% 0, 100% 100%, 35% 100%);
animation-duration: 0.5s;
animation-direction: alternate;
box-shadow inset 0px 0px 0px 1px currentColor;
color $color-2;
h3
position relative;
font-size: 5vw; font-weight: 700;
text-transform uppercase;
animation: blink 1.3s infinite steps(1);
&:before, &:after
content 'ERROR 500';
position absolute; top -1px; left 0;
mix-blend-mode: soft-light;
animation dance 2s infinite steps(2);
&:before
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%)
color: $color-1;
animation: shiftright 2s steps(2) infinite;
&:after
clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%)
color: $color-2;
animation: shiftleft 2s steps(2) infinite;
p
position relative
margin-bottom 8px;
span
position relative;
display inline-block;
font-weight: bold;
color: #000;
animation blink 3s steps(1) infinite;
&:before, &:after
content 'unstable';
position absolute;
top -1px; left 0;
mix-blend-mode multiply;
&:before
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%)
color: $color-1;
animation: shiftright 1.5s steps(2) infinite;
&:after
clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%)
color: $color-2;
animation: shiftleft 1.7s steps(2) infinite;
@keyframes dance
0%, 84%, 94%
transform skew(0deg);
85%
transform skew(5deg);
90%
transform skew(-5deg);
98%
transform skew(3deg);
@keyframes shiftleft
0%, 87%, 100%
transform translate(0,0) skew(0deg);
84%, 90%
transform translate(-8px,0) skew(20deg);
@keyframes shiftright
0%, 87%, 100%
transform translate(0,0) skew(0deg);
84%, 90%
transform translate(8px,0) skew(20deg);
@keyframes blink
0%, 50%, 85%, 100%
color #000;
87%, 95%
color transparent;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment