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 