Flashback to January 2011!
IEEE-754 sighting

teaching machines

CS 318 Lab 21 – Iframes and Transitions

Dear students,

Today we explore transitions to add a little life to our webpages. We will focus on the mechanics of the CSS transitions. I leave it up to your good judgement to not go overboard or favor vanity over content. We’ll do a little example of making some list elements pop out when hovered over.

We start with a list:

<ul>
  <li>one</li> 
  <li>two</li> 
  <li>three</li> 
  <li>four</li> 
</ul>

Let’s add some background color to each item:

li {
  background-color: blue;
  color: white;
}

Let’s remove the bullets, shrink the size a bit, and decrease the padding:

ul {
  list-style: none;
  width: 200px;
  padding-left: 0;
}

Let’s space things out a bit:

li {
  ...
  margin: 10px auto;
  padding: 20px;
}

Now let’s accentuate hovered list items:

li:hover {
  background-color: purple;
  transform: translate(20px, 0);
}

This is where transitions come in. In their absence, we move from hovered to non-hovered styles instantaneously. We want to smoothly traverse between the two states. We need to specify a few CSS properties to enable that blending:

Let’s make the list items transition between their left and background-color properties over half a second. We’ll start and end the transition slowly:

li {
  ...
  transition-property: transform background-color;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
}

The first lab exercise today has you doing some embedding of content from other sites. The second uses transitions to make a relaxing(?) flower garden.

Here’s your TODO list:

See you next time!

Sincerely,

Lab

First create a lab21 directory. Add a partners.html and include your first names and last initials.

Embeds

Create in embeds.html a web that embeds content from other sites.

Observe the following requirements:

Flowers

Create in flowers.html an interactive floral arrangement that uses CSS transforms and transitions to ensnare the viewer in a state of blissful bee-ness:

Observe these requirements:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Past Posts

Categories