2010年50个顶级CSS3教程

几乎所有CSS3现代浏览器都支持。在这篇帖子中,我们提出50个顶级css3教程视觉效果布局和网页形式设计可以帮助你找到解决问题的你在对付或必须处理的问题提出了今后研究的方向。

1. Pretty CSS3 buttons

We want to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. A button that is scaleable meaning that we can make it a variety of sizes and colours with ease.

2. Creating Dynamic Buttons With CSS3

Creating buttons with CSS becomes a lot more comfortable. The following example demonstrates how to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.

3. How to Create Inset Typography with CSS3

In this tutorial, we’ll create inset type, a popular text treatment, using CSS. If you follow Six Revisions closely, you’re probably thinking: “Jacob already wrote a Photoshop tutorial on how to do that.”

4. Use CSS3 to Create a Dynamic Stack of Index Cards

We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

5. Box-shadow

The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

6. Recreating the OS X Dock

We take a basic list of links and turn them into an awesome OS X dock of icons.

7. Awesome Overlays

These overlays use a number of new CSS properties, some of which are simple like
border-radius and using RGBa colors.

8. CSS3 Background-Clip & @Font-Face

With no clear purpose or plan, I’ve resolved to experiment with CSS3 on a regular basis. Some of these note-posts may be more useful and practical than others, but the only way to know for sure is to learn by doing.

9. CSS3 Background-Clip: Text

I had a lot of fun dabbling in CSS3 on a recent post, but had to hold back a bit to keep things looking presentable in most browsers. To carry out the DIN typeface I chose into the header, I used a transparent png with the letters knocked out to achieve that subtle yellow to blue fade animation.

10. How To Design A Sexy Button Using CSS

11. Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3

This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of us. The reason I have this custom dialog box is to overcome the inconsistencies across different browsers. It uses CSS3 to style everything and it looks really nice!

12. BounceBox Notification Plugin With jQuery & CSS3

Earlier this week, while working on ZineScripts‘ coupon code system, I found the need to be able to dynamically create and present a message box to Zine’s visitors. The usual routine would include digging through jQuery’s plugin repository and ending up with using a lightbox alternative, but I decided to take the time and build an one-off notification solution, which I am sharing with you today.

13. Create a Vibrant Digital Poster Design with CSS3

CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.

14. CSS3 Box-Shadow with Inset Values – The Aqua Button ReReVisited!

This is my third article on CSS3 No Image Aqua Buttons.

15. Roll Your Own Google Buttons

Google has a new focus on webkit-specific properties thanks to their new Chrome browser, which uses a branch of the same rendering engine Safari uses. This has actually allowed them to target the Google homepage to the webkit engine, probably after some sort of browser detection.

16. How To Create Depth And Nice 3D Ribbons Only Using CSS3

In this last period on PV.M Garage we have described many trends of the modern Web Design and many techniques for creating stunning and impressive web sites.

17. Fun with CSS3 and mootools

These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.

18. CSS3 Gradient Buttons

Today I’m going to show you how to put the CSS gradient feature in a good practical use.

19. CSS3 Gradient Generator

20. Cool Sprites – Free overlapped CSS menu using CSS Sprites

21. Get Started With CSS 3

22. Border-image: using images for your border

Another exciting new border feature of CSS3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image.

23. Halftone Navigation Menu With jQuery & CSS3

Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

24. Coding a Rotating Image Slideshow w/ CSS3 and jQuery

Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.

25. CSS3 Dropdown Menu

26. Sweet AJAX Tabs With jQuery 1.4 & CSS3

Today we are making an AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery, so be sure to download the zip archive from the button above and continue with step one.

27. Creating a Realistic Looking Button with CSS3

I had previously created the Cadmus “post” button in Photoshop and it was essentially three images for the different states. I wanted to use this style for all our buttons, but doing it with single images is not a good idea. So I set about creating the same style of the buttons with CSS3.

28. Making Better Select Elements with jQuery and CSS3

This is why, today we are building a script that is going to take an ordinary select element, and replace it with a better looking, markup powered version, while keeping all the functionality intact.

29. Making a Sleek Feed Widget With YQL, jQuery & CSS3

Today we are making a sleek feed widget, that will fetch any feed and display it in your blog sidebar. You can set it up to show the latest posts from the different categories of your blog, your latest stumbles, or even people mentioning you on twitter.

30. Making a Photoshoot Effect With jQuery & CSS

We are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel. Using this plug-in, we give visitors the ability to take shots of the background image.

31. CSS3 Animated Bubble Buttons

This week we are creating 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. Four color themes and three sizes are also available by assigning additional class names.

32. CSS3 Minimalistic Navigation Menu

So today we are making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.

33. 3d animation using pure CSS3

The perspective property is what we need to create the 3d effect. Using transform and transition, we can create 3d animation using pure CSS3.

34. Beautiful Photo Stack Gallery with jQuery and CSS3

In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.

35. Contextual Slideout Tips With jQuery & CSS3

Knowing the importance of HTML standards, we are making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.

36. HTML5 and CSS3 Without Guilt

Not every HTML5 or CSS3 feature has widespread browser support, naturally. To compensate for this, enterprising developers have created a number of tools to let you use these technologies today, without leaving behind users who still live in the stone age.

37. Display social icons in a beautiful way using CSS3

I wanted to take this concept and bring it to the next level using CSS3 transitions. The goal was to slowly fade-in and fade-out the opacity changing, and animate the position of the tooltip a little bit. With that in mind, I was able to create a beautiful social media icons display using CSS3.

38. 10 CSS3 Properties you Need to be Familiar with

The key is to first determine whether or not you’re okay with a slightly different presentation from browser to browser. Are you okay with, say, IE displaying 90 degree corners, rather than slick rounded ones? That’s up to you to decide. However, always remember that websites needn’t look identical in every browser. At the conclusion of this article, we’ll work on a fun final project.

39. Animated wicked CSS3 3d bar chart

Do you remember the Wicked CSS3 3d bar chart that I placed online a couple of weeks ago? Paul Irish left a comment, requesting for an example with transitions. My reply was that I was already working on that, and today I’m proud to release the animated wicked CSS3 3d bar chart.

<