Advanced CSS and Social Media
- Class A CSS3
- Class B Social Media
- Image slider/rotator on a web page. Send me the url.
- Complete the CSS3 in class exercises and submit a url.
- Integrate a Facebook like feature and a Twitter feed into your site.
2D Transitions and Transforms- Lecture and Exercise Resources
- Note: In class assignments will be provided in print
- Read CSS3 class lecture
- Check out CSS Opacity Transition example 1. View and sample code.
- Check out CSS Opacity Transition example 2. View and sample code.
- Check out CSS 3 Transition example. View and sample code.
- Check out CSS3 A nav bar with transitioning opacity and position. View and sample code.
- Check out CSS3 transform example.View and sample code.
- Use these icons or create your own for the 2nd part of the handout, in-class CSS3 assignment.
- Use this cute van image in the third in-class assignment.
- Check out this nav bar that uses css3 transitions
3D Examples and Resources
- Read 3D class lecture
- Use Example 1
- Use Example 1 with hover
- Use Example 2Showing use of perspective and influence of a parent on vanishing point
- Use Rotate and translate
- Use Translate with scale on hover
- Use Watch Out!!! Note lower perspective.
- Use The Flip
- Use Nav with cube rotate on hover
Add Favicons to your sites
Add CSS3 to your sites
- Great CSS3 opacity transition examples
- Readborder radius by w3schools
- ReadBorder-radius by css3.info
- UseUltimate CSS Gradient Generator by ColorZilla
- ReadCSS box shadow property by w3schools
- ReadCSS Box Shadow generator and expained! by css3gen
- Readopacity / transparency by w3schools
- Read Image Sprites by w3schools
- Try out these CSS 3 Box Shadowsby viget.com
- Check out these 22 advanced CSS text effects
- Check out Big Panda's Advanced CSS shadows
- Check out How to create slick effects with CSS3
- Social Media
- Read Facebook for Websites by Facebook
- Read how to make facebook like box responsive
- Read how to add a google plus button to your webpage
- Read how to addEmbed a twitter feed into your site
- Example of a live Twitter Feed Tweets by @timoreilly