HTML5 Offers ‘Scoped’ CSS for Precision Styling

HTML5′s controversial “scoped” style attribute is now supported in the latest Canary builds of Google’s Chrome web browser and Mozilla may eventually add support to Firefox as well.

HTML5 adds an attribute, scoped, to the style element which limits the scope of the styles contained within the tag. Google’s Alex Danilo has a good introduction to scoped over at HTML5Rocks. Essentially scoped allows you to nest styles within HTML and those styles will only apply to any child elements.

http://www.webmonkey.com/2012/04/html5-offers-scoped-css-for-precision-styling

CREATING A MOBILE-FIRST RESPONSIVE WEB DESIGN

We're going to walk through how to create an adaptive web experience that's designed mobile-first. This article and demo will go over the following:

• Why we need to create mobile-first, responsive, adaptive experiences
• How to structure HTML for an adaptive site in order to optimize performance and prioritize flexibility
• How to write CSS that defines shared styles first, builds up styles for larger screens with media queries, and uses relative units
• How to write unobtrusive Javascript to conditionally load in content fragments, take advantage of touch events and geolocation
• What we could do to further enhance our adaptive experience

http://www.html5rocks.com/en/mobile/responsivedesign/

When can I use...

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

http://caniuse.com/

Modernizr Prefixed

There was a new release of Modernizr yesterday (2.5.1), and included within this release was some brand new features to the Modernizr Prefixed() API (introduced in 2.0), which can take away some of the pain of vendor prefixes from your JavaScript. As you are probably aware if you are working with the latest JavaScript APIs and CSS3 technologies available in the browser, these are normally prefixed with a browser vendor tag. The reason for this is usually due to the feature still being in the experimental stage.

http://www.andismith.com/blog/2012/02/modernizr-prefixed

impress.js

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.


https://github.com/bartaz/impress.js
http://bartaz.github.com/impress.js

Modernizr

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

Why use Modernizr?

Taking advantage of the new capabilities of HTML5 and CSS3 can mean sacrificing control over the experience in older browsers. Modernizr 2 is your starting point for making the best websites and applications that work exactly right no matter what browser or device your visitors use.

http://www.modernizr.com/

Vendor-prefixed CSS Property Overview

Next to having four seperate pages for the major rendering engines, this page shows a clearer overview of the implemented, prefixed properties, and their counterparts in other engines. The latest update on this page occurred on 2011-11-14


http://peter.sh/experiments/vendor-prefixed-css-property-overview/

CSS3 Secrets

10 things you might not know about CSS3
http://lea.verou.me/css3-secrets

CSS3 Image Styles

When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I'm going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles.

http://webdesignerwall.com/tutorials/css3-image-styles

The Tree Slider

The new HTML5 History API (which really has nothing to do with HTML — it's a JavaScript API) allows us to manage the URL changes while CSS3 transitionshandle the sliding. Permalinks are always maintained, your back button works as expected, and it's much faster than waiting for a full page load.


https://github.com/blog/760-the-tree-slider

Understanding CSS3 2D Transforms

What Are Transform(ation)s?

Transformations, in their strictest and broadest mathematical sense, are mathematical operations that map a set of items X onto another set, Y. In geometric terms, this means that we can apply a mathematical operation on a set of objects in space to map them onto a new space geometry.
In layman's terms, we can take an object and apply what we call transformation groups. These are ordered lists of operations (called transforms) that we can use to move, scale, reflect, rotate and skew objects. Sounds simple enough, right?
But before we jump right into the whole business of object manipulation, we need to look into how these transformation groups work, exactly. As mentioned, transformation groups are an ordered set of transformation operations, the implication being that the order of transformations matters and gives different results depending on the ordering of those operations. This is because transformations take into account every object's geometric properties, including its current position.

http://msdn.microsoft.com/en-us/scriptjunkie/gg709742.aspx

A Hand-Coded Designer CSS UI Kit

Web UI sets have been around for ages, but this takes things a step further. This free UI Kit is coded by hand using HTML5 and CSS3 so you can easily drop these elements into any project you’re working on. This code is made to take advantage of modern browsers and to degrade gracefully in older versions of internet explorer, so no matter what your client or visitor is using they will be see an excellent design.
Most major web elements are included—buttons, tables, headings, etc—and each of these is done in six color variations. Just pick the element you need, insert a few lines of CSS, and copy the HTML elements into your document. Full preview and instructions are below.

http://medialoot.com/blog/a-hand-coded-designer-css-ui-kit/

Creating a Gaussian Blur Effect With CSS3

Unfortunately, CSS3 does not provide means for creating blur effects out of the box, however we can easily emulate Gaussian Blur by using text-shadow and setting the color of the element to transparent:
The following markup:

<p>Lorem ipsum dolor sit amet...</p>

…And this CSS:

p
{
    text-shadow: 0 0 8px #000;
    color: transparent;
    /* other properties */

}

… Will produce this:

… And we can use it to add cool a lá Vista and Windows 7 blur effects to our Web 2.0 dialog boxes as you shown below:

A few notes:
You can control the smoothing of the blur via the spread value of the text-shadow property (in our example it is set to 8 pixels).
Internet Explorer 5.5-8 does not have native support for RGBA colors, but you can use the properietary gradient filter to emulate RGBA:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";

On the other hand, in IE you do not have to emulate Gaussian blur, because it supports it since version 5.5 – again via the proprietary blur filter:

filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)";

The demo does not work properly with Opera, because that browser does not seem to support RGBA colors applied to elements that have a position different than static, however with a different setup it can be put to work. IE6 and IE7 fail to execute the blur filter, because it is applied to a relatively positioned element (yes, that’s the weird CSS hack for stopping the propagation of transparency from parent to child elements), but again – this can be solved with a different setup, markup and CSS.
The entire example is available on this page, or you can download it straight away from this link.

http://acidmartin.wordpress.com/2010/12/23/creating-a-gaussian-blur-effect-with-css3/

20 Things I Learned about Browsers and the Web

Chrome team decided to write an online guide for everyday users who are curious about the basics of how browsers and the web work, and how their evolution has changed the way we work and play online. Called “20 Things I Learned about Browsers and the Web“, this online guidebook is built in HTML5, JavaScript and CSS3.
The app utilizes the History API to provide a clutter-free URL structure that can be indexed by search engines. The HTML5 canvas element is used to enhance the experience with transitions between the hard cover and soft pages of the book. The page flips, including all shadows and highlights, are generated procedurally through JavaScript and drawn on canvas.

http://www.20thingsilearned.com
http://www.webappers.com/2010/11/24/20-things-i-learned-about-browsers-and-the-web

Sencha Animator

Create Amazing CSS3 Animations with Ease.
For Windows, Mac & Linux.

Introducing Sencha Animator, a powerful desktop application to create awesome CSS3 animations for WebKit browsers and touchscreen mobile devices. Make your static content come to life quickly and easily, without the dependency of third-party plugins or writing a single line of CSS code. In no time at all, you’ll be creating rich experiences for today’s most popular devices.



http://www.sencha.com/products/animator/

13 Useful Oline CSS3 Tools

1. CSS3.0 Maker
CSS Maker is a free and user friendly online tool to experiment with CSS properties and values and generate a simple stylesheet for your own site. This tool covers new elements like drop shadows, transitions, the increasingly popular @font-face and more.
2. CSS3 Generator
This online multi-tool by Randy Jensen generates cross-browser CSS3 snippets that you can use right away on your website. Apart from border radius, you can also get snippets for box shadow, text shadow, RGBA and more. You can preview the code in a sandbox.
3. CSS3 Sandbox – Cool Tools & Toys for Web Developers
A collection of tools by John Allsopp for web developers to help you analyze and debug your sites, play with CSS3 features and more. Included in this little collection are online tools for gradients, shadows, CSS transforms and CSS text stroke.
4. Ultimate CSS Gradient Generator
Ultimate CSS Gradient Generator by Alex Sirota is a free and user friendly online tool for web developers, and it provides a simple interface to generate gradients. You will need a recent version of Firefox, Chrome or Safari to use this tool.
5. Quick 3-Color CSS3 Gradient Generator
This easy to use online tool helps you to create 3-color CSS3 gradients. You simply start by entering three colors. When you have done that you will be presented three styles of gradients. Just copy and paste the code next to the style you like into your stylesheet.
6. CSS3 Gradient Generator
This online tool helps you create CSS gradient codes – it provides a simple graphical user interface for working with CSS webkit gradients, allowing a user preview real time what their gradient will look like and provide the code for the gradient.
7. CSS3 Playground – Online CSS Tool
This is a practical tool by Mike Plate to experiment and learn about new and popular CSS3 capabilities. The user interface is based on Dojo’s UI library Dijit, and provides you as a user an easy to use and pedagogical working space.
8. CSS Border Radius – Generator
This very easy to use online tool by Jacob Bijani helps you to create stylish and good looking curved corners (border-radius) for your web page. You just fill in (in the corners, where default is 0) how many pixels you wish the border radius to be.
9. CSS Corners – CSS3 Gradient
This is a simple online tool by Cgosborne that allows you to create some nice CSS3 corners and gradients (also CSS3) without even thinking about the current syntax. You can also see a little preview of the corners or gradients on the page.
10. CSS3 Please – The Cross Browser CSS3 Rule Generator
With this online tool you can generate and test CSS3 rules. You can edit the underlined values in the CSS file on the page, and you don’t need to worry about if the corresponding values match, that is all done automatically for you.
11. Button Maker
Button Maker is a CSS3 button code generator – the tool is actually a demo for a project by Chris Coyier on CSS-Tricks, and you can download the source code. You can preview your button on the left, and customize it on the right control panel.
12. @Font-Face Generator
This free and easy to use online tool helps you to create your own @font-face Kits by uploading some attractive fonts you want to use. The usage of this tool is couldn’t be more simple – just click the “Add Fonts” button and download your fonts.
13. CSS2 And CSS3 Help Sheets – GoSquared
This resource by GoSquared is a visually appealing and well structured as well as practical CSS2 and CSS3 (new) overview. According to GoSquared, they have covered most of the basic options possible for the moment with CSS3.
The CSS tools are not in any particular rating order. What is a useful CSS tool, depends in the end on your specific needs. But in our opinion, these tools are quite useful.

http://cashrevelations.com/magazine/2010/10/useful-css3-tools/

An (Almost) Complete Guide to CSS3 Multi-column Layouts

One of the defining features of print design is the ubiquity of multi-column layouts. And there are a couple of good reasons why this is the case.

First of all, it’s generally easier to read lines of text between 8 and 12 words long. Second, it’s easier to control the amount of negative space in a layout with columns. For a long time, this was the primary advantage of print but CSS3 makes multi-column layouts possible online (and without the need for JavaScript).
W3C Specification: http://www.w3.org/TR/css3-multicol/

Browser Specific Support

WebKit support: Strong
Firefox support: Strong
IE9 support: None

The multi-column model

The WC3 specification introduces a number of new properties that allow us to define columns in HTML layouts. Just like print designs of old, we’re able to define the number of columns, column width, column gaps, and even rules governing overflow.
Essentially, the specification states that a multi-column element needs to have either a defined column width or column count. Browsers are supposed to render these elements similar to the way they render tables – but the content in a column layout is dynamically split into blocks.
At the moment, we’re not able to define certain properties about columns (like column-specific backgrounds), but it’s possible this might change.

The number and width of columns

column-count and column-width are the two most basic ways to define the properties of a multi-column element.

column-count

By default, column-count is set to auto. This means that if we explicitly define the column-width, the browser will sort out for itself how many columns are necessary to populate the content in the multi-column element. Obviously, that’s not always desirable so we’ll want to explicitly define the number of columns to span the content across. And it’s easy to do:

1	#multicolumnElement {

2	-webkit-column-count: 2;

3	-moz-column-count: 2;

4	column-count: 2;

5

}

column-width

As I mentioned, we can define column-width without defining the number of columns, and the browser will render our content dynamically (there are some fine controls available too – keep reading for those). To define column-width, we can use any of the units regularly available to CSS properties (em, px, %, etc).

1	#multicolumnElement {

2	-webkit-column-width: 15em;

3	-moz-column-count: 15em;

4	column-count: 15em;

5

}

Of course, we can always combine column-width and column-count:

1	#multicolumnElement {

2	-webkit-column-count: 2;

3	-moz-column-count: 2;

4	column-count: 2;

5	-webkit-column-width: 15em;

6	-moz-column-width: 15em;

7	column-width: 15em;

8

}

Column gaps and rules

All print designers are familiar with column widths and gaps, but web designers are addicted to the language of margins and padding.

But column gap is exactly as it sounds – the size of the space between columns defined in any unit regularly available in CSS (em, pixel, etc).

column-gap

The WC3 specification defines 1em as the default column-gap value, so we’ll use it in this example:

1	#multicolumnElement {

2	-webkit-column-gap: 1em;

3	-moz-column-gap: 1em;

4	column-gap: 1em;

5

}

column-rule

Column rule is another throwback to the print era. Basically, column rules are thin lines between the columns, to further aid readibility and/or to distinguish between separate stories. CSS3 gives us three different properties for the column rule: column-rule-size, column-rule-style, and column-rule-color, but we can use the shorthand column-rule to declare values for all three at once.
As you might have guessed, the regularly available units, styles, and color values can all be used:

1	#multicolumnElement {

2	-webkit-column-rule: 1em solid #000;

3	-moz-column-rule: 1em solid #000;

4	column-rule: 1em solid #000;

5

}

Column breaks

What if I want to break the column before an h3 tag, you ask? Well, that’s easy too. CSS3 gives us the column-break property with a number of possible related properties and values, including: auto, always, avoid, left, right, page, column, avoid-page, and avoid-column.

column-break

So if we want to break the content before every h3 tag we simply include the column-break-before property in our stylesheet:

1

h2 {

2	-webkit-column-break-before:always;

3	-moz-column-break-before:always;

4	column-break-before:always;

5

}

Spanning columns

If we want an element, say a headline, to span across multiple columns we can make use of the new column-span property.

column-span

column-span has two possible values: all, and regular numbers (e.g. 1,2,3). Defining column-span as all means that the given element will span across the whole multi-column block, while assigning it a regular number will limit its span to that number of columns:

01

h2 {

02	-webkit-column-span:all;

03	-moz-column-span:all;

04	column-span:all;

05

}

06

07

h3{

08	-webkit-column-span:2;

09	-moz-column-span:2;

10	column-span:2;

11

}

Filling columns

Just like print design, we might want some finer control over how columns are filled with content. CSS3 introduces column-fill to give us that kind of control.

column-fill

We can either define a value of auto or balanced. The former will sequentially fill columns with content, while the latter evenly distributes the content.

1	#multicolumnElement {

2	-webkit-column-fill:auto;

3	-moz-column-fill:auto;

4	column-fill:auto;

5

}

Demo!

To cap things off, I’ve created a quick demo project based on the first few paragraphs of Moby Dick. It should display correctly in both WebKit and Mozilla based browsers (though it’s not formatted properly for mobile).

http://www.kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts/