June’s Best Resources for CSS3

Fresh css3 resources june 2010
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.
Pure CSS3 Reflections

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.
Fancy Image Hover Using CSS3

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

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.
Super Cool CSS Flip Effect with Webkit Animation

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.
CSS Sprites withoutout Using Background Images

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.
CSS Sprites withoutout Using Background Images

CSS Sprites withoutout Using Background Images

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

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

This can be achieved by setting text-fill-color to transparent and that gives your text a really nice smoky blur.
CSS3 Text 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.
CSS3 Text Blur

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.
Css3 text wrap

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.
Flexible Box Layout Module CSS3

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

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

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.
HTML5/CSS3 Website Layout Without Images

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.
Playing with CSS 3 - Animations, Rotate and Scale

Zack Hovatter shows you in this tutorial how you can code your own CSS3 Navigation Menu.
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.
CSS3 Dropdown Menu

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

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.
Simple CSS3 Dropdown Menu

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.
cSS3 Minimalistic Navigation Menu

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!).
MacOS Dock-like menu with CSS3

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.
CSS3 Flying Menu

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

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

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.
Grooveshark Search box with CSS3

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.
Learn To Design Chromium Style Login Page Using CSS3

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.
Stylish CSS3 Contact Form

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.
Playing with CSS3 gradients

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.
Creating The PSD Then Going To CSS3

Creating The PSD Then Going To CSS3

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

This is a quick tip for making CSS 3 inset buttons.
Two Tone CSS 3 Inset Buttons

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

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.
Css3 feedback buttons

Cross Browser CSS3 buttons

CSS3 only Lightbox-style close buttons

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.
Fancy Css3 bullets

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.
Animated wicked CSS3 3d bar chart

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.
3D cube using css3

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.
CSS3 Lightsaber

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.
CSS3 Twitter Fail Whale


Related Posts:





freepsdtemplate.com - daily updated PSD resources for webdesigners