- Showing – hiding content
- Using the object-fit and object-position properties
- Creating flexible color gradients
- Options using multiple columns with heading
Resources for Useful CSS3 Tutorialswritten by Ken Hattori
Every developer knows the importance of learning CSS as well as using it effectively. CSS3 is such a large expansion of the existing coding language, that I’ve compiled a list of the most useful tutorials that a developer would need to use the language successfully.
Reference Material Resources:
CSS3 Reference Materials
This site has over twenty pages describing the new CSS3 properties. One reference page lists all CCS3 properties grouped by their CSS modules, and another lists all the CSS3 properties alphabetically in a table and identifies which major browsers currently supports each CSS3 property.
Dedicated CSS3 site
This site is dedicated to CSS3 and contains many instructional blog posts along with a page showing the status of each CSS3 module as it progresses toward W3C recommendation. It also contains a page which allows users to preview various CSS3 features that have been implemented in browsers.
CSS3 PDF Reference
The 5-page pdf reference file on this link lists all CSS3 properties and selector types with the expected named values and accepted value types.
Helpful Tutorials and Articles
12-Steps to Create-a-Blog
This link is a practical, one-page, 12-step tutorial that describes how to build the main page of a blog with six major elements using HTML 5 and CSS3 techniques. Among the interesting concepts demonstrated is a simple way for CSS3 to cause elements of the blog display to behave like table cells without using the html table element to markup the layout.
Getting Acquainted with CSS3
This page starts with basic markup and offers 5 techniques in working with objects to build up familiarity with CSS3.
5 Largely Implemented Properties
The focus of this link is on five new CSS3 properties that have been mostly implemented in the major browsers. It encourages developers to use CSS3 in well-defined or non-critical places.
11 Techniques Made Simple With CSS3
Browser Developer Articles
This page on the developer site for the Opera browser lists over 45 of their CSS articles; many of them are focused on new CSS3 functionality. Their articles are often in-depth and quite detailed. Some of the specific features they describe are on the following links:
8 Practical Projects
This site has eight CSS3 tutorial pages, which have descriptions and code for making speech bubbles, creating ribbons, shadowing text or boxes, and ,pre.
Another 8 CSS3 Projects
Again, on this site are eight CSS3 tutorials with other practical code examples of features such as rotations, transitions, and animations.
Speeding Page Load and More
This link has information on how using CSS3 may speed up page load by reducing the need for images. This page also contains links to other CSS3 tutorial pages offered on this site.
Vertical Sliding Panel with Detailed Code and Demos
Included on this page is the HTML markup, all of the CSS, and some simple javascipt code to toggle the panel open or closed position. Also, there are operational demos and optional tweeks. Here is another detailed article on this site:
Videos with Membership
6 CSS3 Instructional Pages
This link is the first of six pages on this site providing instruction on using specific CSS3 features such as multiple columns and new ways to control the background element.
Extensive Technical Details on CSS3 Selectors
Included are many syntax options, attributes, and various pseudo-classes.
7 Various CSS3 Instruction Pages
There are seven CSS3 tutorial pages on this site. These pages include an introduction to CSS3 and a description of how to flow an element’s content into multiple-columns.
Super Awesome Buttons with CSS3 and RGBA
This page is focused on the properties for scaling, shadowing, sizing, and coloring buttons with CSS3.
The information and coded examples in the above links should enable developers to learn CSS3 quickly and to become comfortable using its new properties. While CSS3 proceeds toward W3C recommendation, it may be possible to take advantage of some CSS3 features and properties to simplify pages or reduce load times.