In this CSS (2 & 3) round-up article we have focused on highlighting as many varied techniques covering as many aspects of web, mobile and application development as possible. And believe me, it wasn’t easy!
Due to CSS3s current popularity, the volume of new tutorials and fresh ideas has jumped skywards. We simply could not highlight all of the articles and tutorials, there were far too many! What we have done is filtered the round-up down to our favorite 50 tutorials, resources and tools from recent months.
There is nothing more refreshing and stimulating than some fresh CSS techniques and tutorials…
In this in-depth tut, from Chris Spooner, you will learn how to take a blog layout that has been firstly designed in Photoshop and then take it and convert it to CSS & HTML.
Create Animated Price Grid Using CSS3
In this tutorial you will learn how to build an animated Price Grid using CSS3 only. No jQuery, no images and with no Flash.
Create Animated Price Grid Using CSS3 →Demo →
Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.
In this article you will be walked through the process of how to adapt your web app to look and feel more like a native application that makes use of CSS media queries to change the layout when the device is rotated between horizontal and portrait modes.
In this article you will be shown how to adapt your web app to look and feel more like a native application that makes use of CSS media queries to change the layout when the mobile device is rotated between horizontal and portrait modes.
CSS3 media queries are very handy to target various devices with various monitor (screen) size. With the help of the CSS3 media queries we can have site optimized for iPhone and other mobile devices, with the same solution we can have site optimized for iPad and all other tablets .
In this article, with a few CSS rules, you will learn how to create an iPhone version of your site using CSS3, that will work now. You’ll have a look at a very simple example and it discusses the process of adding a small screen device stylesheet to a site to show how easily you can add stylesheets for mobile devices to existing websites.
In this article, you’ll master the 960 grid system by dissecting the 24-column version demo. By the end of this article, you’ll be able to convert your designs to HTML and CSS in no time at all.
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.
In this article the author shares his method for beating spam bots that he has been using for nearly 3 years and works consistently. It’s been incredibly effective, doesn’t carry the usability issues and implementation hassles of something like CAPTCHA, and uses nothing more than a bit of CSS!
Usually you’ll see an underline, or an underline removed, or a different color. But there are many ways to show people that they can click and in this article the author shares his favorites.
The CSS white-space Property Explained
This article will attempt to describe, in a very practical, no-nonsense way, the different values for the CSS white-space property, and how each one can be used.
The CSS white-space Property Explained →
CSS3 is one of the coolest new web technologies available to web developers right now. Using some of its many features, it is possible to reproduce the effects that you might have previously done in Photoshop, with CSS code that is more maintainable, faster to load, and hip with the latest trends. Read on to learn about the power tools available to you and how to combine them to produce the ultimate graphical effects.
Word-Wrap: A CSS3 Property That Works in Every Browser
Okay, this is not exactly the kind of CSS property that’s going to be used in every design. But it is a very useful one when you need it, and some might say it’s much more practical than some of the fluffy new CSS3 features like transitions and whatnot.
The property I’m talking about is the CSS3 word-wrap property, and believe it or not, it works in every single browser, including all versions of IE. In fact, it was even supported as far back as IE5.
Word-Wrap: A CSS3 Property That Works in Every Browser →
Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby!
In this CSS3 tutorial, you’ll learn how to create web card pockets using some great new CSS3 techniques.
Animated Sprites with CSS3 Transitions
This technique is not really anything new, it just combines two concepts (sprites and animations) that most CSS developers should be fairly well familiar with by now. Combining the two methods, you can create a simple animated rollover effect with endless possibilities.
Animated Sprites with CSS3 Transitions →Demo →
In this article you will take 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.
Here’s some form input checkboxes styled with CSS3 to look like iPhone style on/off buttons. There’s some -webkit- animations for Chrome and Safari. The clever bit is using the label to switch the checkbox off and on using the ‘for’ attribute whick targets the ‘id’ of the checkbox.
Menu, Navigation & Button CSS Tutorials
CSS3 offers a glimpse into a possible future where basic animations are performed with straight CSS completely independent of scripting. In this tutorial you’ll take a look at how to use CSS3 to create a fun and unique navigation menu that uses @font-face, transforms and transitions.
If you made a horizontal gradient that faded in a gray-white-gray pattern, then animated it from left to right, you could make the iPhone/iPad’s slide to unlock screen with no images at all.
In this tutorial you will learn how to create a simple menu that has a flying effect when the user hovers over them using only CSS.
Fading Button Background Images With CSS3 Transitions
CSS3 transitions with another CSS3 property, RGBa, will allows y to animate an element’s opacity without affecting contained elements.
Fading Button Background Images With CSS3 Transitions →Demo →
What you will be showing here, is how you can use some CSS3 properties to create lightweight, good looking buttons. The code will be very easy to adjust, will have complete flexiblity, so the buttons can be any size, ratio, color, font and you only need to edit the CSS file.
In this tut you will learn how to build a collapsible tree menu using only CSS.
In this tutorial you will be making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.
Images Effects & Galleries
Fancy Inset CSS Image Borders
In this article you will be exploring how to add a nice, styled, inset double border to any image. This effect works in all modern browsers and degrades gracefully for Internet Explorer.
Fancy Inset CSS Image Borders →
Fancy Image Hover Using CSS3
Here you will learn how to create a fancy image hover effect with CSS3 that is typically achieved with jQuery, but now using the transform and the transition properties you can have the same effect.
Fancy Image Hover Using CSS3 →
The idea of this image gallery is to get one image to slide in while the current image slides out. There’s a lot of z-index going on as well so the new image always appears to be at the top.
The author shares some simple border style tricks to get various effects for your next project.
This tutorial aims to showcase a method of displaying content based on the lightbox, which is web accessible and (excluding Internet Explorer) will require no scripting at all.
Fresh CSS Tools & Resources
Primary is a simple open-source CSS Framework, designed for Developers and Designers in order to make using CSS as easy as possible.
CSS3 Pie is a set of CSS “behaviors” that can be attached to any CSS file by way of the behavior element in order to add rendering support to Internet Explorer 6, 7 or 8 for the more popular CSS3 rendering features.
IE-CSS3 – CSS3 Support in IE 6, 7, and 8
IE-CSS3 is a script to provide Internet Explorer support for some new styles available in the upcoming CSS3 standard.
IE-CSS3 – CSS3 Support in IE 6, 7, and 8 →
Toucan CSS Reset is a reset stylesheet, unlike Meyer’s or YUI’s, it not only removes the default styling of HTML elements, but also rebuilds the new generic rules for the typography, headings, paragraphs, lists, forms, tables etc. It’s light-weight, flexible and browser-friendly.
The idea of this visualization is to show how much support exists for each new HTML/CSS feature. It shows support for 8 browsers (IE 7, 8, 9, Opera 10.10, Safari 4, Chrome 4, Firefox 3.5, and Firefox 3.7). The browsers are grouped into color schemes based on their underlying rendering engine – e.g. all Firefox versions are shades of blue, Chrome/Safari – yellow, IE – pink. Each ray also has a different background color if it is a CSS3 feature.
FontFonter uses custom CSS and other techniques to temporarily replace a site’s font styles with Web FontFonts.
Typedsgn.com is a website to showcase the natural curiosities of typography on the web using the most advanced coding techniques via CSS3, HTML5, @font-face and other markup languages.
Drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts onto the page and it will be added to the font list. The last font dropped will change the font-family of the pages text and the title.
Ever fire up Photoshop just to multiply a couple of colors? No more. Blend colors with different modes like multiply, overlay, dodge, within the convenience of your browser.
To use this Button Maker thing, you just adjust the settings until you have a nice looking button, then press the button and it will give you the CSS. Copy and paste at your leisure. Now you can use the class name “button” on HTML elements to make them look like buttons.
Each example on the CSS3 Click Chart, visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page for information on that particular feature.
CSS3 Watch is fantastic resource for everything CSS3 related. You will find tutorials, concepts and plenty of inspiration.