Extreme Makeover: The Homepage Edition

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 this posts: it’s always unicorns that take the crown.

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 choose to have a hover effect on the cover image. It’s of course impossible to tweak this in such a short time, but the landing pages of new Apple products would allow for that:

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 );
}