Session 1: Today’s inclass demonstrations will involve typical uses for CSS3 transitions and animations. CSS3 transitions and animations are an easy and generally accessible way to integrate motion into your designs. Most transitions are initiated via the hover pseudo class. Animations begin when the page loads. Uses include: navigation, thumbnail fades, image captions, sliders, etc.
Relevant links:
CSS3 Transitions of W3Schools
CSS3 Transition Tutorial
Lea Verou’s Prefix Free Widget
Trigger CSS3 Transitions on Click
Session 2: Today we will be critiquing your design mockups. Please be prepared to show your mockups to your assigned group members. I will visit each group and provide additional feedback.
Final Web Application Milestone #1
Due: Week 10, Session 1 (before class starts)
1. Be prepared to show your template work-in-progress
2. Demonstrate navigation with both primary and secondary items
3. Illustrate your ability with fluid layout, floats, asides, and typesetting
intro to CSS3 transitions and timing
http://www.css3.info/preview/css3-transitions/
animating simple shapes
http://learn.shayhowe.com/advanced-html-css/transitions-animations/
Portfolio image transitions and displays
http://owlgraphic.com/owlcarousel/demos/transitions.html
smashing magazine again, good article
http://www.smashingmagazine.com/2013/04/26/css3-transitions-thank-god-specification/
http://ianlunn.github.io/Hover/
This first website is a compilation of css hover effects that are ready to use.
http://learn.shayhowe.com/advanced-html-css/transitions-animations/
The second website is a tutorial on how to incorporate css transitions and how to code them. It also gives information about the different properties used for each transition and it explains there functions.
http://www.bitrebels.com/technology/8-reasons-why-people-leave-your-website-infographic/
Good infographic on why people leave your website
http://cssmenumaker.com/blog/free-css-sidebar-menu-navigations
This website has different types of sidebars for CSS. There are plain sidebars and ones that have a drop down menu with it. If you click on the link it will bring you to another page that has the zip file. The zip file contains the html and CSS file.
http://maxdesign.com.au/css-layouts/
This website has different types of layouts for CSS. The layouts can be basic with just text or have a picture here and there and other of the layouts just contain pictures. You can view the different layouts and download the zip files which gives you the html and CSS files.
http://www.creativebloq.com/web-design/examples-css-912710
This website shows 49 examples of CSS. Each has a slightly different style but a lot of them have a main picture or introduction that does not have a lot of text. It shows you a picture of main page for each website and you can click on the name for each one to go to their website.
Awesome CSS generator, that will give you the basic CSS for the various effects, including transitions.
http://css3generator.com/
Blog that explains the CSS of transition, and animation effects.
http://css3.bradshawenterprises.com/
Another CSS3 transition generator, that shows you what it is going to look like.
http://css3gen.com/css-transition/