background preloader


Facebook Twitter

20 Fresh CSS3 Tutorials. The design industry is probably one of the fastest changing and growing.

20 Fresh CSS3 Tutorials

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 In this tutorial, you’ll learn how to build a teaser page using just CSS, no images or even a Photoshop design. CSS3 support in Internet Explorer 6, 7, and 8. What is it?

CSS3 support in Internet Explorer 6, 7, and 8

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. VML supports things that are missing from IE's CSS implementation like rounded corners and blur effects. Filter Functionality with CSS3. 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.

Filter Functionality with CSS3

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 Let’s start with the markup. The unordered list will contain all the portfolio items as anchors with an image and a span. The CSS We’ll be going through three example effects, but first, let’s take a look at the common style.

I will omit all the vendor prefixes, but you will, of course, find them in the files. The main section container will have a specific width: CSS Differences in Internet Explorer 6, 7 and 8 - Smashing Magazine. Advertisement 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.

CSS Differences in Internet Explorer 6, 7 and 8 - Smashing Magazine

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. How To Support Internet Explorer and Still Be Cutting Edge - Smashing Magazine. Advertisement. CSS3 Solutions for Internet Explorer - Smashing Magazine. Advertisement Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind.

CSS3 Solutions for Internet Explorer - Smashing Magazine

This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user. But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. The future of CSS layouts. Net magazine is the number one choice for the professional web designer and developer.

The future of CSS layouts

It's here that you find out about the latest new web trends, technologies and techniques – all in one handy package. Each issue boasts a wealth of expert tips and advice, including in-depth features and over 30 pages of advanced front and backend tutorials on subjects as diverse as CSS, HTML, JavaScript, WordPress, PHP, and plenty more. net compiles the hottest new sites from around the web, and being the voice of web design, our mission is to source the best articles written by the best people in the industry and feature interviews and opinions crammed with inspiration and creative advice. In short, If you're serious about web design and development, then net is the magazine for you. Editorial. 50+ Awesome CSS3 Techniques for Better Designs. CSS3 is gaining momentum, despite the fact that the standard hasn’t even been finalized.

50+ Awesome CSS3 Techniques for Better Designs

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. Many are strictly CSS and HTML based, while others also incorporate JavaScript. CSS3 . Info - All you ever needed to know about CSS3. 11 Classic CSS Techniques Made Simple with CSS3.

CSS3 properties exposed. CSS3 properties exposed in »shadow« CSS3 PIE: CSS3 decorations for IE. CSS 3 Cheat Sheet (PDF) - Smashing Magazine. Advertisement 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.

CSS 3 Cheat Sheet (PDF) - Smashing Magazine

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 (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 Font-Face Rule And Useful Web Font Tricks - Smashing Magazine. Advertisement 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.

The Font-Face Rule And Useful Web Font Tricks - Smashing Magazine

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

Best Collection of CSS3 Tutorials and Techniques

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. Useful HTML5 & CSS3 Toolbox For Web Developers / HTML 5 / Splashnology - Web Design and Web Technology Community. Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8. Initializr - Start your HTML5 project in 15 seconds! HTML5 Boilerplate - A rock-solid default template for HTML5 awesome.

CSS-Tricks. Hover on “Everything But” Adding a hover state to an element is durn easy. Let's use an opacity change as an example: But what if we want to have that hover state apply to everything but the element actually being hovered over? (e.g. other adjacent sibling divs) Let's assume this basic HTML: We'll apply the current CSS properties to all the children of the parent when the parent is in the hover state.

Then when the parent is hovered and the individual div is hovered, we bump the opacity back up, giving the final effect we are looking for. Real World? A similar kind of thing is in the Twitter for Mac app on individual tweets: Demo This idea can be extended into multiple levels of depth. View Demo Download Files. CSS-Tricks. CSS3 PIE: CSS3 decorations for IE. CSS3 dropdown menu – Red Team Design. While this is still an up-to-date version, I just wanted to let you know I made an improved and animated version of this CSS3 menu. You may want to check that first. Today you'll learn how to create your own CSS3 dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup. Let's see how is made: If you're in a hurry, here's the result: View demo HTML structure As you can see in the following lines, the HTML structure does not contain more than we need, it's a minimal one and easy to understand.

How to avoid common CSS3 mistakes. CSS Modal. Using CSS3 techniques a modal box can be created without JavaScript or images. With a bit of animation, transition and transform, it can be made that little bit more special. CSS Modal Experiment Modal experiment updated for Firefox 10 which has better transform, transition and animation performance. Also supports 3D transforms. CSS3 Generator - By Eric Hoffman & Peter Funk. HTML5 & CSS3 Support, Web Design Tools & Support ~ FindMeByIP ~