This property give you a nice easy way to spread content across multiple 
columns. The technique is standard in print, and on the Web it makes it easy 
to read content without needing to scroll. But you didn’t need me to tell you 
that, did you?
Because the property’s main purpose is to allow users to read horizontally 
without scrolling, first make sure that your columns aren’t too tall. Having to 
scroll up and down to read columns not only defeats their purpose but 
actually makes the content harder to read.
There are some JavaScript solutions for multiple columns. For older 
browsers, though, there’s generally no need to stick with a multi-column 
layout; rather, you could consider sensible alternatives for fallbacks.
Without support for multiple columns, the block quotes on tweetCC
change in 
In the absence of CSS3 support, the browser will flow content across the full 
width of the container. You’ll want to be careful about legibility. It can be 
very heard to read content that spans the width of an area that is intended 
to be broken into three columns. In this case, you’ll want to set a suitable 
line length. There are a few ways to do so: increase the margins, change the 
Smashing eBook #19│Mastering CSS3│ 241
Create a fillable pdf form - C# PDF Form Data fill-in Library: auto fill-in PDF form data in, ASP.NET, MVC, WinForms, WPF
Online C# Tutorial to Automatically Fill in Field Data to PDF
convert pdf fill form; converting pdf to fillable form
Create a fillable pdf form - VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in, ASP.NET, MVC, WinForms, WPF
VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in, ASP.NET, MVC, WinForms, WPF
pdf fillable form; convert pdf to fill in form
font size or decrease the element’s width. Floating elements such as images 
and block quotes out of the flow of text can help to fill up any leftover space 
in the single column.
Support: Google Chrome 7.0+ for -webkit-gradient, Google 10+ for -
webkit-linear-gradient and -webkit-radial-gradient, Firefox 
3.6+, Safari
Vendor prefixes: 
-webkit-gradient, -webkit-linear-gradient, 
-webkit-radial-gradient, -moz-linear-gradient, moz-
Example usage (a linear white-to-black gradient running from top to bottom 
— notice the lack of -linear- in the Webkit declaration):
.somediv {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(#ffffff), to(#000000));
background-image: -webkit-linear-gradient(0% 0%, 0% 100%,
from(#ffffff), to(#000000));
background-image: -moz-linear-gradient(0% 0% 270deg,
#ffffff, #000000);
background-image: linear-gradient(0% 0% 270deg,
#ffffff, #000000); }
A radial gradient running from white in the center to black on the outside:
.somediv {
background-image: -moz-radial-gradient(50% 50%, farthest-
#ffffff, #000000);
Smashing eBook #19│Mastering CSS3│ 242
C# Create PDF Library SDK to convert PDF from other file formats
Create fillable PDF document with fields. Load PDF from existing documents and image in SQL server. Load PDF from stream programmatically.
add attachment to pdf form; convert pdf fillable form to word
VB.NET Create PDF from OpenOffice to convert odt, odp files to PDF
Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Create PDF document from OpenOffice Text Document with ODT, ODS, ODP forms into fillable PDF formats fill pdf form; convert word form to fillable pdf form
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 
50%, 350,
from(#ffffff), to(#000000));
background-image: -webkit-radial-gradient(50% 50%, 0, 50% 
50%, 350,
from(#ffffff), to(#000000));
background-image: radial-gradient(50% 50%, farthest-side,
#ffffff, #000000); }
Fallback behavior: the browser will show the same behavior as it would for 
a missing image file (i.e. either the background or default color).
ColorZilla’s Ultimate CSS Gradient Generator
offers a familiar interface for 
generating gradients.
Ah, the good ol’ Web 2.0 look, but using nothing but CSS. Thankfully, 
gradients have come a long way from being used for glossy buttons, and 
this CSS3 property is the latest step in that evolution.
Gradients are applied the way background images are, and there are a few 
ways to do it: hex codes, RGBa and HSLa.
Smashing eBook #19│Mastering CSS3│ 243
C# Create PDF from OpenOffice to convert odt, odp files to PDF in
Create PDF document from OpenOffice Presentation in both .NET WinForms and ASP.NET NET control to change ODT, ODS, ODP forms to fillable PDF formats in Visual
convert word form to pdf fillable form; change pdf to fillable form
VB.NET Create PDF Library SDK to convert PDF from other file
Create fillable PDF document with fields in Visual Basic .NET application. Load PDF from existing documents and image in SQL server.
adding a signature to a pdf form; convert fillable pdf to html form
Be careful when applying a background with a height of 100% to an element 
such as the body. In some browsers, this will limit the gradient to the edge of 
the visible page, and so you’ll lose the gradient as you scroll down (and if 
you haven’t specified a color, then the background will be white). You can 
get around this by setting the background-position to fixed, which 
ensures that the background doesn’t move as you scroll.
Specifying a background color not only is a good fallback practice but can 
prevent unforeseen problems. As a general rule, set it either to one end of 
the gradient or to a color in the middle of the range.
Legibility is also a consideration. Making text readable against a solid 
background color is easy. But if a gradient is dramatic (for example, from 
very light to very dark), then choose a text color that will work over the range 
of the gradient.
Radial gradients are a bit different, and getting used to the origins and 
spreads can take a bit of playing around. But the same principles apply. 
Note that Webkit browsers are switching from the -webkit-gradient 
property to -webkit-linear-gradient and -webkit-radial-
gradient. To be safe, include both properties, but (as we have learned) put 
the old property before the new one.
These issues aren’t new; we’ve been using gradients for ages. If you really 
need one, then the obvious fallback is simply to use an image. While it won’t 
adapt to the dimensions of the container, you will be able to set its exact 
dimensions as you see fit.
Smashing eBook #19│Mastering CSS3│ 244
C# PDF Field Edit Library: insert, delete, update pdf form field
A professional PDF form creator supports to create fillable PDF form in C#.NET. An advanced PDF form maker allows users to create editable PDF form in C#.NET.
pdf signature field; pdf form fill
VB.NET Create PDF from PowerPoint Library to convert pptx, ppt to
Convert multiple pages PowerPoint to fillable and editable PDF documents. Easy to create searchable and scanned PDF files from PowerPoint.
convert excel to fillable pdf form; c# fill out pdf form
Support: Google Chrome 7.0+, Firefox 3.6+, Safari 2.0+, IE 9
Property: background
Example usage (multiple backgrounds separated by a comma, the first on 
top, the second behind it, the third behind them, and so on):
.somediv {
background: url('background1.jpg') top left no-repeat,
url('background2.jpg') bottom left repeat-y,
url('background3.jpg') top right no-repeat; }
Fallback behavior: an unsupported browser will show only one image, the 
one on top (i.e. the first in the declaration).
The fantastic Lost World’s Fairs website shows multiple backgrounds in its 
header and a solid color as a fallback.
Smashing eBook #19│Mastering CSS3│ 245
VB.NET Create PDF from Word Library to convert docx, doc to PDF in
formatting. Create PDF files from both DOC and DOCX formats. Convert multiple pages Word to fillable and editable PDF documents. Professional
convert an existing form into a fillable pdf; best pdf form filler
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Create fillable and editable PDF documents from Excel in Visual
create pdf fillable form; create a pdf form to fill out and save
Being able to set multiple background images is very useful. You can layer 
images on top of one another. And because CSS gradients can be applied 
as backgrounds, you can layer multiple images and gradients with ease.
You can also position background elements within dynamically sized 
containers. For example, you could have an image appear 25% down the 
container and then another at 75%, both of which move with any dynamic 
If multiple backgrounds are essential to your website, you could insert 
additional elements and images into the DOM using JavaScript. But again, is 
this worth doing? A single well-chosen background image might work best. 
It could be a matter of picking the most important image or blending the 
images into a composite (even if this makes for a less dynamic background).
Use Only Where Needed
It’s worth repeating that CSS3 is not a necessity. Just because you can use 
CSS3 properties, doesn’t mean your website would be any worse off without 
them. Applying these effects is now so simple, and so getting carried away 
becomes all too easy. Do you really need to round every corner or use 
multiple backgrounds everywhere? Just as a film can work without 3-D, so 
should your design be able to work without CSS3 splashed everywhere 
indiscriminately. The technology is simply a tool to make our lives easier and 
help us create better designs.
It is a testament to those who are already using CSS3 that there are very few 
instances of its misuse at the moment. The websites that do seem to misuse 
it suggest that their designers either used CSS3 for its own sake or didn’t 
consider its implications on certain platforms.
Smashing eBook #19│Mastering CSS3│ 246
C# Create PDF from Excel Library to convert xlsx, xls to PDF in C#
Create fillable and editable PDF documents from Excel in both .NET WinForms and ASP.NET. Create searchable and scanned PDF files from Excel.
convert pdf fillable forms; convert pdf form fillable
C# Create PDF from PowerPoint Library to convert pptx, ppt to PDF
Convert multiple pages PowerPoint to fillable and editable PDF documents. Easy to create searchable and scanned PDF files from PowerPoint.
create a pdf with fields to fill in; create a writable pdf form
In “Web Design Trends 2010: Real-Life Metaphors and CSS3 Adaptation,” 
Smashing Magazine’s Vitaly Friedman notes a number of misuses of the 
text-shadow property.
A less-than-ideal use of CSS3 on
The text-shadow property has certainly become popular. One-pixel white 
shadows are popping up in text everywhere for no apparent reason. As 
Vitaly says:
… before adding a CSS3 feature to your website, make sure it is actually 
an enhancement, added for the purpose of aesthetics and usability, and 
not aesthetics at the cost of usability.
Smashing eBook #19│Mastering CSS3│ 247
As you become familiar with CSS3’s new properties, you will learn to 
recognize when and where problems occur and where the properties aren’t 
really necessary.
Using CSS3
CSS3 is the future of the Web, no argument about that. So, versing yourself 
right now in the language of the future makes sense. While IE is still the 
single most popular browser, it now has less than half of the market share, 
meaning that the majority of people no longer use it and it can no longer be 
used as an excuse not to explore new possibilities and opportunities.
To use CSS3 means to embrace the principle that websites need not look 
the same in every browser, but rather should be tailored to the user’s 
browsing preferences via sensible fallbacks. It isn’t daunting or inaccessible, 
and the best way to learn is by diving in.
Smashing eBook #19│Mastering CSS3│ 248
About e Authors
Dave Sparks
Dave Sparks is a web designer and developer who has dabbled on the web 
for over 10 years with more than six years of commercial experience. He is a 
part-timer who freelances and does work for Armitage Online
. He can be 
found writing about various topics at
and tweeting as 
. He also runs long distances, drinks lots of tea and spends time 
flying planes in his day job.
Louis Lazaris
Louis Lazaris is a freelance web developer based in Toronto, Canada. He 
blogs about front-end code on Impressive Webs
and is a coauthor of HTML5 
and CSS3 for the Real World
, published by SitePoint. You can follow Louis 
on Twitter
or contact him through his website.
Peter Gasston
Peter is a web developer, writer, public speaker, and author of The Book of 
. He blogs at Broken Links
and tweets as @stopsatgreen
. He lives in 
London, England.
Smashing eBook #19│Mastering CSS3│ 249
Richard Shepherd
Richard (@richardshepherd
) is a UK based web designer and front-end 
developer. He loves to play with HTML5, CSS3, jQuery and WordPress, and 
currently works full-time bringing
to life. He has an 
awesomeness factor of 8, and you can also find him at
Tom Giannaasio
Tom Giannattasio happily makes things at nclud
. He works as an Editor for 
Smashing Magazine and teaches at Boston University Center for Digital 
Imaging Arts. He loves to experiment and share his work on his personal 
site: attasi
Tom Waterhouse
Pixel pusher by day, illustrator by night
. Tom is a lead designer and when he 
isn't ruining his eyes in front of the computer, he'll be ruining them in front of 
a games console.
Trent Walton
Trent Walton
is founder and 1/3 of Paravel Inc.
, a custom web design and 
development shop based out of the Texas Hill Country. When he’s not 
working on client projects, he’s probably writing & designing articles for his 
, or contributing ideas for the next edition of
Smashing eBook #19│Mastering CSS3│ 250
Documents you may be interested
Documents you may be interested