2011年35个精彩的HTML5和CSS3教程
1. The Apple.com navigation menu created using only CSS3
A while ago (I think it was around the release of the iPad), the Apple.com website got a new navigation menu on the top of the page. This menu bar was a lot darker than the previous, grey version, but looks just as great. One thing which I noticed about the navigation, is that the buttons are created out of images. That’s the moment I thought we could do better, using some nifty CSS3 techniques. So today, I present you the Apple.com navigation menu created using only CSS3.
Hi there guys 
. Today I’ve made for you this sleek-looking CSS3 cross-browser button class. You can try it above (hover & click the buttons).
3. DIVs with Rounded Corners in CSS3
The border-radius CSS property can be used to render rounded corners on your DIV boxes. You can even customize the x and y-axis of each individual corner. Here are some self-explanatory examples on how to use the shortcode property and how to define each corner with border-*-*-radius.
4. Animated CSS3 helix using 3d transforms
One of the most popular articles on Marcofolio.net in 2010 was the 3d animation using pure CSS3. In my opinion, it was one of the best articles for myself as well, since I learned some pretty neat stuff about CSS3 and 3d capibilities.
5. Opacity with CSS3 RGBa property
The CSS3′s RGBa property allows to set not only the RGB color but also a level of opacity. The A stands for Alpha, which refers to the opacity level of the color.
6. Clean and Stylish CSS3 Form
This article is about creating a form using some of CSS3 properties. You can easily customize the style.
7. 5 Useful CSS3 Properties You Need to Know
I have shared a comprehensive knowledge about CSS Rules and CSS Browser Specific Properties. Now, i am going to write tutorial about amazing, awesome and new CSS3 properties. I know, most of them are still vendor specific but their usage can enhance the beauty and usability of your projects. It is also a good reason to learn the future of CSS3.
8. Tutorial – CSS3 Buttons with no images
This tutorial covers the creation of CSS buttons with minimal markup and absolutely no images.
HTML5 is the latest revision of HTML, with the goal to make it easier to develop web applications. HTML5 has much simple syntax compared to HTML 4 and it offers lots of new features. This articles gives introduction to HTML5.
10. Pure CSS3 Buttons with pressed effect and gradient background
In this tutorial we will create CSS Buttons with pressed, hover effect and gradient background without using any images at all! We will create the gradient colors effect using the gradient feature from WebKit, and also since Firefox 3.6+ we can create gradient using -moz-linear-gradient property.
11. CSS Rounded Corners Without Images
Rounded corner effects to the blocks in HTML structure enhance the beauty of blogs and we have achieved this effect by using corner images in the past, but the CSS3 border-radius property allows web developers to easily utilize rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.
12. CSS3 Submit Button: 5 Professional Examples to Learn
CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amazing stuff with its cool new features.
13. CSS3: box-shadow and inset-shadow
With the box-shadow property of CSS3, we can add shadows to the different elements on web page, such as div, span or images.
14. Making a CSS3 Animated Menu
In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template. We will be using some neat features such as the :target pseudo selector and :after elements.
16. Fun with CSS3 and Border-Radius
CSS3 along with HTML5 are both already partially implemented in 4 out of the 5 major web browsers. IE9 ‘may’ include this but since it is Microsoft I am not holding my breath on that one. Just how awesome is CSS3??
17. 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.
18. Dark Menu: Pure CSS3 Two Level Menu [Tutorial]
Some days ago we released a Freebie called Dark Menu in Free PSD and in this easy to follow tutorial you will learn how to create this two level Dark Menu in HTML and Pure CSS3. No Javascript or Images has been used in the creation of this menu and I hope that you can learn a few techniques that will help you in future projects.
19. Making a Beautiful HTML5 Portfolio
In today’s tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more.
20. Anna Neale – Acoustic Rock
In this tutorial i will teach you how to create a simple css rounded border content box with a blue gradient background in css…
21. Tutorial: CSS3 & Tooltips!
It uses some of the stuff mentioned in my CSS & Animation tutorial, but I’ll walk you through everything anyway, so there’s no requirement to read it. Plus it’s a pretty simple tutorial
22. Spin those Icons with CSS3
On my new portfolio site, I included a neat effect which spins the social icons with the help of a CSS transform and transition when you hover over them. Nothing amazing but definitely a nice enhancement. I used Komodo Media’s excellent social network icon pack (along with a couple I created myself) which look fantastic. Let’s see how it’s done.
23. Animated Buttons using CSS3 Transitions and Transforms
As CSS3 is gradually more supported over popular browsers, CSS3 Buttons become great looking replacements for image and script heavy buttons. These buttons use CSS3 transitions and transforms to animate morphing icons to represent different functions. This is a simple demonstration of 5 buttons representing functions like Demo, Download, Digg, Email, and RSS. I may make more if the response is very positive about these buttons.
24. Simple and Unique CSS Logo
Today, in this tutorial i will teach you how to create a simple and unique css logo in Css, this tutorial will also teach you how to create a text shadow in css…
25. Pure CSS3 Flexbox Tutorial
To start off, we will be showing a tutorial/demonstration an easier and much different version of the CSS3 Flexbox by isotoma.com. This one also looks fantastic! But to be very clear, this will only work correctly if you have the latest google chrome browser or the latest version of the Apple Safari Browser, so make sure you are up to date with today’s latest internet browsers before we continue this demonstration/tutorial. Browsers such as Internet Explorer, Mozilla Firefox, and sometimes Opera will mostly cause problems or wont display some important content while you are viewing the new website’s of today, even on our website it is imperative that you are viewing this site in Google Chrome.
26. Ring a Bell with CSS Keyframe Animations
Time to have some more fun with a CSS animation as I’m going to show you how to realistically animate a ringing bell. Following on from the 3D lightbox animation tutorial I thought it would be good to get into a little more detail on how to create a realistic animation.
27. KevinRudolf.comHorizontal drop-down menu using CSS3
This tutorial will show you how to create a clean CSS navigation menu with a professional look.
28. Create a CSS3 Image Gallery with a 3D Lightbox Animation
For the most part, the CSS3 tutorials and examples out there are a little dull. Of course there are some really great examples out there such as Benjamin de Cock’s CSS Playground but most others consist of a drop-shadow here and a few rounded corners there and nothing more. It’s time to start doing something more inspirational and useful at the same time.
29. Sexy Image Hover Effects using CSS3
Today, we are going to show to How to create a sexy css effect on image hover.You have seen this kind of effect in Flash or in javascript as well. But if CSS can do the same work, why use Flash or js. So lets do it
30. A Slick Photo Light Table Using CSS3 and jQuery
In this tutorial you’re going to learn how to create a virtual light table using jQuery and CSS3. A traditional light table is a flat illuminated panel that you can place transparent slides on for viewing. Our “light table” is going to be an image of a wooden kitchen table, and the photos will be prints rather than transparencies, but the basic idea is the same!
31. CSS3 Fundamentals #13 The Box Model
Before we get into the topics of borders, padding, and margins – I need you to visualize something for me. No, this isn’t a throwback to EST; rather just a way for you to picture all of the “stuff” that goes around your elements. Each and every element in HTML has each of these components, and they may vary in size from nonexistent to larger than the element itself.
32. Better Check Boxes with jQuery and CSS
In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable.
33. Learn How to Style a Basic Tabbed Navigation Menu Using CSS3
Having nice-looking, easy to navigate, simple navigation bars is very important for any web-site. Luckily, we have CSS to style our navigation with colors, fonts, images, etc… In this CSS tutorial we are going to learn how to style an unorganized list to create a basic tabbed navigation for your web-site. We will start with a basic unorganized list with anchors, and then we will be adding style to each part and element of our list. Let’s get started!
34. CSS3 Animation With jQuery Fallbacks
In today’s post, we’ll be taking a look at how you can use CSS3 transitions to power your application’s animations with jQuery’s .animate() method as a fallback where transitions aren’t supported. The benefit of transitions is that unlike JavaScript based animations, they’re hardware accelerated in certain browsers and mobile devices, resulting in a potentially smoother overall animation than you would normally experience.
A recent trend in modern web design is the use of CSS3 to add depth to normally bland-looking elements. Things like rounded corners and shadows are being used in extremely creative ways, and today we’ll see how to create one of the more commonly used effects known as the ribbon technique.
ajax 