June’s Best Resources for CSS3

Cascading Style Sheets Level 3 or CSS3 for short is the next stage CSS. CSS3 can really improve efficiency, both in your development time and page performance. The latest versions of the modern web browsers such as Chrome, Firefox, Safari, and Opera support CSS3, while Microsoft announced to support CSS3 in Internet Explorer 9 (there’s no release date for IE9 yet).
Here are the best CSS3 coding techniques and tutorials of June 2010, 43 fresh resources to help keeping up with new technologies.

Many might not be aware that, with CSS, we can achieve reflections quite easily in all webkit-based browsers, which represent roughly 20% of all browser usage. The key is in the vendor-specific, -webkit-box-reflect property.

Learn how to create a fancy image hover with css3. As you all know we can have cool image hover effect using jquery but now using transform and transition properties of css3 we can have the same cooler effect with css3 only.

Soh Tanaka shares some simple border style tricks to get various effects for your next project.

Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a super cool Transformers themed top trumps design.

It is very simple to create such an effect with CSS3 transitions. The mouse over images are absolutely positioned and have an opacity of 0. On hover the opacity and width height padding of the image will be changing.

This is an tutorial written in german. Use Google’s translate service to translate this page to your preferred language.
Using CSS3, without any javascript it is possible to run animated transitions on a web page elements such as image galleries. The following step-by-step tutorial will describe the “Slide” effect in more detail.

This a quick way to jazz up your website or blog headlines by combining @font-face with pure CSS letterpress styles.

This technique tries to simulate an inset text-shadow with CSS3 only. Works in Safari/Chrome.

This can be achieved by setting text-fill-color to transparent and that gives your text a really nice smoky blur.

FLASHLIGHT is powered with CSS3 only. The text color is set to transparent and text-shadow is added. For the hover effect a rotateY transition is used with a low perspective. Works in Safari only.

The funky word-wrap property is a proprietary Microsoft invention that has been included with CSS3. And thanks to the CSS forward compatibility guidelines, it’s perfectly fine to include multiple instances of the same property.

The entire FBL module is expansive, so for now we’re just focusing on the basics; a simple structure for the examples consisting of a parent DIV and three child DIV , and the properties DISPLAY, BOX-ALIGN, BOX-ORIENT, and BOX-FLEX.

CSS3 provides a fairly rich toolset for mobile-friendly formatting, relying on the client’s browser capabilities instead of back-end templating.

Andy Clarke shows us how to adapt the leading of our page designs for fluid layouts using Media Queries.

With all the advancements in HTML5 & CSS3 (compared to previous respectable specs) it wouldn’t be too hard to create a decent-looking website that wouldn’t have to rely on images for the layout elements. An second part is available here.

Even though CSS3 it’s not fully supported on all browsers we can start using some really cool features such as round corners, text-shadow, box-shadow, transitions and transformations. Here are some cool experiments by Fabio Sasso.

Zack Hovatter shows you in this tutorial how you can code your own CSS3 Navigation Menu.

This is pure CSS, without any single Javascript involved. If you was using webkit browser, you will see a nice transition effect. The CSS 3 juice added here is border-radius, transition-property and transition-duration.

The animation part will only work on browsers which support CSS3 transitions – Chrome,Safari,Opera. Currently not working on Mozilla.

Learn how to make a simple drop down menu using pure CSS. By using CSS3 properties we can tune our element into another level and also we can minimize the use of images.

Learn how to make a a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.

GirlieMac accomplishes the Mac dock UI with WebKit transform, transition, and a dash of Javascript. (Try it with the the latest Webkit Nightly or Safari 4) for the best experience!).

As we know CSS3 is more powerful with its transition property, it help us creating animation without any JavaScript or even Flash help. We’ll use them for creating the flying effect and here is the result.

Learn here how to create animated navigation menu with css3 (the jQuery code for the same type of animation is also available).

Accordion Using CSS3 Transitions and HTML 5 elements (Try Chrome or Safari to see it correctly!! They Half work on FF).

Learn create the Grooveshark search box only using HTML and CSS. Only one image was used and it’s the search icon in the button.

Here is a tutorial on how to build a simple xHTML login page with CSS3 effects. The page that will be designed in the tutorial was inspired by the chromium style login page.

In this tutorial we’re going to look at a range of different CSS3 effects – in particular, we’ll be creating background gradients, adding shadows to elements, applying some rounded corners, and adding a couple of simple animation effects.

It’s time to retire Photoshop and enjoy the raw beauty of the text editor . CSS3 gradients and masks are so powerful together that the average webapp would never need an image for layout anymore.

It’s time to retire Photoshop and enjoy the raw beauty of the text editor . CSS3 gradients and masks are so powerful together that the average webapp would never need an image for layout anymore.

A remake of Hongkiat’s button tutorial, this time no images were used. For best results view in WebKit browsers.

This is a quick tip for making CSS 3 inset buttons.

Learn how to duplicate Aristo’s Photoshop layer styles in CSS.

Below you can see the original image on the left versus the pure CSS version on the right. By hovering over or clicking the button, you can see how the CSS version adds some user interaction.

This is a stylish, imageless touch that could fit well into a lot of design situations, a creative use of CSS3, it doesn’t require extra markup, and it degrades with near perfect gracefulness.

The principle is the same as the previous version: Create a beautiful 3d bar chart. But this time, we don’t create a “stacked” one (since animation would be hard), but several bars placed under each other. When hovering, the animation shows and the bar will grow to the appropriate size.

In this mini tutorial I’ll show you a small example on how to create a 3D cube with pure css3 using -webkit-transform and -moz-transform, this tutorial works on mozilla firefox and google Chrome.

In this tutorial, I’m going to walk you step by step in the process of building a detailed lightsaber using html, CSS, and even a little jQuery for interactivity.

In this experiment the ever-vigilant Twitter ‘Fail Whale’ is fully rendered using CSS. If you’re using a Webkit browser (Safari or Chrome), it should also be animated using the webkit-animation CSS functions.