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:

  • transition-property: the names of the CSS properting that we want to blend
  • transition-duration: the time it takes for the transition to finish
  • transition-timing-function: the “directness” of the 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:

  • There’s no quarter sheet for next time. Make sure your prototype is ready for peer review on Monday! Make sure you can see it through GitHub Pages. The url will be something like http://YOURUSERNAME.github.io/cs318/prototype1.
  • You should have received a link to take quiz 4, which must be completed by April 27 for credit.

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:

  • Embed a tweet from Twitter. Discovering how this is done is part of the exercise.
  • Embed an interactive 3D scene from Sketchfab.
  • Embed a post from Imgur.
  • Embed content from another site of your choosing.
  • Center all embedded frames within your page. Horizontal centering is generally accomplished in one of two ways. If the element is a block, make sure its width is set to something less than the full page and set its left and right margins to auto. If the element is an inline element, set its parent’s text-align property. When using other people’s content, it can be tricky to figure out whether their element is a block or inline. In such cases, wrap up their content inside a div of your own.

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:

  • Like always, set all elements’ box-sizing property to border-box.
  • Create a div with ID flowerbed.
  • Download and unzip these flower icons, courtesy of Freepik. The license of these images require attribution, which we will attend to later.
  • Add sixteen img elements for each of these images. So that the icons form a perfect grid, use CSS to ensure that each image displays as a square 129×129 pixels. Some of the files do not have that exact resolution. Add a 10-pixel margin all around to space them apart a bit.
  • To get the images to form a grid with the least amount of HTML markup, have them all float left. To break them up into rows, we need some of the images to clear the ones previous. However, don’t create special IDs or a special class for this. Use an nth-child selector. Recall that one can match a cyclic pattern using a form of this selector:
    ...:nth-child(An+B) {
      ...
    }
    
    A represents the length of the cycle’s period. For example, 3n would match children 0 (which isn’t valid), 3, 6, 9, 12, and so on. B lets us tack on an offset. 3n+2 would match children 2, 5, 8, 11, 14, and so on. In our case, we want to match the images 5, 9, and 13 and have those clear their predecessor floats. It’s okay if we also match image 1—it won’t have any predecessors to clear. What period and offset do we want to use here?
  • When an image is not hovered but another image is, reduce its opacity to 10%. It might be tempting to use the sibling selector (~) for this. Go ahead and watch it fail:
    img:hover ~ img {
      ...
    }
    
    As you should see, the sibling selector only matches images after the hovered image. It’s really a subsequent sibling selector. What we can do instead is use a descendant selector. Select all images that are children of a hovered flowerbed and reduce their opacity to 10%.
  • But we want the image that is hovered over to stay at its full opacity. Add a rule for this. If this new rule doesn’t achieve the result you expect, call over your instructor or TA for a brief lesson in CSS specificity.
  • Augment your hovered image rule to scale the image 1.5 times its normal size and rotate it 180 degrees.
  • Set the image to transition smoothly between its hover and non-hovered opacity and transform properties. Ease the transition in and out over a span of 2 seconds.
  • In your testing, you should find that sometimes the non-hovered flowers appear on top of the hovered one. If you don’t see this, increase the non-hovered opacity temporarily so that you can see it. This happens because the browser renders subsequent elements on top of previous elements. We can force a different ordering using the z-index property. Elements with a larger z-index appear on top of those with a smaller z-index. So, set the z-index of your images in their hovered and non-hovered states accordingly. Add z-index to your list of transition properties. For z-index to have any effect, the element must not be statically positioned. Use relative positioning instead.
  • Center flowerbed within the webpage. The easiest way to do this is to use absolute positioning. Anchor its top-left corner to 50% point of its parent. Then transform it up and left -50% to compensate.
  • The license of the icons requires attribution. Add the message “Icons courtesy of Freepik” and have it link to their website: http://www.freepik.com. Anchor the link to the bottom-right of the page.

Comments

Leave a Reply

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