September’s Best Resources for CSS3
Cascading Style Sheets Level 3 or CSS3 for short is the next stage CSS. CSS3 can really improve efficiency, both in your development time and page performance. The latest versions of the modern web browsers such as Chrome, Firefox, Safari, and Opera support CSS3.
Microsoft has released recently the first beta version of Internet Explorer 9 (a WinXp version is missing though); Louis Lazaris has put together a nice list with CSS3 properties support in IE9.
Here are the best CSS3 coding techniques and tutorials of September 2010, 33 fresh resources to help keeping up with new technologies.
Enjoy this list of CSS3 demos and experiments, don’t forget to check out the previous CSS3 resources round-ups in case that you missed any.
A sleek image gallery that takes advantage of CSS3 animation, shadows, and the “transform” property to instantly add a smooth hover effect to its images, whereby the image enlarges and moves closer to the user.
Learn how to use CSS3 to display some extra information when hovering an image. This effect can be used for displaying the price of any product in a catalogue or personal details etc.
Learn how to use CSS3 transitions to create nice, animated, semitransparent image captions. Full example and code download included.
This effect can be used by both WordPress and Blogger users. The transition effect of the caption only visible in Webkit browser like Google Chrome.
Using CSS3, we can create beautiful fast loading thumbnail gallery which shows the bigger image on hovering.
SVG can be applied as a mask by using properties mask-image (background) or mask-box-image (border-image). In this demo, I use -webkit-mask-box-image so the mask image (SVG) stretches to fit on avatar images in various sizes.
Learn how to make an menu with rounded corners, a background gradient and a simple hover effect using only CSS3.
There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. And voila.. here they are, the BonBon Buttons.
This is a collection of buttons that show what is possible using CSS3 and other advanced techniques, while maintaining the simplest possible markup. These buttons look best in Chrome and Safari.
This tutorial demonstrates a relatively simple application of CSS3, creating a text-based, “jelly bean” button that will demonstrate the promise – and the pitfalls – of using an emerging website design technology.
Learn how to make a social sharing tab array powered by CSS3, similar to that of the sexy bookmarks WP plugin, with a nice transitional movement.
Hover over the ‘network’ graphic to reveal a circle of networking icons which, when hovered increase in size slightly. Using CSS3 for Safari, Chrome, Opera and Firefox v4 beta the icons will fade into view and the enlarging/shrinking of the icons will be smooth.
Multiple background images are mostly proposed as a way of implementing the ‘sliding door‘ technique for elastic or flexible layouts without the need for additional markup.
One of the defining features of print design is the ubiquity of multi-column layouts. And there are a couple of good reasons why this is the case. Read this article for more details.
One CSS3 property that’s been overlooked is the border-image property. The irony here is that what makes this property so useful, is exactly what makes it extremely confusing.
“:traget” One of the new pseudo classes implemented in CSSS 3. Combined with CSS animation. It is very cool and easy to feature to implement.
CSS3’s basic UI module provides several pseudo-classes to help us style those validation states and change a field’s appearance based on the user’s actions. Let’s take a look at combining the two to create a CSS-based form validator that has fairly broad browser support.
Whilst this CSS3 declaration might not be crucial to your project or design and yes it is not supported by all browsers, but it is a fantastic effect that really takes your design one step further.
Fonts on the web are essentially vector based graphics. Learn how to draw a stroke around the individual characters (works in WebKit).
This is an article written in french. Use Google’s service to translate the page to your preferred language.
This tutorial is based on a simple animated experiment that showcases just one of the amazing things you can create using CSS. No images and no scripting were used; everything’s done using HTML and CSS.
Guess the Stars is a little game demo using some 3D perspective, animation and reflections. They are just flat images from IMDb that get rendered with CSS3 into DVD cases. Unfortunately it only works in Safari.
Experiment on how to create an animated pure css3 spiral.
CSS3 title Ribbon. Works in IE9, FF4, C6, O10.
The pseudo :after selector is used to draw a box rotated 45º inside a box that has it’s clip property set to only show 50% of the box, so all you see is the side of a rotated box(aka a triangle).
This is an experiment on how to make some pure CSS social media icons. Is not recommended to use them in a live project as a large portion of your visitors would not see the full effect.
No images, no canvas, just some CSS. Best viewed in a modern browser.