Functionality in CSS

Functionality, what is that?

You can imagine functionality as something similar to event listeners. We have different ways to simulate these events in pure CSS.

Some examples can be seen on my Codepen. Below I also explain how I used them to create a CSS drawing app.

How does it work?

The following snippets will show the basic code for the events.

hover

.action:hover {
  /*
   * actions in here will be fired on hover
   * This is similar the mouseenter or mouseleave event
   */
}

focus

.action:focus {
  /*
   * actions in here will be fired on focus
   */
}

mousedown

.action:active {
  /*
   * actions in here will be fired on mousedown
   */
}

mouseenter

.action {
  transition: all 0;
  transition-delay: 999999999999999999999999s;
}
.action:hover {
  transition-delay: 0;
  /*
   * actions in here will be fired on mouseenter
   * This is similar to the hover event
   */
}

mouseleave

.action {
  transition: all 0;
  transition-delay: 0;
}
.action:hover {
  transition-delay: 999999999999999999999999s;
  /*
   * actions in here will be fired on mouseleave
   * This is similar to the hover event
   */
}

click

input[type="radio"]:checked + label{
  /*
   * actions in here will be fired on click
   */
}
/*
 * abstraction
 */
._2:checked ~ .app ._2 {
  /*
   * actions in here will be fired on click
   */
}

A pure CSS drawing app

I created a pure CSS drawing app making use of a few of these events. You can see it here.

The basic app is built on radio buttons (click event) and transition-delay (mouseenter & mouseleave).

What is actually happening in this app is the following:

1. if we select a color we are actually checking a radio button
   • all radio buttons share the same name attribute
   • radio buttons toggle each other
2. while a color is selected we set the background-color of a pixel
3. we are only changing the background-color on mouseenter (not on mouseleave)

More examples

• slot machine
• memory game
• color picker
• scrollTo
• quiz
• advanced click