The front-end developers always search for new techniques to improve their experience. We find out some more advanced CSS3 techniques with tutorials that can improve your skills and enhance your workflow. Today we present 15 Fresh CSS3 Tutorials Tricks Tools & Experiments for you to use. Enjoy!
How to Create a Beautiful Icon with CSS3
We’ll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element.
How To Create A Clean And Stylish CSS3 Menu
The CSS3 menu will work in Firefox, Chrome, Opera and Safari. Notice what browser is missing…yup Internet Exploder, IE will not support this.
CSS3 Flexible Box Layout Explained
The flexible box layout module — or “flexbox,” to use its popular nickname — is an interesting part of the W3C Working Draft. The flexbox specification is still a draft and subject to change, so keep your eyes on the W3C, but it is part of a new arsenal of properties that will revolutionize how we lay out pages. At least it will be when cross-browser support catches up.
CSS3: spread value and box-shadow on one side only
There’s a little talked about value in the box-shadow property called “spread”. That value, when used, comes after the blur value and moves the shadow away from the box equally all the way around. It doesn’t add a blur, it simply spreads out in all directions. You’ll get different effects based on whether the blur value is a greater than the spread value or whether the spread is greater than the blur. The color defined will be solid right next to the box, and then blur for the rest (based on the difference between the two values).
Brushed Metal style in CSS3
Tried to make a Brushed Metal style in CSS3. The texture is done by using 3 repeating-gradients with different length. That makes it look somewhat random. For the linear version, browser support is pretty ok, but for the radial one it’s not quite there yet. I think only in Safari 5.1 and Chrome Windows.
CSS3 Image Styles
When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn’t render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I’m going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles.
Tree with CSS3, literally
This page is built with only CSS3 and HTML, without using a single image, JavaScript, SVG etc. It relies heavily on CSS3 selectors and properties and as such does not work on older browsers, including IE9.
CSS3 Patterns Gallery
The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Opera doesn’t support radial gradients and Gecko is quite buggy with them).
Create a Swish CSS3 Folded Ribbon in Five Minutes
Take one line of markup, a couple of CSS3 rules (no images), and you can have yourself a swish folded ribbon effect in five minutes. Let’s see how..
Pulse
nifty CSS3 “pulse” animation
CSS3-Rainbow-Dividers
No longer must your rainbow dividers be images slowing down your computer! Make them hardware accelerated!
CSS3 properties explained
Comprehensive overview of the latest CSS3 properties to look up and learn at css3files.com
Pure CSS3 typing animation with steps()
steps() is a relatively new addition to the CSS3 animations module. Instead of interpolating the values smoothly, it allows us to define the number of “frames” precisely. So I used it to create headers that have the well-known animated “typing effect”:
CSSWARP – CSS Text to Path Generator
CSS3 brings new text-transform options: rotation, skew, matrix, transform-origin… By applying the right transformations to every single letter it is possible to create the illusion of text following a path.
Type your text into the webform, click “Warp it!”, then alter the path as you like. You can attach your text to a circle or a bezier. Add or delete points, or change position, angle and radius of the circle. When your done, click “Generate code”. Copy the CSS and HTML into your document.
A pure CSS 3D animated coverflow for Chrome 13+, Firefox 5+ and Safari 5+
A of a nice coverflow effect only with CSS3 properties. The animations are done via the ‘transition’ instruction, the 3D effect via some custom webkit transformations or using skew (for firefox compatibility). Everything is triggered via the :target pseudo-class.
