kato/image_fun
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initial State Commit

Browse Source
This commit is contained in:
Daniel Legt
2023-05-01 15:47:25 +03:00
commit eea5b6cdf4
26 changed files with 1002 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
public/css/buttons.css Normal file
View File

@@ -0,0 +1,46 @@
.btn-95 {
background-color: #c0c0c0;
color: black;
border: 2px outset gray;
border-radius: 0px;
font-size: 16px;
font-family: "Arial", sans-serif;
padding: 6px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.btn-95:hover:not(:disabled) {
background-color: #d8d8d8;
}
.btn-95:active:not(:disabled) {
background-color: #b8b8b8;
border: 2px inset gray;
}
.btn-95:disabled {
cursor: not-allowed;
opacity: .8;
}
textarea {
background-color: #c0c0c0;
color: black;
border: 2px outset gray;
font-size: 16px;
font-family: "Arial", sans-serif;
padding: 6px 12px;
resize: vertical;
}
textarea:hover {
background-color: #d8d8d8;
}
textarea:focus {
background-color: #e8e8e8;
}

67
public/css/vaporwave.css Normal file
View File

@@ -0,0 +1,67 @@
.overlay {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: transparent;
background-size: 5px 5px, 5px 5px;
background-position: -1px -1px, -1px -1px;
background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
mix-blend-mode: difference;
}
.glitch {
clip-path: polygon(0 0, 100% 0, 100% 0.5em, 0 0.5em);
animation: glitch 10s linear infinite;
transform: translatex(0.1rem);
}
@keyframes glitch {
to {
clip-path: polygon(0 calc(100% - .5em), 100% calc(100% - .5em), 0 100%, 0 100%);
}
}
.sun {
width: 40vh;
height: 40vh;
font-size: 1rem;
border-radius: 20vh;
position: relative;
overflow: hidden;
}
.sun:before {
content: "";
display: block;
position: absolute;
top: 0;
height: 50%;
background-color: #f54171;
background: linear-gradient(0deg, #2b1165 0%, #1a3a82 37%, #ab24b1 69%, #f54171 100%);
background-size: 40vh 40vh;
width: 100%;
}
.sun:after {
content: "";
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
background-color: #f54171;
background: linear-gradient(0deg, #2b1165 0%, #1a3a82 37%, #ab24b1 69%, #f54171 100%);
background-size: 40vh 40vh;
background-position: bottom center;
clip-path: polygon(0 -10em, 100% -10em, 100% -10.5em, 0 -10.5em, 0 -9em, 100% -9em, 100% -9.5em, 0 -9.5em, 0 -8em, 100% -8em, 100% -8.5em, 0 -8.5em, 0 -7em, 100% -7em, 100% -7.5em, 0 -7.5em, 0 -6em, 100% -6em, 100% -6.5em, 0 -6.5em, 0 -5em, 100% -5em, 100% -5.5em, 0 -5.5em, 0 -4em, 100% -4em, 100% -4.5em, 0 -4.5em, 0 -3em, 100% -3em, 100% -3.5em, 0 -3.5em, 0 -2em, 100% -2em, 100% -2.5em, 0 -2.5em, 0 -1em, 100% -1em, 100% -1.5em, 0 -1.5em, 0 0, 100% 0, 100% -0.5em, 0 -0.5em, 0 0, 100% 0, 100% 0.5em, 0 0.5em, 0 1em, 100% 1em, 100% 1.5em, 0 1.5em, 0 2em, 100% 2em, 100% 2.5em, 0 2.5em, 0 3em, 100% 3em, 100% 3.5em, 0 3.5em, 0 4em, 100% 4em, 100% 4.5em, 0 4.5em, 0 5em, 100% 5em, 100% 5.5em, 0 5.5em, 0 6em, 100% 6em, 100% 6.5em, 0 6.5em, 0 7em, 100% 7em, 100% 7.5em, 0 7.5em, 0 8em, 100% 8em, 100% 8.5em, 0 8.5em, 0 9em, 100% 9em, 100% 9.5em, 0 9.5em);
animation: lightEffect 20s linear infinite reverse;
}
@keyframes lightEffect {
to {
clip-path: polygon(0 0, 100% 0, 100% 0.5em, 0 0.5em, 0 1em, 100% 1em, 100% 1.5em, 0 1.5em, 0 2em, 100% 2em, 100% 2.5em, 0 2.5em, 0 3em, 100% 3em, 100% 3.5em, 0 3.5em, 0 4em, 100% 4em, 100% 4.5em, 0 4.5em, 0 5em, 100% 5em, 100% 5.5em, 0 5.5em, 0 6em, 100% 6em, 100% 6.5em, 0 6.5em, 0 7em, 100% 7em, 100% 7.5em, 0 7.5em, 0 8em, 100% 8em, 100% 8.5em, 0 8.5em, 0 9em, 100% 9em, 100% 9.5em, 0 9.5em, 0 10em, 100% 10em, 100% 10em, 0 10em, 0 11em, 100% 11em, 100% 11.5em, 0 11.5em, 0 12em, 100% 12em, 100% 12.5em, 0 12.5em, 0 13em, 100% 13em, 100% 13.5em, 0 13.5em, 0 14em, 100% 14em, 100% 14.5em, 0 14.5em, 0 15em, 100% 15em, 100% 15.5em, 0 15.5em, 0 16em, 100% 16em, 100% 16.5em, 0 16.5em, 0 17em, 100% 17em, 100% 17.5em, 0 17.5em, 0 18em, 100% 18em, 100% 18.5em, 0 18.5em, 0 19em, 100% 19em, 100% 19.5em, 0 19.5em, 0 20em, 100% 20em, 100% 20.5em, 0 20.5em);
}
}