Know About CSS Layout Types and Their Uses

WHich is the ideal width of web sites ?
Most of the new designers have this common question. So i decide to write about this topics to gives them idea about width of web sites.Theres are variations in monitor display resolutions. We designers need to decide first How i am gonna represent my site content to users.To do this we need to know first that there are three primary layout types available to design a website. After reading this article any of you can decide which one you can use for your design.

1. Fixed-width Layout (Using pixel-based units for the dimensions of the page)
2. Liquid or Fluid Layout (Using %-based units)
3. Elastic Layout (Using em-based units)

Lets start seeing more details with examples to undetstand what those means.

1. Fixed-width Layout

As the name suggests fixed layouts stop the web browser from having the freedom to format text as it sees fit, This is one of the most popular techniques on the web, with websites such as facebook and the BBC applying the design. This basically means that the width your content is contained and stays fixed no matter what, this is typically achieved using something called a wrapper, or container, which holds all the content within it. The fixed width design can be set to the left, center or right of the a page, very easily.

The real bonus of working with a fixed width design is that you can set imagery and design around the consideration that your width will always be the same. This is a real positive if you want a banner image, for example, which needs to be 900px, you will not have to problems when resizing, issues which you would encounter with a fluid design.

The downside of a fixed design however is the dead space that you are left with where your design does not fill the page. A fixed-width design can also force designers to prioritize. As a site grows and content competes for top placement, it must still fit within a specific width.



2. Liquid or Fluid Layout (Using %-based units)

The most relaxed method of providing a dynamically expanding or contracting design makes use of the ever-popular percentage (%) unit measurement.

This layout type has gained mass popularity because it is the ultimate way of allowing the total opposite of a fixed layout where the content will simply take whatever space is available to it.

Absolute LayoutsPercentages require careful calculation as you can’t give more than 100% without issues!

The limited guarantees you hold on the viewport being used goes beyond screen resolutions (imagine your site on a 6-inch screen versus a 100-inch screen, even just at 80% width).

Though it goes without saying that a liquid layout is useful in almost every web-based situation because it adjusts its width depending on how big or small the user’s viewport is — so it’s definitely worth looking into.


3. Elastic Layout (Using em-based units)

An elastic layout scales with users’ text size.

More accurately, an elastic interface scales with browser text size—commonly a default of 16px—which users can change if they wish. Some people make a permanent change for accessibility reasons, others use the UI controls to increase text size if they need to.

Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means:

   1. They are calculated based on the font size of the parent element. E.g. If a 
<div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px.
   2. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)

10 Most Useful & Handy online CSS Code Generators

Cascading Style Sheets or CSS allow you to control the layout and look of your page easily. CSS tags or properties are easy to use and affect the look and feel or style of your pages. But it is not easy for most people to write CSS code that implement a desired design. In fact a lot of people have difficulties mastering CSS. In This article i provides 10 Most Useful & Handy online CSS Code Generators that can be very useful to create CSS faster and to learn about how CSS is structured.

CleanCSS
CSS clean is very useful CSS formatter. It helps to make your CSS code in clean and understandable. It is providing a test box for CSS code and check box for change the functionality of CSS code.

CSS Creator
Creates a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

Grid Designer
Grid designer works according to the name, creating the different types of grid layout with the help of provided functionality. It has well interface for designers to creating attractive grid layouts.

Typetester
The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated. Typetester’s code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.

Telerik Visual Style Builder
An online CSS customization tool that allows you to easily, point-and-click customization of skins for the RadControls for ASP.NET AJAX. This visual style builder eliminates any need to have working knowledge of the front-end HTML and CSS structure of the RadControls to create custom skins.You’ll have complete control over the elements of the RadControls’ skin and allows you to develop a custom built skin in very short time.
This tool is ideal for ASP.NET developers. Probably one of the easiest ways to create a RadControls skin. This tool also satisfies your need for ready made menus and images for calendars and such.

css-generator
This tools lets you input your XHTML code in a box displayed on the front page, the code will be sent back to them and they will return your code with a corresponding CSS frame. This service is completely free This is great for the developer that’s big on multi-tasking.

CSSportal
Online CSS Editor allows you to edit an entire CSS file at once with a dynamic preview shown below. The preview will show the exact line you’re editing, and it will update as you type. If you want to show the entire file then move focus to the start or the end of the CSS text. When you have finished editing your CSS, be sure to validate the code with CSS Validator.

Drawter
Written in JavaScript and based on the jQuery library enables you with the possibility to draw your website’s code. Every tag is presented as a layer you have drawn.It can run on every single web-browser which makes it really useful and versatile.

Working knowledge of HTML and CSS is required in order to utilize Drawter, however developing code is easier then writting by hand. Drawter anticipates a version where you will not need much knowledge of CSS and HTML, this is foreseen in the near future.

CSSMate
CSS mate a very famous online CSS code editor. It allows to change multiple in fonts, color, text color, border and list.

CSS Type Set
Ahands-on typography tool which allows the every day designer and developer fully test and learn how to style Web content. You’ll be able to test different font-styles throughout a piece of text and also allows you to select a font-style and easily copy/paste into your stylesheet.

CSS Sprites: What They Are and How to Use Them

CSS Sprites

A visually appealing website must have a great design. And usually with a great design, comes great images. And with great images, comes loading time. And with loading time, comes slow pages. ect, ect. Images are key in most web designs, so it’s always important to keep in mind how to optimize your images for the best user experience.
There are countless methods on minimizing the load time on your site, but this post will address one way in particular: sprites. More specifically, CSS sprites.

The use of CSS sprites is a fairly common practice with web designers. But what are they? The name may be a little misleading, as CSS sprites aren’t small, but big images containing dozens, and even hundreds, of little images.

History

Super Mario Bros. Sprites
Sprites originated in video games, back during the 8-bit glory days. Every visual item in a game was drawn as an individual image that would later be ‘layered‘ into the game as it was being played. However, as the complexity of games increased, game developers realized the benefits from combining all the images for a game into a singe sprite. By combining all the images into a single sprite (in a grid like formation), they could program the game to map positions of each individual graphic, and selectively placed them into the game.

What does this have to do with web development? Well, aren’t websites not unlike 8-bit games? Eh?

Why Sprites?

Sprite image from Google
Having all these images individually makes for smaller files sizes and fast loading, right? You may think so, but no. While it may look like your page loads fast, since there are dozens of images half loaded, they’re actually loading slower.

For each image, an HTTP-Request is called to download the image, and having a few dozen of them called at the same time slows down the entire process. Not to mention that despite a single image being smaller than a large sprite, file sizes add up, and fast. Combining a bunch of your images into a single sprite cuts down of your HTTP-requests, lowers the total file size, and your page then loads faster.

Example

Here’s a comparative example of the difference between a single sprite image, and 20 small images.

While the individual images on their own are smaller in size, collectively they’re more than 5x larger than the single sprite image.

Another great benefit to using sprites is when you use images for the :hover state. Normally, you’d have to use JavaScript to pre-load an image used in a :hover state, but if you’re using a sprite, and simply change the background position on :hover, there is no need to pre-load the image, since it will already be loaded.

Use and Limitations

One you create a single sprite image, you’ll have to use some CSS trickery to display the right image from the sprite.

Here is the CSS for the sprite image above:

.arrow { background-position: 0 0; }
.biggrin { background-position: 0 -20px; }
.confused { background-position: 0 -40px; }
.cool { background-position: 0 -60px; }
.cry { background-position: 0 -80px; }
.eek { background-position: 20px 0; }
.evil { background-position: 20px -20px; }
.exclaim { background-position: 20px -40px; }
.idea { background-position: 20px -60px; }
.lol { background-position: 20px -80px; }
.mad { background-position: 40px 0; }
.mrgreen { background-position: 40px -20px; }
.question { background-position: 40px -40px; }
.razz { background-position: 40px -60px; }
.rolleyes { background-position: 40px -80px; }
.sad { background-position: 60px 0; }
.smile { background-position: 60px -20px; }
.surprised { background-position: 60px -40px; }
.twisted { background-position: 60px -60px; }
.wink { background-position: 60px -80px; }


In my opinion, easiest way to apply sprites are to assign a base class that declares the background image and any other attributes, and then a sub-class that handles the background position.

<div class="smiles wink"></div>

.smiles {
background-image: url(smile_sprite.gif);
background-repeat: no-repeat;
width: 15px;
height: 15px;
}
.wink { background-position: 60px -80px; }

/* ect. ect. */

CSS sprites are really only good for background images. So they’re useless for anything in an img tag. They’re also are not good for images you want to be repeated on both the x and y axis, as when you repeat an image, the entire image is repeated, not just what is visible.

There is a workaround however for repeating sprites on one axis (in this example, the x). Here is a situation:

• The height of the element is 20.
• The width is dynamic.
• The images are arranged in the sprite vertically, in one column
• The image is repeated on the x-axis

There are other ways to work with repeating a sprite, but this was just one example.

So…

There are lots of resources out there for CSS sprites, from generators, to more detailed information. Here is a great generator that allows you upload a .zip file full of images, and will automatically generate a single sprite image, CSS styles included. :eek:
CSS Sprite Generator
I suggest trying sprites out. The concept can be difficult to adapt your methods to at first, but the more you use it, but more second nature it becomes.

10 Best Tutorials on Converting PSD to XHTML/CSS

IT is a good habit to start a new project by designing a mockup in photoshop before starting coding for a website. There are lot of people who can design a web page in photoshop but not have good skill to convert this photoshop design into html/css.
I search over the web for best article on psd to html/css. Here i share 10 best link from where you can learn psd to html building step by step.If someone follow this link and study those articles carefully i am sure anybody can success on this job.

1. From PSD to HTML, Building a Set of Web Designs Step by Step

Collis Ta’eed published a post about five months ago at NETTUTS that takes a very detailed look at the process of coding a site with a PSD file as a starting point. This is a site that Collis designed in Photoshop and the post goes through every step of getting it to the point of being a working site, with all the CSS and HTML coding provided.


2. Build a Sleek Portfolio Site from Scratch

A few months prior to the previous post, Collis also published this exceptional tutorial. This post was the 2nd part of a series that included a tutorial on PSDTUTS for creating the design in Photoshop. The two posts form one of the most useful sets of tutorials for any aspiring web designer, or other designers who could use some pointers for the process of starting with a design in Photoshop.



3. Encoding a Photoshop Mockup into XHTML and CSS

Chris Spooner also did a similar two-part series of posts for creating a design in Photoshop and then coding the site with XHTML and CSS. While Collis showed us how to code a portfolio site, Chris focuses his tutorial on blog design.


4. Tutorial: Coding a Layout

This tutorial from Eratic Wisdom is not nearly as detailed as some of the others on this list, but it does a good job of looking at the process quickly. If you’re interested in going through a shorter tutorial on the subject rather than spending a large chuck of time on all the details, try this one.



5. From PSD to HTML – How to turn your designs into usable web interfaces

Part Digital Design gives us another detailed tutorial for coding a site from a Photoshop file. This tutorial is very detailed, from slicing the interface to the coding.


6. From PSD to CSS/HTML in Easy Steps

These are the first in a series of tutorials in which they build a fully working Photography site, all in clean Xhtml and CSS. All the code, templates and files are available for you to play with, and they encourage you to download and play with what is provided.



7. Converting a Design From PSD to HTML

8. BLOOpress CSS Template

9. PSD HTML Slicing Tutorial

10. Design and Code a Slick Website From Scratch – Part II 

15 awesome web services for web designers.

In this post i will share 15 amazing usefull web services for designers which can helps a lot in our daily work. Personally i use some of them regularly. Hope you will cosider it as i am because i found some of them really helpfull . Most of them are free for use. You dont feel the output of this services untill you use by youself. If  you have any other good services in your mind dont hesitate to share it by your valuable comment because i hardly believe that sharing is the great way to fulfill our knowledge.

1. Snipplr

 What: Social snippet repository
Cost: Free
Link: http://snipplr.com
Why: Snipplr is a public source code repository that gives you a place to store and organize all the little pieces of code that you use each day. Best of all, it lets you share your code snippets with other coders and designers. Did we mention it works with TextMate, too? It’s code 2.0.

2.Domainr

What: Pick a original domain name with other TLDs, in the del.icio.us fashion
Cost: Free
Link: http://domai.nr
Why: Desirable .com domain names are scarcer than profitable investment banks. But Domai.nr makes finding pithy URLs easy by querying 280 top-level domains and another 2,014 second-level ones for domain hacks, turning real English words into unique and memorable Web addresses like del.icio.us, internetfamo.us, gee.ky, and iamthewalr.us. Plus, it’s free. — Wired

3. Are My Sites Up?

What: Check whether your websites are up or not and get noticed when they go down.
Cost: Free for up to 5 sites; $25/$50/$75 per year for premium services.
Link: http://aremysitesup.com
Why: When your websites go down, shouldn’t you be the first to know?
Our free plan will check up to five of your sites at least 25 times per day. You get unlimited email and SMS notifications and we will do our best to tell you WHY your site was down by providing the HTML status error code.

Our premium plans offer significantly more features: Faster site checks, an iPhone application, RSS feeds, Twitter integration, Keyword search, premium-level support, and more!

All for just one dollar per site per year (or cheaper!).

4. Templatr

What: Create a simple design with little or no effort.
Cost: Free
Link: http://templatr.cc
Why: It should should be easy to create an individual Design with the templatr. With a little experimentation you will be able to reach the desired result much more quickly than with endless written explanations.

5. SurFTP

What: Web-based FTP client
Cost: Free
Link: http://surftp.com
Why: Once you are logged in, you will be able to navigate the FTP server, upload files, download files, zip files, unzip files, install software, copy, move and delete, copy or move to a second FTP server, rename and chmod.

6. Bespin

 What: Open, extensible web-based framework for code editing
Cost: Free
Link: https://bespin.mozilla.com
Why: Bespin is a Mozilla Labs experiment that proposes an open, extensible web-based framework for code editing that aims to increase developer productivity, enable compelling user experiences, and promote the use of open standards. [built using HTML5 technology]

7. Genfavicon

 What: Convert images into favicons for your website.
Cost: Free
Link: http://www.genfavicon.com
Why: Genfavicon is a site that features an application that allows you to create an icon out of the image of your choice. Simple select your image, by pasting in the URL address or uploading the image. Then choose which part of the image you wish to make the icon by dragging the mouse and cutting the desired shape. You must then select the size of your icon; 16X16, 32X32, 48X48, 64X64, or 128X128.
Preview what you have chosen and then finalize your icon.
You can then use your icon for your webpage or any other place you would like to put it.
Making your favicon could not be easier, in three quick steps you have made an icon that you can easily paste on your webpage.

8. CSS Sandbox

 What: Experiment with CSS styles in real time
Cost: Free
Link: http://aurelio.net/css-sandbox/
Why:
A toy.
A teacher.
A live demo.
A quick reference.
A web application.

A single HTML page.
The CSS Sandbox can be described by all these sentences.

It’s a simple and quick web toy that lets you explore CSS in real time. Just click and see the effect instantly, no Reload needed. It’s fast and funny!

Once you’re satisfied with the style of the Sandbox, roll your mouse over the handy CODE button. A panel will pop, showing all the necessary CSS code to apply that formatting to your own site.

9. Typetester

What: Compare screen type
Cost: Free
Link: http://www.typetester.org
Why: The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

10. Wofoo

What: Form builder
Cost: Free for limited number of entries and one form only; from $9.95/month for more intensive usage
Link: http://wufoo.com
Why: Wufoo strives to be the easiest way to collect information over the Internet.
Our HTML form builder helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code.

11. BrowserCam

 What: Cross Browser Compatibility Testing Tools
Cost: 24 hours free trial; prices vary from $20 to $1000/month
Link: http://www.browsercam.com
Why: See your web design on any browser on any operating system. Check javascripts, DHTML, forms and other dynamic functionality on any platform. Not just yours. Use our bank of testing machines remotely to test your website.

12. Zoho Suite

 What: Productivity, collaboration and business apps
Cost: Free for personal use; pricing varies depending on the services needed
Link: http://www.zoho.com
Why: While Google Docs seems to be the first product people think of when online office suites come up, the lesser-known Zoho Suite offers more apps and features. See how Zoho stacks up against Google Docs. — LifeHacker

13. Time59

 What: Track time and expenses, handle invoicing and payments.
Cost: Risk-free 30 days trial, $49.95 per year
Link: http://time59.com
Why: Be more organized with less effort. Time59 keeps track of the work you do, gets your invoices out quickly, and manages client payments. Your Time59 account can be accessed from any internet connected computer… at home, at your office, or on the road. Getting started with Time59 is easy. There’s nothing to install, just sign up and you’re ready to go.

14. Mint

What: Web site analytics
Cost: A single site license is $30
Link: http://haveamint.com
Why: Mint is an extensible, self-hosted web site analytics program. Its interface is an exercise in simplicity. Visits, referrers, popular pages and searches can all be taken in at a glance on Mint’s flexible dashboard.

15. CrazyEgg

 What: Supplement your analytics with visuals and actionable data
Cost: Plans start at $9/month
Link: https://crazyegg.com
Why: Analytics only give you a static interpretation of your site visitor’s activities. You may be able to tell how many people have visited your site, or viewed a particular page, but you won’t be able to gauge effectiveness of design elements, link placement or popular areas of your site. If you want to know where people are clicking on your site, and which areas could use improvement, you need Crazy Egg. Crazy Egg helps you visualize your visitors.

Top 90+ Fantastic Design Resources Site For Web Designers

While designing a site we need more resources and information to improve our design skill. While you searching for design resources over web you can easily lost and confused with the ever-changing stream of information and advice about design. I’m a big collector and bookmarker of design resources. Here I’ve tried to pull together the best design resources site I’ve found from over the web.Hope this can helps you in your everyday design works.

CSS Galleries
The Best Nature Sites on the Web: CSS Nature Website Gallery
A Frequently Updated Gallery of Sites: CSS Mania
An Organized List of Nice Sites: Most Inspired
CSS Gallery of Quality Sites: CSS Design Yorkshire
A Selection of Only Nature Based Sites: CSS Nature
A Selective List of Well Designed Sites: Web Creme
High Quality CSS Showcase: CSS Tux
Nice CSS Websites: The Designed Tree
A CSS Collection Organized by Category: CSS Elite
More about css


Website Templates
A Few High Quality Wordpress Themes: Evan Eckard
Over 2000 Free Web Templates: OSWD
A Large Selection of Nice Templates: Free Website  Templates
A Large List of Free Templates: Free CSS Templates
Nice Wordpress Templates for Download: Free CSS Templates
A Combination of Free and Pay Templates: Free Templates Online
Affordable, Quality Templates: Templamatic
Free Blog Templates: Blogging Themes

Coders
$50 per page awesome psd to xhtml DROPNCHOP.COM (We recommend them, and use them)
Quality Programming: XHTMLized
Professional Web Slicing: PSD Slicing
Affordable, Quality Coding: PSD2HTML
From Design to Code, Quick and Cheap: Front Enders

Inspiration
A Great Site About Everything Type: I Love Typography
An Incredible Illustrator: Burst of Beaden
A Great Designer and Illustrator: Fully Illustrated
Customizable List of Design Resources: Cork Dump
The Society of Graphic Designers of Canada: GDC
Freelance Advice Blog and Resources: Freelance Switch
Amazing Collection of Logos: Logopond
Stunning Desktop Wallpapers: Desktopography
A Graphic Design Magazine: Computer Arts

Design Blogs
A Frequently Updated Design Blog: Veerle’s Blog
A Design Magazine and Blog: Smashing Magazine
A European Design Blog: Design In Europe
A Unique Nerdy Blog: Design You Trust
The Personal Blog of a Graphic Designer: Larissa Meek
A German Design Blog: David Hellmann
The Blog of a Canadian Geek/Model: Mostly Lisa
A Graphic Design Blog: Bittbox
A Blog About Freelance Graphic Design Advice: Freelance Switch
A Design Blog Full of Resources: You The Designer
A Popular Design Blog: Fazai 38
More design blogs list

Colour Palettes
A Flash Site of User Generated Colour Palettes: Adobe Kuler
Using Colours From Photos: Colr
Colours, Palettes and Patterns: COLOURlovers
A Colour Palette Generated From Your Images: Color Palette Generator
See The Results of Your Palette on a Website: Color Spire
Create and Email Colour Palettes: Color Blender
More Color Tools


Free Font Downloads
Free Fonts and Other Resources: Web Page Publicity
Huge Collection of Free Fonts: Da Font
Nice Selection of Free Fonts: Urban Fonts
Fonts and Other Freebies: Simply The Best Fonts
1001 Free Fonts for Download: 1001 Free Fonts
Over 9000 Free Fonts: Creamundo
A Small List of Free Fonts: Best Free Fonts
More Free Fonts Lists


Paid Font Sites
A Large Selection of Fonts for Purchase: My Fonts
Quality Fonts for Purchase: Veer
Information and Fonts for Purchase: Fonts
Font Resources and Sales: Font Haus

Stock Photos and Vectors
The Best Stock Photo and Vector Website
Quality Photos for Purchase: Shutterstock
Stock Photos and Other Pay Downloads: Veer
Quality, Affordable Vectors for Purchase: Vector Stock
Stock Photos With a Great Selection: Jupiter Images
Stock Photos and Photography Network: Stock Vault
Quality Stock Photos: Corbis
Free Stock Wedding Photos Wedding Photographer Victoria Vancouver BC

Free Photos and Vectors
Submit Vectors or Download Others for Free: Free Vector Art
Tons of Great Free Vectors and Photos: Deviant Art
59 Pages of Free Vector Art: Free Vectors
Quality Vector Downloads: Vector 4 Free
Neat Collection of Free Photos From Around the World: Free Stock Photos
Great Collection of Free Vectors and Resources: You The Designer
Great Free Stock Photos: Free Foto
A List of Free Downloads: Bittbox
700 Free Stock Photos: Free Picture Click

Free Photoshop Downloads
A Couple Free Patterns for Download: Design Spice
Free Photoshop Brushes: Design Fruit
Free Photoshop Actions: Visual Blast
Tons of Free Photoshop Brushes: Brusheezy
A Few Nice Free Photoshop Brushes: Obsidian Dawn
Great Grunge Brushes and Others: Photoshop Brushes
Free Background Patterns for Photoshop: Free BG
Over 150 Free Background Patterns: Squidfingers

Tutorials
The Best Photoshop Tutorials: PSD Tuts
A Talented Photoshop Designer: Abduzeedo
Photoshop Tutorials and Web Design Resources: Web Design Library
Tutorials for Photoshop, Illustrator and More: Tutorial Vault
A Few Neat Illustrator and Photoshop Tutorials: Design Spice
Great Photoshop Tutorials and Downloads: PS Wish
Tutorials for Every Computer Program: Tutorialing

10 Awesome CSS3 Features which makes designers dreams come true.

In this post i will share about some CSS3 basic properties. Today is the day for which i am always waiting for. By using this properties we can make some awesome effect instantly with small amount of code such as Border Radius,Box Shadow,Text Shadow,Text Stroke,Linear Gradient, Radial Gradient,Rotate,Reflection,Resize,Outline etc. So here i tried to explaing them in a sort way. Hope it will helps you.

1. Border Radius

Earlier we used to use images to get border radius, which is bit a long procedure and lots of codes are needed to complete this. But now with CSS3 Border Radius Property we can do it in second. View alos css curve button

Code #border-radius { width: 200px; height:100px; background-color:#398ebe; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

Demo

Browser Support : Firefox 3+, Chrome 4+, Safari 3.1+

2. Box Shadow

This is the new property of CSS3 which gives shadow to selected DIV. Using Box Shadow we can set the X and Y offset of shadow, color of shadow along with Blur in pixel.

Code #box-shadow { width: 200px; height: 150px; background-color:#398ebe; -webkit-box-shadow: #244766 5px 5px 10px; -moz-box-shadow: #244766 10px 10px 10px; box-shadow: #244766 10px 10px 10px; }

Demo

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

3. Text Shadow

This is the new property of CSS3 which gives shadow to selected DIV. Using Box Shadow we can set the X and Y offset of shadow, color of shadow along with Blur in pixel.

Code #text-shadow { font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:50px; color:#398ebe; text-shadow: #555 3px 3px 3px; -webkit-text-shadow: #555 3px 3px 3px; -moz-text-shadow: #555 3px 3px 3px; box-text: #555 3px 3px 3px; }

Demo

Browser Support : Firefox 3.5+, Opera 9.6+, Chrome 2+, Safari 4+

4. Text Stroke

This is the new property of CSS3 which gives stroke/outline to Text. Here we will use syntax as text-fill-color for color of text, text-stroke-color which gives color to the stroke and text-stroke-width for width of stroke/outline.

Code #text-stroke { font-family:Arial, Helvetica, sans-serif; font-size:50px; font-weight:bold; -webkit-text-fill-color: #398ebe; -webkit-text-stroke-color: #000000; -webkit-text-stroke-width: 2px; }

Demo

Browser Support : Chrome 2+, Safari 4+

5. Linear Gradient

Linear Gradient gives a gradient to any HTML elements. View also css gradient button for more details.

Code #linear-gradient { width: 200px; height: 150px; /* For Firefox */ background-image: -moz-linear-gradient(top, #83cbf4, #d1ecfa); /* For Safari/Chrome */ background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1ecfa),color-stop(1, #83cbf4)); }

Demo

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

6. Radial Gradient

This CSS3 Property gives a radial gradient to any selected element of XHTMl. Visit Webkit and Gecko for more detail on this property.

Code #radial-gradient { width: 200px; height: 150px; /* For Firefox */ background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #d1ecfa 10%, #83cbf4 70%); /* For Safari/Chrome */ background-image: -webkit-gradient(radial, center center, 10, center center, 90, from(#d1ecfa), to(#83cbf4)); }

Demo

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

7. Rotate

This CSS3 Property allows any html element to rotat

Code #rotate { width: 200px; height: 150px; background-color:#398ebe; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); }

Demo

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

8. Reflection

This CSS3 Property allows reflection of text or boxes.

Code #reflection { font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:18px; color: #398ebe; -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(100, 100, 100, 0.4))); }

Demo

Browser Support : Chrome 2+, Safari 4+

9. Resize

This CSS3 Property allows resizing of box on horizontal, vertical and both axis.

Code #resizing { width: 200px; height: 100px; border:1px solid #398ebe; overflow: hidden; resize: both; }

Demo

Browser Support : Chrome, Safari

10. Outline

When we style any element with outline then we can have a outline specified with offset to that particular element. Suppose we want to have an outline which is 5px away from the element box then we use outline property.

Code #outline { width: 200px; height: 150px; background-color:#398ebe; outline: solid 1px #398ebe; outline-offset: 5px; }

Demo

Browser Support : Firefox, Chrome, Safari