Something is better than nothing


by Jeremy Caudle
code

Today's practice is nothing special. I just animated a shadow on a paragraph. I'm not quite burned out, but I couldn't come up with something useful to finish before the end of the day.

Sometimes I'm not sure what to make, so I just put some words down and try to see what I can make with them. I wish it could always be something profound and thought provoking, but that's hardly the case. Still, the sounds of the keys and the rhythm I can maintain can be soothing and relaxing at times.

View the code:

HTML and JS 
<div class="codedoodle-block">
        <p>Sometimes I'm not sure what to make, so I just put some words down and try to see what I can make with them. I wish it could always be something profound and thought provoking, but that's hardly the case. Still, the sounds of the keys and the rhythm I can maintain can be soothing and relaxing at times.</p>
    </div>
CSS 
:root {
            --bg-color: #333333;
            --main-width: 100%;
            --measure: 50em;
    }

@keyframes moveshadow {
    0% {
        box-shadow: 0 0 5px 10px rgba(0, 0, 0, .1);
    }
    25% {
        box-shadow: 0 10px 5px 10px rgba(255, 0, 0, .1);
    }
    50% {
        box-shadow: 0 0 5px 10px rgba(0, 255, 0, .1);
    }
    75% {
        box-shadow: 0 -10px 5px 10px rgba(0, 0, 255, .1);
    }
    100% {
        box-shadow: 0 0 5px 10 rgba(255, 255, 255, 1);
    }

}

    .codedoodle-block {
        background: var(--bg-color, #333333);
        margin: 2rem auto;
        max-width: 300px;
        padding: 1rem;
        color: white;
        border-radius: 1rem;
        animation: moveshadow 10s ease-in-out 0s infinite alternate backwards;
        
    }

    .codedoodle-block p {
        margin: 0;
        font-family: sans-serif;
        letter-spacing: 2px;
        line-height: 1.5;
    }

Tags