As I indicated in a previous post, I gave a workshop at WordCamp Johannesburg about CSS trends. The focus of the workshop was not on me introducing the trends but on the audience trying these features out for themselves.
I created a homepage on a temporary site using the Twenty Twenty default theme that’s coming with the next version of WordPress core. All participants of the workshop used the Stylus browser extension to then provided extreme makeovers.
Let’s just say they were extreme indeed. Here are a few of the amazing things people did in less than an hour of playing around with CSS. We had a little competition as well, and as you will see at the end of
Thanks to all the participants for making this a super fun workshop!
The start
Of course, it’s nice to have a look at what we started with:

Take over control
One of the users used CSS to add her own name to the homepage and converted the cover image into a background for the site:

Gradient animations
Another pair of participants went all out on animations combined with CSS gradients:
They also changed the submit button to make a user really question themselves (and particularly if they’d be willing to hit that button):
Another duo
Flashy title
One of the participants decided to go for psychedelic effects on the site title:
Unicorns & rainbows always win
In the end, the site with the rainbow unicorn won. As it always does.
Here’s the full CSS file they added – extreme makeover indeed:
.site-title, .faux-heading {
animation: 3s traffic-light infinite;
}
h1 {
-webkit-animation: rotation 2s infinite linear;
}
body {
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
color: purple;
}
@keyframes traffic-light {
0% { color: black; }
25% { color: red; }
50% { color: orange; }
75% { color: green; }
100% { color: black; }
}
img {
padding: 5px;
background-color: green;
transition: transform .2s;
width: 100vh;
height: 100vh;
margin: 0 auto;
}
img:hover {
transform: scale(1.5);
}
@keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
a {
color: yellow;
}
a[href^="https://jhb.mystagingwebsite.com/instructions/"] {
color: orange;
}
header{
background-image: url('https://66.media.tumblr.com/2e2d5f1e4f0667c181c3afa9ef8cca1b/tumblr_mu4kbwQ0eY1qki7dgo1_500.gif');
background-position: center center;
background-repeat: no-repeat;
}
.wp-block-cover__inner-container p {
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
@font-face { font-family: roboto-regular;
src: url('../font/Roboto-Regular.ttf'); }
h1 {
font-family: 'roboto-regular';
font-weight: 192;
}
h2 {
font-family: 'roboto-regular';
font-weight: 356;
}
.menu-modal {
width: calc( 100% / 5 );
}
Leave a Reply