October’s Best Resources for CSS3

Fresh css3 resources October 2010
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 October 2010, 29 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 big thank you to all our sponsor who make running this blog possible: DisciPlanner.


1. How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.

CSS3 Mega Drop-Down Menu

2. How To Create A Simple Drop Down Menu With CSS3

In this tutorial, you will learn how to create a beautiful drop down menu using CSS3. We are going to create the menu without using Javascript, only CSS properties.

Create A Simple Drop Down Menu With CSS3

3. Pure CSS3 Animated Dropdown Navigation

One common technique that is completely doable with CSS, but which still remains in the realm of jQuery and other Javascript techniques, is animated dropdown menus.

Pure CSS3 Animated Dropdown Navigation

4. Horizontal drop-down menu using CSS3

This tutorial will show you how to create a clean CSS navigation menu with a professional look.

Horizontal drop-down menu using CSS3

5. Pure CSS3 : Apple.com Navigation

Learn how to employ the latest web standards to fully recreate the famous Apple.com navigation in pure CSS.

Pure CSS3 : Apple.com Navigation

6. How to Make a CSS3 Floating Follow Tab with Rollover Effects

Learn how to use CSS3 to create a nice, translucent Newsletter/RSS/Twitter/Facebook tab with rounded corners, gradient background and drop shadow. Full example and code download included.

Make a CSS3 Floating Follow Tab with Rollover Effects

7. Display social icons in a beautiful way using CSS3

A tutorial that explains how to display social media icons in a beautiful way using CSS3 and jQuery

Display social icons in a beautiful way using CSS3

8. CSS3 Animated Bubble Buttons

Learn how to create a useful set of animated buttons with the power of CSS3′s multiple backgrounds and animations. With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary.

CSS3 Animated Bubble Buttons

9. Multi-Line Buttons With Compass, Sass, and CSS3

No image was used for the buttons in the image bellow. CSS3 makes it possible to achieve this effect without images. And Compass makes it easy to use these advanced CSS3 features in a concise way that works across modern browsers.

Multi-Line Buttons With Compass, Sass, and CSS3

10. Zero to Fancy Buttons

Here’s a quick screencast demonstrating how you can use fancy buttons to easily generate beautiful flexible CSS3 buttons.

Zero to Fancy Buttons

11. Shadow Boxing: Image-free, CSS3, Glossy Buttons

Lately it seems that CSS3 gradients are becoming increasingly popular as a styling option for buttons. They’re easily configurable without needing to leave your CSS coder, and they effortlessly stretch and resize as your button area does.

Shadow Boxing: Image-free, CSS3, Glossy Buttons

12. Primate Labs Download Button Css3 For Dribbble

Primate Labs Download Button Css3 For Dribbble

13. CSS3 Submit Button

This is a tutorial to create a look-alike to IE’s native submit button.

CSS3 Submit Button IE6 style

14. Customizing web forms with CSS3 and WebKit

Learn how to use CSS3 to make form inputs that look and feel the same in all WebKit browsers across platforms.

Customizing web forms with CSS3 and WebKit

15. Sexy CSS3 Tooltips

When building a website, there are a number of positions or functions we have to use the tooltip captions or instructions for users to use, usually we tend to use javascript to create the tool tip, there is a for example, just use css and some of the CSS3 properties to create the tooltip are great.

Sexy CSS3 Tooltips

16. Reveal Extra Content with CSS3 Transitions

Reveal Extra Content with CSS3 Transitions

17. Making Labels with CSS3

Learn how to make flag like labels to represent the range of social networks using CSS3.

MAKING LABELS WITH CSS3

18. CSS3 box-shadow rolled corners

Rolled corners are popular. Dimension is in. The CSS3 box-shadow property isn’t entirely flexible enough to really create the effect (masked shadows please!) but with a couple layers it can be approximated in some browsers within limits.

CSS3 box-shadow rolled corners

19. An (Almost) Complete Guide to CSS3 Borders & Backgrounds

Borders and backgrounds are two of the most essential CSS elements. They are part of the groundwork that allow us to create aesthetically rich user interfaces, and help make the web a beautiful place to be.

An (Almost) Complete Guide to CSS3 Borders & Backgrounds

20. Fun with -webkit-background-clip and @font-face

Learn how to recreateone of the slides from the CSSReset’s homepage in CSS3, with a full breakdown.

Fun with -webkit-background-clip and @font-face

21. CSS3 attributes used to create gallery

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.

CSS3 attributes used to create gallery

22. Pure CSS3 Sliding Image Gallery

This is a cool little experiment. It’s a sliding image gallery (one that would normally require jQuery), but this one uses only CSS3. It currently really only works in Safari or Chrome, because Firefox obviously isn’t WebKit based, so it doesn’t understand -webkit-animation.

Pure CSS3 Sliding Image Gallery

23. Recreating Tumblr’s “Updating…” page using pure CSS3 (with fallbacks for older browsers)

Using CSS3 could have a big effect on bandwidth usage. Background images used purely for design are all costly, bandwidth consuming. If we’d use plain CSS to handle all the graphics, we could save at least a few KB per page.

Recreating Tumblr’s Updating… page using pure CSS3

24. How to Create a Twitter Logo in Pure CSS3

In this tutorial we will use mostly the border-radius property in order to design the Twitter’s “T” in pure CSS! We won’t use pics or JavaScript. Only pure, beautiful, CSS3 and a bit of HTML markup!

How to Create a Twitter Logo in Pure CSS3

25. Replicate Facebook’s logo without graphics using CSS3

If you consider that the graphics are about 50kb in size and the HTML + CSS is only 6kb, it might be worthwhile to use CSS logo’s almost. ;-)

Works in: Safari, Chrome, Firefox

Replicate Facebook's logo without graphics using CSS3

26. Css3 Lighting

Playing around with CSS3 box-shadow inset property to simulate lighting.

Css3 Lighting

27. Create a Bouncing Heart With CSS

Here’s a quick look at how the transform property can produce a bounce effect, and how it can be used to create a super cool bouncing heart.

Create a Bouncing Heart With CSS

28. Wonder Webkit

A tribute to the awesome wonder-wall by tha.ltd. And a demo of WebKitCSSMatrix. The wonder-wall effect is inspired by A tribute to the awesome wonder-wall by tha.ltd.

Wonder Wall Webkit CSS3

29. How I Learned to Walk

Using only CSS3 and very basic HTML, Andrew Hoyer constructed a simple man and made it walk. Works only in webkit browsers (beautifully in mobile safari).

How I Learned to Walk - CSS3 experiment


Related Posts:





freepsdtemplate.com - daily updated PSD resources for webdesigners