The final session we attended at the Make Web Not War conference yesterday, was called “Cascading” into CSS3: Exploring the features of CSS3 and the use of jQuery as a substitute. For this session, speaker Nathaniel Bagnell explored the features of CSS3.
Speaker: Nathaniel Bagnell
“Cascading” into CSS3: Exploring the features of CSS3 and the use of jQuery as a substitute
“Cascading” into CSS3 will highlight the exciting capabilities of the upcoming CSS specification, CSS3. We’ll get a quick introduction on CSS and an in-depth look at what CSS3 has to offer. After the ice-breaking, we’ll dive into some demos and examples of common tasks faced by web developers and see how CSS3 will help make these tasks easier. As well, for those who can’t wait for tomorrow’s technology, we’ll examine some jQuery workarounds to replicate some useful CSS3 functionality, today.
Great session given by Nathaniel Bagnell, one of my favorite speakers at Make Web Not War. He went through the most exciting features to come with CSS3 and gave solutions in JQuery for developers who couldn’t wait to try them out.
For my part, I will be patient and wait for the real CSS3 attributes to be made available but it’s a great option to have some fun on a personal website.
Here’s my recap of the most interesting facts and features mentioned during the session:
CSS3 features have been broken into modules. Browser developers can implement CSS3 piece by piece which helps the whole process.
There are approximately 41 modules and each module is logically organized, like anything to do with backgrounds are in the Background Module.
Each module has to reach Recommendation (REC) Status to be published.
Chrome is the leader in supporting CSS3 and IE is the last. Chrome, Safari, Firefox, Opera, IE
JQuery is used to replicate CSS3 features that may not be supported in some of your target audience.
Great features to look forward to as a Web Designer:
- Rounded corners with border-radius: 20px; and you can also control specific corners
- Box shadow effect with box-shadow: 5px (horizontal) 5px (vertical) 10px (blur) #000 (color); You can also have multiple shadow sets using the virgule to follow horizontal and vertical value
- Text shadow with text-shadow: 3px 3px 6px #fff;
- Custom fonts with CSS3 @font-face with font-family name and src for the file. Font can then implemented as a regular Web font
- Multiple backgrounds with background: top, right, bottom, left; color or images!
- Columns with column-count:2; column-gap:15px;