CSS Tricks

DRAFT This chapter is a work in progress.

CSS is used for all kinds of special effects that make web pages look good. In this section we will investigate some of them.

Hover

  • Add link with a :hover pseudo-class to the example above.
  • Add an h2 with the title more info. Underneath the h2 add a main container with a paragraph. The details element should be initially hidden and only appear when you hover the cursor over the h2. Hint: the ~ character allows you to write a selector that matches a sibling.

The details tag is a semantic tag that has some very nice properties similar to our experiment above.

Animation

Using the @keyframes keyword we can create an animation and then apply that animation to other css elements. Check out the following example that animates the background color. With keyframes we can specify a starting and and ending condition using from and to or we can specify multiple points along the animation using xx%.

Animation should work as shown in all modern browsers. Safari version 8 and earlier will require the -webkit- prefix to be added.

Experiment with the following:

  • animation-delay: 2s;
  • animation-iteration-count: infinite;
  • animation-direction: alternate;
@keyframes spin {
    from {
        transform: rotate(0deg);
    } to {
        transform: rotate(360deg);
    }
}
@keyframes moveit {
    from {
        top: 0px;
        left: 0px;
    }
    to {
        top: 300px;
        left: 300px;
    }
}
  • Add an image to the picture and make it spin infinitely.
  • try creating a scale animation
  • Use animation-fill-mode: forwards; to keep the element at the ending position.
Next Section - The Dropdown Menu Project