30 个很有用的 CSS3 教程

oschina
 oschina
发布于 2013年07月29日
收藏 354

大家看图片吧,OSC 就不再额外翻译小段介绍了。

Splash and Coming Soon Page Effects

With CSS3, you have way too many possibilities when it comes to ‘Splash’ and ‘Coming soon’ pages. You can use animations and what not. This tutorial will tell you how.

CSS3-Tutorials-1

CSS3 Drop-Down Menu

In this tutorial, you will find a perfect code for creating a drop-down menu.

CSS3-Tutorials-2

Circle Hover Effect

This tutorial will allow you to experiment with hover effects and that too on circles.

CSS3-Tutorials-3

Swatch Book Effect

This tutorial is all about creating a swatch book like component. It also permits you to swap single swatches.

CSS3-Tutorials-4

Flipping Circles Effect

This tutorial will help you in creating flipping circle effect. You will get to see how to create a circle with a handle. Once you click the handle, it opens and looks pretty real.

CSS3-Tutorials-5

Image Accordion Effect

In this tutorial, you will learn how to create an image accordion that can expand on a click. Along with the sibling combinators, you can also control the opening of the items and slides.

CSS3-Tutorials-6

3D Bar Chart Effect

Have you been looking for a tutorial that helps you in creating a 3D bar chart and that too with CSS3 only? Well your search ends right here.

CSS3-Tutorials-7

Annotation Overlay Effect

This will help you in creating an overlay effect with the usage of CSS3. It will allow you to show more details of any item or image.

CSS3-Tutorials-8

Rotating Words Effect

Want to rotate certain parts of a sentence? Well this tutorial will help you in rotating words and will create another and interesting typography effect.

CSS3-Tutorials-9

Login/Signup Box

As the name suggests, this tutorial is all about creating a login or registration form with the help of CSS3 along with HTML5. Well, this is important for any developer.

CSS3-Tutorials-10

Page Transitions Effect

Lately, single page websites have been in trend and people were using JavaScript for all the transition effects. This tutorial will help you in creating transition effects with CSS3.

CSS3-Tutorials-11

Animated Banners

Want to spice up your web banners, take a look at this tutorial in order to make some interesting, creative and attractive animated banners with the help of CSS3.

CSS3-Tutorials-12

CSS3 Lightbox Effect

This tutorial will guide you on how to create a lightbox using CSS3 only. With this you can create thumbnails and once you click on them, lightbox will appear in a fancy way.

CSS3-Tutorials-13

CSS3 Accordion Menu

If you have been looking to create an accordion menu and that too in pure CSS3, you will love this tutorial.

CSS3-Tutorials-14

Content Tabs

With the help of this tutorial, you will be able to implement CSS3 content tabs using radio buttons together in a very simple way.

CSS3-Tutorials-15

Blurred Menu

This tutorial is a great way to learn on using additional properties of CSS3. Are you looking to create a blue effect? Go ahead and follow the instructions in the tutorial.

CSS3-Tutorials-17

Slide Down Navigation

Wanting to create a unique slide down navigation box? This tutorial’s idea is to make a box where menu items will slide out along with thumbnails popping up. Interesting? Give it a try.

CSS3-Tutorials-18

CSS3 Image Slider

This tutorial will help you in creating an Image slider with the usage of CSS3. However, this is not recommended for professional projects.

CSS3-Tutorials-19

Flyout Text Menu

This tutorial will help you in creating a full page cufonized menu with two great features.You will see a hover-state item and a slide out description.

CSS3-Tutorials-20

Sliding Image Panel

In order to create crisp sliding panels with CSS3, go through this tutorial. The idea in this tutorial is to use images in the background as panels and once clicked, the animated affect will appear.

CSS3-Tutorials-21

Timed Notifications

Looking to create times notification? This tutorial will help you in creating simple yet attractive timed notification with CSS3 animations.

CSS3-Tutorials-22

CSS3 Image Styles

This tutorial will let you know that a lot can be done with background image CSS trick. If you want to create box-shadow or border radius, this tutorial will help you.

CSS3-Tutorials-23

Apple.com Menu

I personally loved this one as it will allow you to create Apple.com navigation menu using CSS3. Awesome, isn’t it?

CSS3-Tutorials-24

Text Background Animation

Aware of CSS property “background-clip: text”? Well this helps you in adding a background image into a text element.

CSS3-Tutorials-25

Slopy Elements

I love non-straight elements in a web design, they look different. This tutorial will tell you how to create slopy elements with CSS3.

CSS3-Tutorials-26

CSS3 Pricing Table

Pricing table should always be easy to understand and this tutorial will help you in making an easy pricing table with the help of CSS3.

CSS3-Tutorials-27

Image Gallery Animations

This is another great tutorial to learn and apply image gallery animations. They look fabulous.

CSS3-Tutorials-28

Fluid Parallax Slides

In this tutorial you will learn to create a parallax effect with the help of numerous CSS3 properties.

CSS3-Tutorials-29

Direction Aware Hover Effect

This will be created using CSS3 and JQuery. The basic purpose here is to slide in an overlay with the mouse’s direction.

CSS3-Tutorials-30

Apple like Login Form

Want to create an interesting, flipping effect on an Apple-inspired form? Take a look at this tutorial.

apple-login-form

via inspiretrends

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:30 个很有用的 CSS3 教程
加载中

最新评论(10

milin
milin
mark
秋松蝶月
秋松蝶月
mark
伊森papa
伊森papa
收藏了很多此类文章,很少去看
伊森papa
伊森papa

引用来自“jingdor”的评论

再重复发砍你

哈哈哈
Biblical
Biblical
全英文。。。。
jingdor
jingdor
再重复发砍你
Solid
Solid
Nice
飘逸的逸
飘逸的逸
css menu不错
ChpiTer
ChpiTer
好东西
收藏了
返回顶部
顶部