Today’s goals:

• Review CSS animations
• Learn about 2 new CSS properties: border-radius and filter

 Today’s featured website:

• http://makewordart.com/– This kind of design tool is something I grew up with.

 Optional:

• Brighten up your computer desktop with free wallpaper for January from Smashing Magazine

 CSS Animations Review

• A CSS animation is basically when an element changes styles over a set period of time.
• We learned before vacation that the @keyframes rule and the animation property are used together to create animations with CSS.
• We also learned how to add Animate.css to a webpage and animate elements by adding special animate classes.
• Let’s open up our Animate.css and CSS animations practice pages to review the code and preview them in the browser.

 CSS Border-Radius Property

• The border-radius property lets you give elements rounded corners.
• Let’s play with the values in this example to see what smaller and larger numbers do to the corners.
• Download this practice code. Copy and paste into Notepad++ and save it as cssimages.html
• Questions: Can you have more than one value for this property? What does a value of 50% do?
• Add animation! To the .img3 class let’s add animation-name: borderchange; animation-duration: 5s; and animation-iteration-count: infinite;. Then make an @keyframes rule called borderchange with 0% {border-radius: 10%;} 50% {border-radius: 50%;} and 100% {border-radius: 0%;}

 CSS Filter Property

• The filter property lets you add similar effects to elements (often images) that were once only accomplished with image editors like Photoshop.
• Let’s have a look at the different values here.
• Let’s create a class in our style sheet called .img4 so we can practice applying the filter property to one of our mug photos.
• Questions: Is the filter property “animatable?” (Can we animate it? How?)
• Experiment with the different filter property values and change up the image. Use this page as a visual guide and this page (under Filter Functions) to see what values to use and what they do (degrees, percentages, pixels, etc.).