The design industry is probably one of the fastest changing and growing. Designers have to keep their eyes on everything, including new trends in visual design, as well as interaction technologies like jQuery, HTML5, and CSS3. Designers are using these technologies to express more creativity in design production and make user experience richer. In this post today, I would like to share with you some amazing and beautiful CSS3 tutorials for creating various web design elements and interactions. Use this collection to learn something new and be prepared for the near future of the web. Quickly Build a Swish Teaser Page With CSS3
What is it? IE-CSS3 is a script to provide Internet Explorer support for some new styles available in the upcoming CSS3 standard. How it works If you're viewing this page in Internet Explorer, some of the elements have been rebuilt by the script in Vector Markup Language (VML), an IE-specific vector drawing language. CSS3 support in Internet Explorer 6, 7, and 8
Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type. View demo Download source The idea is inspired by Roman Komarov’s brilliant “Filtering elements without JS” experiment where he uses checkboxes and radio buttons for filtering colored shapes. The beautiful Dribbble shots used in the demos are by Mike from Creative Mints . The Markup
CSS Differences in Internet Explorer 6, 7 and 8 - Smashing Magazine One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share . The interesting part of those statistics is that the numbers across IE6, IE7, and IE8 are very close, preventing a single Microsoft browser from dominating browser stats — contrary to what has been the trend in the past. Due to these unfortunate statistics, it is imperative that developers do thorough testing in all currently-used Internet Explorer browsers when working on websites for clients, and on personal projects that target a broader audience.
Everyone has been going on about how we should use CSS3 more and all of the possibilities and flexibility that come with it, but that we should still consider IE6 and other troubling browsers. But how do we actually do that? How do we create websites that are up to date with the latest coding techniques but that are also usable for people experiencing the Web on Internet Explorer? In this article, we’ll see what measures we can take to provide a good experience for IE users but keep moving on. How To Support Internet Explorer and Still Be Cutting Edge - Smashing Magazine
A similar, but up-to-date article on CSS layouts is available here After years of promise, CSS3 has finally arrived in style (if you'll pardon the pun). It's added a whole new array of tools to our front-end toolbox, giving us rounded corners, gradients, opacity, transformations, transitions, animations and much more. But now that we have the fun stuff, the eye candy, what's next? The next problem for CSS3 to address will be layouts. The future of CSS layouts
CSS3 is gaining momentum, despite the fact that the standard hasn’t even been finalized. There are hundreds of tutorials out there to teach designers how to use it, but unfortunately a lot of them cover the same ground. And some of the tutorials teach designers to do things that they might not think of as useful, though the techniques can usually be adapted to fit a project perfectly. Below are more than fifty awesome CSS3 tutorials.
We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.
Is used to assign one or more shadows to an element. Compatibility box-shadow Firefox 4+ Safari 5.1+, Chrome 10+ Internet Exlorer 9+ Opera 11+ Supported by all modern browsers. For detailed compatibility info see caniuse.com . CSS3 properties exposed in »shadow« | css3files.com
Although CSS isn’t that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time, but you don’t have to reinvent the wheel every single time. Other designers may have had the same problem in the past and thus the main goal of this round-up is to share with you a goldmine of new techniques which you will hopefully find very useful and valuable. We also hope that these tutorials and articles will help you solve common design problems and find new ways of approaching tricky CSS issues. The main goal of the article is to present powerful new CSS techniques , encourage experimentation in the design community and push CSS forward.
In 2002, Mark Newhouse published the article " Taming Lists ", a very interesting piece in which he explained how to create custom list markers using pseudo-elements. Almost a decade later, Nicolas Gallagher came up with the technique pseudo background-crop which uses pseudo-elements with a sprite. Today, on the shoulders of giants, we’ll try to push the envelope. We’ll discuss how you can style elements with no extra markup and using a bidi-friendly high-contrast proof CSS sprite technique. The technique will work in Internet Explorer 6/7 as well. Styling Elements With Glyphs, Sprites and Pseudo-Elements - Smashing Magazine
Just last week we released an extensive printable HTML 5 Cheat Sheet that lists all currently supported HTML 5 tags, their descriptions, their attributes and their support in HTML 4. In comments to this post we received many requests for a similar CSS 3 cheat sheet that would present the main features of CSS 3 in a handy, printable reference card. So we asked our friend Chris Hanscom from Veign.com (who created the HTML 5 cheat sheet) to create a quick reference card for CSS 3. We already encouraged you to experiment with CSS 3 in our last posts and now you can use this handy cheat sheet to use the new CSS 3 features in some modern browsers (Firefox 3.5, Opera 9.6, Safari 3+, Google Chrome and Co.). The result is a printable CSS 3 scrib sheet, created and released exclusively for the readers of Smashing Magazine.
The possibility of embedding any font you like into websites via @font-face is an additional stylistic device which promises to abolish the monotony of the usual system fonts. It surely would be all too easy if there was only one Web font format out there. Instead, there’s quite a variety, as you will get to know in this article. This quick introduction to @font-face will lead you towards a guide through the @font-face kit generator. If you want to make Web use of your already licensed desktop fonts, read up on how to embed them from your own server.
Best Collection of CSS3 Tutorials and Techniques | DesignModo The latest revolutionary technology in web-designing, CSS3 is at the disposal of a web-designer to improve the working-flow and create exciting web pages. The new advanced features make the designing much easier, leaving the time consuming process of complex effects recreations in the past. Actually, CSS3 made classic CSS techniques easier to implement, thus providing greater flexibility and making the overall process much faster and much more effective.
Hover on “Everything But”
CSS3 dropdown menu – Red Team Design
How to avoid common CSS3 mistakes