Programmer
How do I make an programmer?
Remembered a classic quote: "Programmer is just a tool which converts caffeine to code."This is my box-shadow animated visual interpretation of the above.. What is a programmer? How do you make a programmer? This script and codes were developed by ZeroSpree on 13 July 2022, Wednesday.
Programmer Previews
Programmer - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Programmer</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .programmer{
font-size:5px; /* Control the size of your element */
position : absolute;
left : 50%;
top : 50%;
width : 22em;
height : 15em;
margin : -7.5em 0 0 -11em;}
.programmer::before,
.programmer::after{
content : '';
display : block;
width : 1em;
height : 1em;
margin : -1em 0 0 -1em;
}
.programmer::before{/*This is the animated area of the element*/
animation: animate 2000ms steps(1) infinite;
}
@keyframes animate {
0%, 100% {box-shadow:8em 5em #070307,8em 4em #070307,6em 4em #070307,6em 5em #070307,4em 4em #070307,4em 5em #070307,4em 8em #303030,4em 9em #303030,4em 10em #303030,4em 11em #303030,4em 12em #303030,4em 13em #303030,5em 13em #303030,6em 13em #303030,7em 13em #303030,5em 9em #303030,5em 10em #303030,5em 11em #303030,5em 12em #303030,6em 12em #303030,6em 11em #303030,5em 8em #303030,6em 8em #303030,7em 8em #303030,8em 8em #303030,8em 9em #303030,7em 9em #303030,6em 9em #303030,6em 10em #303030,7em 10em #303030,8em 10em #303030,8em 11em #303030,7em 11em #303030,7em 12em #303030,8em 12em #303030,8em 13em #303030,8em 14em #303030,7em 14em #303030,6em 14em #303030,5em 14em #303030,4em 14em #303030}
10% {box-shadow:8em 5em #070307,8em 4em #595959,6em 4em #070307,6em 5em #070307,4em 4em #595959,4em 5em #070307,4em 9em #303030,4em 10em #303030,4em 11em #303030,4em 12em #303030,4em 13em #303030,5em 13em #303030,6em 13em #303030,7em 13em #303030,5em 9em #303030,5em 10em #303030,5em 11em #303030,5em 12em #303030,6em 12em #303030,6em 11em #303030,8em 9em #303030,7em 9em #303030,6em 9em #303030,6em 10em #303030,7em 10em #303030,8em 10em #303030,8em 11em #303030,7em 11em #303030,7em 12em #303030,8em 12em #303030,8em 13em #303030,8em 14em #303030,7em 14em #303030,6em 14em #303030,5em 14em #303030,4em 14em #303030,15em 11em #570e57,16em 11em #570e57,18em 11em #570e57,19em 11em #570e57,20em 11em #570e57,17em 11em #570e57,14em 11em #570e57,13em 11em #570e57}
20% {box-shadow:8em 5em #595959,6em 4em #595959,6em 5em #070307,4em 5em #595959,4em 10em #303030,4em 11em #303030,4em 12em #303030,4em 13em #303030,5em 13em #303030,6em 13em #303030,7em 13em #303030,5em 10em #303030,5em 11em #303030,5em 12em #303030,6em 12em #303030,6em 11em #303030,6em 10em #303030,7em 10em #303030,8em 10em #303030,8em 11em #303030,7em 11em #303030,7em 12em #303030,8em 12em #303030,8em 13em #303030,8em 14em #303030,7em 14em #303030,6em 14em #303030,5em 14em #303030,4em 14em #303030,14em 9em #570e57,15em 9em #570e57,16em 9em #570e57,17em 9em #570e57,18em 9em #570e57,19em 9em #570e57,20em 9em #570e57,15em 11em #4e4e9c,16em 11em #4e4e9c,17em 11em #4e4e9c,18em 11em #4e4e9c,19em 11em #4e4e9c,20em 11em #4e4e9c,13em 9em #570e57}
30% {box-shadow:8em 5em #595959,6em 5em #595959,4em 5em #595959,4em 11em #303030,4em 12em #303030,4em 13em #303030,5em 13em #303030,6em 13em #303030,7em 13em #303030,5em 11em #303030,5em 12em #303030,6em 12em #303030,6em 11em #303030,8em 11em #303030,7em 11em #303030,7em 12em #303030,8em 12em #303030,8em 13em #303030,8em 14em #303030,7em 14em #303030,6em 14em #303030,5em 14em #303030,4em 14em #303030,15em 9em #4e4e9c,16em 9em #4e4e9c,17em 9em #4e4e9c,18em 9em #4e4e9c,19em 9em #4e4e9c,20em 9em #4e4e9c,20em 7em #570e57,19em 7em #570e57,18em 7em #570e57,17em 7em #570e57,16em 7em #570e57,15em 7em #570e57,14em 7em #570e57,14em 11em #225c24,15em 11em #225c24,16em 11em #225c24,17em 11em #225c24,18em 11em #225c24,19em 11em #225c24,20em 11em #225c24,13em 11em #225c24,12em 11em #225c24,13em 7em #570e57,6em 3em #070307}
40% {box-shadow:4em 12em #303030,4em 13em #303030,5em 13em #303030,6em 13em #303030,7em 13em #303030,5em 12em #303030,6em 12em #303030,7em 12em #303030,8em 12em #303030,8em 13em #303030,8em 14em #303030,7em 14em #303030,6em 14em #303030,5em 14em #303030,4em 14em #303030,13em 5em #570e57,14em 5em #570e57,15em 5em #570e57,16em 5em #570e57,17em 5em #570e57,18em 5em #570e57,19em 5em #570e57,20em 5em #570e57,20em 7em #4e4e9c,19em 7em #4e4e9c,18em 7em #4e4e9c,17em 7em #4e4e9c,16em 7em #4e4e9c,15em 7em #4e4e9c,20em 9em #225c24,19em 9em #225c24,18em 9em #225c24,17em 9em #225c24,16em 9em #225c24,15em 9em #225c24,14em 9em #225c24,13em 9em #225c24,12em 9em #225c24,20em 11em #000000,18em 11em #000000,16em 11em #000000,14em 11em #000000,12em 11em #000000,6em 3em #070307,6em 4em #070307,6em 5em #070307}
50% {box-shadow:4em 13em #303030,5em 13em #303030,6em 13em #303030,7em 13em #303030,8em 13em #303030,8em 14em #303030,7em 14em #303030,6em 14em #303030,5em 14em #303030,4em 14em #303030,13em 5em #570e57,14em 5em #570e57,15em 5em #570e57,16em 5em #570e57,17em 5em #570e57,18em 5em #570e57,19em 5em #570e57,20em 5em #570e57,20em 7em #4e4e9c,19em 7em #4e4e9c,18em 7em #4e4e9c,17em 7em #4e4e9c,16em 7em #4e4e9c,15em 7em #4e4e9c,20em 9em #225c24,19em 9em #225c24,18em 9em #225c24,17em 9em #225c24,16em 9em #225c24,15em 9em #225c24,14em 9em #225c24,13em 9em #225c24,12em 9em #225c24,11em 11em #000000,13em 11em #000000,15em 11em #000000,17em 11em #000000,19em 11em #000000,6em 3em #070307,6em 4em #070307,6em 5em #070307}
60% {box-shadow:8em 14em #303030,7em 14em #303030,6em 14em #303030,5em 14em #303030,4em 14em #303030,13em 5em #570e57,14em 5em #570e57,15em 5em #570e57,16em 5em #570e57,17em 5em #570e57,18em 5em #570e57,19em 5em #570e57,20em 5em #570e57,20em 7em #4e4e9c,19em 7em #4e4e9c,18em 7em #4e4e9c,17em 7em #4e4e9c,16em 7em #4e4e9c,15em 7em #4e4e9c,20em 9em #225c24,19em 9em #225c24,18em 9em #225c24,17em 9em #225c24,16em 9em #225c24,15em 9em #225c24,14em 9em #225c24,13em 9em #225c24,12em 9em #225c24,12em 11em #000000,14em 11em #000000,16em 11em #000000,18em 11em #000000,20em 11em #000000,6em 3em #070307,6em 4em #070307,6em 5em #070307}
70% {box-shadow:15em 11em #225c24,14em 10em #225c24,13em 9em #225c24,12em 8em #225c24,16em 10em #225c24,17em 9em #225c24,18em 8em #225c24,19em 7em #225c24,20em 6em #225c24,19em 6em #225c24,20em 5em #225c24,18em 7em #225c24,17em 8em #225c24,16em 9em #225c24,15em 10em #225c24,14em 9em #225c24,13em 8em #225c24,6em 3em #070307,6em 4em #070307,6em 5em #070307}
80% {box-shadow:6em 3em #070307,6em 4em #070307,6em 5em #070307}
90% {box-shadow:15em 11em #225c24,14em 10em #225c24,13em 9em #225c24,12em 8em #225c24,16em 10em #225c24,17em 9em #225c24,18em 8em #225c24,19em 7em #225c24,20em 6em #225c24,19em 6em #225c24,20em 5em #225c24,18em 7em #225c24,17em 8em #225c24,16em 9em #225c24,15em 10em #225c24,14em 9em #225c24,13em 8em #225c24,6em 3em #070307,6em 4em #070307,6em 5em #070307}
}
.programmer::after{ /*This is the static area of the element*/
box-shadow:3em 7em #000000,3em 8em #070307,3em 10em #070307,3em 11em #070307,3em 12em #070307,6em 1em #070307,7em 1em #070307,8em 1em #070307,9em 1em #070307,10em 1em #070307,1em 9em #070307,1em 10em #070307,1em 11em #070307,1em 12em #070307,9em 14em #070307,3em 14em #000000,11em 1em #070307,12em 1em #070307,13em 1em #070307,14em 1em #070307,15em 1em #070307,16em 1em #070307,17em 1em #070307,18em 1em #070307,19em 1em #070307,20em 1em #070307,21em 1em #070307,22em 1em #070307,22em 2em #070307,22em 3em #070307,22em 4em #070307,22em 5em #070307,22em 6em #070307,22em 7em #070307,22em 8em #070307,22em 9em #070307,22em 10em #070307,22em 11em #070307,22em 12em #000000,6em 2em #070307,18em 3em #070307,19em 3em #070307,20em 3em #070307,14em 3em #070307,1em 13em #070307,2em 13em #070307,3em 15em #070307,4em 15em #070307,5em 15em #070307,6em 15em #070307,7em 15em #070307,8em 15em #070307,9em 15em #070307,11em 13em #000000,9em 13em #000000,9em 12em #000000,9em 11em #000000,9em 10em #000000,9em 9em #000000,9em 8em #000000,9em 7em #000000,8em 7em #000000,7em 7em #000000,6em 7em #000000,5em 7em #000000,4em 7em #000000,2em 9em #000000,3em 9em #000000,3em 13em #000000,22em 13em #000000,21em 13em #000000,20em 13em #000000,19em 13em #000000,18em 13em #000000,17em 13em #000000,16em 13em #000000,15em 13em #000000,14em 13em #000000,13em 13em #000000,12em 13em #000000,15em 3em #000000,16em 3em #000000;
}
body,html{margin:0;background:#7A8CAB}
q{position:absolute;bottom:50px;width:100%;text-align:center;color:#fff;} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="programmer"></div>
<q><i>Programmer</i> is just a tool which converts caffeine to code.</q>
</body>
</html>
Programmer - Script Codes CSS Codes
.programmer{
font-size:5px; /* Control the size of your element */
position : absolute;
left : 50%;
top : 50%;
width : 22em;
height : 15em;
margin : -7.5em 0 0 -11em;}
.programmer::before,
.programmer::after{
content : '';
display : block;
width : 1em;
height : 1em;
margin : -1em 0 0 -1em;
}
.programmer::before{/*This is the animated area of the element*/
animation: animate 2000ms steps(1) infinite;
}
@keyframes animate {
0%, 100% {box-shadow:8em 5em #070307,8em 4em #070307,6em 4em #070307,6em 5em #070307,4em 4em #070307,4em 5em #070307,4em 8em #303030,4em 9em #303030,4em 10em #303030,4em 11em #303030,4em 12em #303030,4em 13em #303030,5em 13em #303030,6em 13em #303030,7em 13em #303030,5em 9em #303030,5em 10em #303030,5em 11em #303030,5em 12em #303030,6em 12em #303030,6em 11em #303030,5em 8em #303030,6em 8em #303030,7em 8em #303030,8em 8em #303030,8em 9em #303030,7em 9em #303030,6em 9em #303030,6em 10em #303030,7em 10em #303030,8em 10em #303030,8em 11em #303030,7em 11em #303030,7em 12em #303030,8em 12em #303030,8em 13em #303030,8em 14em #303030,7em 14em #303030,6em 14em #303030,5em 14em #303030,4em 14em #303030}
10% {box-shadow:8em 5em #070307,8em 4em #595959,6em 4em #070307,6em 5em #070307,4em 4em #595959,4em 5em #070307,4em 9em #303030,4em 10em #303030,4em 11em #303030,4em 12em #303030,4em 13em #303030,5em 13em #303030,6em 13em #303030,7em 13em #303030,5em 9em #303030,5em 10em #303030,5em 11em #303030,5em 12em #303030,6em 12em #303030,6em 11em #303030,8em 9em #303030,7em 9em #303030,6em 9em #303030,6em 10em #303030,7em 10em #303030,8em 10em #303030,8em 11em #303030,7em 11em #303030,7em 12em #303030,8em 12em #303030,8em 13em #303030,8em 14em #303030,7em 14em #303030,6em 14em #303030,5em 14em #303030,4em 14em #303030,15em 11em #570e57,16em 11em #570e57,18em 11em #570e57,19em 11em #570e57,20em 11em #570e57,17em 11em #570e57,14em 11em #570e57,13em 11em #570e57}
20% {box-shadow:8em 5em #595959,6em 4em #595959,6em 5em #070307,4em 5em #595959,4em 10em #303030,4em 11em #303030,4em 12em #303030,4em 13em #303030,5em 13em #303030,6em 13em #303030,7em 13em #303030,5em 10em #303030,5em 11em #303030,5em 12em #303030,6em 12em #303030,6em 11em #303030,6em 10em #303030,7em 10em #303030,8em 10em #303030,8em 11em #303030,7em 11em #303030,7em 12em #303030,8em 12em #303030,8em 13em #303030,8em 14em #303030,7em 14em #303030,6em 14em #303030,5em 14em #303030,4em 14em #303030,14em 9em #570e57,15em 9em #570e57,16em 9em #570e57,17em 9em #570e57,18em 9em #570e57,19em 9em #570e57,20em 9em #570e57,15em 11em #4e4e9c,16em 11em #4e4e9c,17em 11em #4e4e9c,18em 11em #4e4e9c,19em 11em #4e4e9c,20em 11em #4e4e9c,13em 9em #570e57}
30% {box-shadow:8em 5em #595959,6em 5em #595959,4em 5em #595959,4em 11em #303030,4em 12em #303030,4em 13em #303030,5em 13em #303030,6em 13em #303030,7em 13em #303030,5em 11em #303030,5em 12em #303030,6em 12em #303030,6em 11em #303030,8em 11em #303030,7em 11em #303030,7em 12em #303030,8em 12em #303030,8em 13em #303030,8em 14em #303030,7em 14em #303030,6em 14em #303030,5em 14em #303030,4em 14em #303030,15em 9em #4e4e9c,16em 9em #4e4e9c,17em 9em #4e4e9c,18em 9em #4e4e9c,19em 9em #4e4e9c,20em 9em #4e4e9c,20em 7em #570e57,19em 7em #570e57,18em 7em #570e57,17em 7em #570e57,16em 7em #570e57,15em 7em #570e57,14em 7em #570e57,14em 11em #225c24,15em 11em #225c24,16em 11em #225c24,17em 11em #225c24,18em 11em #225c24,19em 11em #225c24,20em 11em #225c24,13em 11em #225c24,12em 11em #225c24,13em 7em #570e57,6em 3em #070307}
40% {box-shadow:4em 12em #303030,4em 13em #303030,5em 13em #303030,6em 13em #303030,7em 13em #303030,5em 12em #303030,6em 12em #303030,7em 12em #303030,8em 12em #303030,8em 13em #303030,8em 14em #303030,7em 14em #303030,6em 14em #303030,5em 14em #303030,4em 14em #303030,13em 5em #570e57,14em 5em #570e57,15em 5em #570e57,16em 5em #570e57,17em 5em #570e57,18em 5em #570e57,19em 5em #570e57,20em 5em #570e57,20em 7em #4e4e9c,19em 7em #4e4e9c,18em 7em #4e4e9c,17em 7em #4e4e9c,16em 7em #4e4e9c,15em 7em #4e4e9c,20em 9em #225c24,19em 9em #225c24,18em 9em #225c24,17em 9em #225c24,16em 9em #225c24,15em 9em #225c24,14em 9em #225c24,13em 9em #225c24,12em 9em #225c24,20em 11em #000000,18em 11em #000000,16em 11em #000000,14em 11em #000000,12em 11em #000000,6em 3em #070307,6em 4em #070307,6em 5em #070307}
50% {box-shadow:4em 13em #303030,5em 13em #303030,6em 13em #303030,7em 13em #303030,8em 13em #303030,8em 14em #303030,7em 14em #303030,6em 14em #303030,5em 14em #303030,4em 14em #303030,13em 5em #570e57,14em 5em #570e57,15em 5em #570e57,16em 5em #570e57,17em 5em #570e57,18em 5em #570e57,19em 5em #570e57,20em 5em #570e57,20em 7em #4e4e9c,19em 7em #4e4e9c,18em 7em #4e4e9c,17em 7em #4e4e9c,16em 7em #4e4e9c,15em 7em #4e4e9c,20em 9em #225c24,19em 9em #225c24,18em 9em #225c24,17em 9em #225c24,16em 9em #225c24,15em 9em #225c24,14em 9em #225c24,13em 9em #225c24,12em 9em #225c24,11em 11em #000000,13em 11em #000000,15em 11em #000000,17em 11em #000000,19em 11em #000000,6em 3em #070307,6em 4em #070307,6em 5em #070307}
60% {box-shadow:8em 14em #303030,7em 14em #303030,6em 14em #303030,5em 14em #303030,4em 14em #303030,13em 5em #570e57,14em 5em #570e57,15em 5em #570e57,16em 5em #570e57,17em 5em #570e57,18em 5em #570e57,19em 5em #570e57,20em 5em #570e57,20em 7em #4e4e9c,19em 7em #4e4e9c,18em 7em #4e4e9c,17em 7em #4e4e9c,16em 7em #4e4e9c,15em 7em #4e4e9c,20em 9em #225c24,19em 9em #225c24,18em 9em #225c24,17em 9em #225c24,16em 9em #225c24,15em 9em #225c24,14em 9em #225c24,13em 9em #225c24,12em 9em #225c24,12em 11em #000000,14em 11em #000000,16em 11em #000000,18em 11em #000000,20em 11em #000000,6em 3em #070307,6em 4em #070307,6em 5em #070307}
70% {box-shadow:15em 11em #225c24,14em 10em #225c24,13em 9em #225c24,12em 8em #225c24,16em 10em #225c24,17em 9em #225c24,18em 8em #225c24,19em 7em #225c24,20em 6em #225c24,19em 6em #225c24,20em 5em #225c24,18em 7em #225c24,17em 8em #225c24,16em 9em #225c24,15em 10em #225c24,14em 9em #225c24,13em 8em #225c24,6em 3em #070307,6em 4em #070307,6em 5em #070307}
80% {box-shadow:6em 3em #070307,6em 4em #070307,6em 5em #070307}
90% {box-shadow:15em 11em #225c24,14em 10em #225c24,13em 9em #225c24,12em 8em #225c24,16em 10em #225c24,17em 9em #225c24,18em 8em #225c24,19em 7em #225c24,20em 6em #225c24,19em 6em #225c24,20em 5em #225c24,18em 7em #225c24,17em 8em #225c24,16em 9em #225c24,15em 10em #225c24,14em 9em #225c24,13em 8em #225c24,6em 3em #070307,6em 4em #070307,6em 5em #070307}
}
.programmer::after{ /*This is the static area of the element*/
box-shadow:3em 7em #000000,3em 8em #070307,3em 10em #070307,3em 11em #070307,3em 12em #070307,6em 1em #070307,7em 1em #070307,8em 1em #070307,9em 1em #070307,10em 1em #070307,1em 9em #070307,1em 10em #070307,1em 11em #070307,1em 12em #070307,9em 14em #070307,3em 14em #000000,11em 1em #070307,12em 1em #070307,13em 1em #070307,14em 1em #070307,15em 1em #070307,16em 1em #070307,17em 1em #070307,18em 1em #070307,19em 1em #070307,20em 1em #070307,21em 1em #070307,22em 1em #070307,22em 2em #070307,22em 3em #070307,22em 4em #070307,22em 5em #070307,22em 6em #070307,22em 7em #070307,22em 8em #070307,22em 9em #070307,22em 10em #070307,22em 11em #070307,22em 12em #000000,6em 2em #070307,18em 3em #070307,19em 3em #070307,20em 3em #070307,14em 3em #070307,1em 13em #070307,2em 13em #070307,3em 15em #070307,4em 15em #070307,5em 15em #070307,6em 15em #070307,7em 15em #070307,8em 15em #070307,9em 15em #070307,11em 13em #000000,9em 13em #000000,9em 12em #000000,9em 11em #000000,9em 10em #000000,9em 9em #000000,9em 8em #000000,9em 7em #000000,8em 7em #000000,7em 7em #000000,6em 7em #000000,5em 7em #000000,4em 7em #000000,2em 9em #000000,3em 9em #000000,3em 13em #000000,22em 13em #000000,21em 13em #000000,20em 13em #000000,19em 13em #000000,18em 13em #000000,17em 13em #000000,16em 13em #000000,15em 13em #000000,14em 13em #000000,13em 13em #000000,12em 13em #000000,15em 3em #000000,16em 3em #000000;
}
body,html{margin:0;background:#7A8CAB}
q{position:absolute;bottom:50px;width:100%;text-align:center;color:#fff;}
| Developer | ZeroSpree |
| Username | zerospree |
| Uploaded | July 13, 2022 |
| Rating | 4.5 |
| Size | 3,804 Kb |
| Views | 58,696 |
Do you need developer help for Programmer?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
ZeroSpree (zerospree) Script Codes
| Name | Size |
| SCSS Bowser from box-shadows | 17,079 Kb |
| Hexagon exercise. | 2,615 Kb |
| Sublime Skin for CodePen Embeds | 6,333 Kb |
| Rodeo S03, Round 1 - Chili Recipe | 5,919 Kb |
| Pure CSS Apple Logo | 6,592 Kb |
| CRT monitors pattern | 1,737 Kb |
| CSS3 Shadows Darth Vader | 4,472 Kb |
| Just another Button | 2,413 Kb |
| CodePen Stats Checker | 9,083 Kb |
| Steve Jobs | 4,968 Kb |
Create amazing video scripts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| RPG Style Text Dialogue | Odylic | 2,635 Kb |
| CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
| Box-sizing | Elad2412 | 1,572 Kb |
| Gradients | Karpovsystems | 2,394 Kb |
| Vanilla modal window | Jasonhowmans | 3,554 Kb |
| Wrap_Test | Mscfourn | 7,503 Kb |
| RollOver Effect 2 | Lmack90 | 2,162 Kb |
| TinFoil Boats | Chandralil | 4,577 Kb |
| Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
| Bootstrap 4 Gridsystem Demo | Rivella50 | 1,535 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!