17个最好的CSS3教程指南
01. Justified and Vertically Centered Header Elements
In this tutorial, you’ll learn positioning header elements to be centered vertically and justified with the help of pseudo-elements.
02. How To Customize Your CSS Buttons With Pictogram Icons
This tutorial focus on the power of CSS3 icon fonts for designing user interfaces. You will be creating some generic CSS3 buttons with added icons for design aesthetics. However the icons will not be loaded from static images or sprite sheets. Instead you will be using the Entypo icons font for generating pictograms inside your website layout.
03. How To Create a Trendy Flat Style Nav Menu in CSS
Here’s the menu we’ll be building as part of this tutorial. It’s based on the oh-so-popular flat design trend with solid colours and neat square boxes. When each navigation box is hovered the text label appears off to the right, adopting the same colour scheme as its parent menu item.
04. Building CSS3 Notification Boxes with Fade Animations
Modern web design techniques have allowed developers to quickly implement animations supported by most browsers. In this tutorial, you’ll see how you can put together CSS3 notification boxes which appear at the top of the page body. Users may then click on the notifications to have them fade away and eventually remove them from the DOM.
05. How to Code an Expanding HTML5/CSS3 Search Input Field
A common user interface style for Apple and WordPress has been the expanding search field. In this tutorial tutor want to demonstrate two different methods for building an expanding search field. It’s a small yet fascinating piece of UI which can blend nicely into any website project.
06. Smooth Diagonal Fade Gallery with CSS3 Transitions
In this tutorial, you’ll make a gallery with a smooth diagonal fade effect, powered by css3 transitions. It will scan a folder with photos on the server and display them in a grid that spans the entire browser window.
07. Animated CSS3 Photo Stack
In this tutorial, we are going to build an animated photo stack, which will use all kinds of fancy effects to transition between a set of images. The effects are implemented purely using CSS3, which means that they run smoothly on modern browsers and mobile devices. We will also make the photo stack advance automatically, so you can use it as a slideshow.
08. Helpful HTML Form Feedback With CSS3 Transitions
Designers may have noticed an ever-increasing use of CSS3 transition properties. In this tutorial you’ll see how we can build animation effects in HTML5 input fields. We’ll be designing a simple contact form with a couple of fields and a textarea. Using the CSS3 :valid pseudo class it is easier than ever to customize text inputs.
09. Using Custom Data Attributes and Pseudo-Elements
In this tutorial we’ll show you some simple CSS tricks using data attributes and pseudo-elements. The aim is to create an image caption using only an anchor and an image as markup. We’ll be exploring how to create pseudo-elements from some data attribute values and use them in a hover effect or simply show them next to the image.
10. Responsive CSS Timeline With 3D Effect
A tutorial about how to create an experimental CSS-only timeline with a 3D effect. The idea is to expand a content area when the associated radio input is selected.
11. Simple 油Tube Menu Effect
A tutorial on how to recreate the effect of 油Tube’s little left side menu. The idea is to slide a little menu icon to the right side while revealing some menu item list beneath.
12. Quickly Build a Swish Teaser Page With CSS3
In this tutorial, you’ll learn how to build a teaser page using just CSS, no images or even a Photoshop design. Many websites and upcoming apps gain great publicity from teaser pages, so this is a useful concept to add to your toolkit. Use it for any app or website that’s getting ready to launch.
13. Build the Android Robot with CSS
If you’ve always wanted to draw something with CSS, this guide to making the Android robot can be used to kickstart your own creativity. In this tutorial, we’ll create a ‘Droid’ robot using HTML and CSS.
14. Web Design: Hide / Show Notification Bar With CSS3
In this tutorial, you’ll learn how to create a notification bar with a control button. The idea is that we will be able to hide or show the notification bar by clicking on a button. As the title said, we will be doing this using (only) some CSS3 features.
15. Create Modern CSS3 Hover Effects
In this tutorial, you’ll learn how to create a modern CSS3 hover effect by using CSS transitions, transforms and delays.
16. Make a Kinetic Typography Video with CSS
Sam Hampton-Smith shows how to use CSS3 transitions and animations to create a kinetic typography motion graphic piece, timed to match an HTML5 audio clip.
17. Make CSS Tardis
Doctor Who fanatic John Galantini has materialized the Time Lord’s iconic police box into a whole new dimension: the modern browser. This article appeared in issue 234 of .net magazine – the world’s best-selling magazine for web designers and developers.
