Skip to main content

Drop Shadow With CSS For All Web Browsers

Dear Readers
I found an article for drop shadow supported in all browsers

Ref URL: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

One of the most common CSS effects is using shadows in various ways. Before, we needed to resort to images, but now we can offer this to all major web browser with CSS!

Web Browser Support

Believe me or not, but all of these web browsers we can offer shadows with CSS:


  • Firefox 3.5+
  • Safari 3+
  • Google Chrome
  • Opera 10.50
  • Internet Explorer 5.5
  • The Standards Way


As we all know, a majority of the web browsers implement features in a standardized way, while others don’t (although they are getting better at it). Previously, in the W3C specification CSS Backgrounds and Borders Module Level 3 box-shadow was described, although at the moment, it’s not in there for some things to be discussed further. Anyway, this is how the implementation looks:


.shadow {
box-shadow: 3px 3px 4px #000;
}

The first value describes the x-offset (could be a negative value as well), the second the y-offset, the third the radius of the shadow and the fourth the color of it. Opera 10.50 (currently only available on Windows) is the first web browser to have an implementation without a vendor-prefix, whereas Firefox, Safari and Google Chrome all need it for now. So, this code makes it work in all those web browsers:

.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}

What About Internet Explorer?

Luckily enough for us, there are a couple of filters we can use to make this work: The DropShadow filter and the Shadow filter. The problem with the DropShadow filter is that the shadow is solid, and not fluffy as desired, although it offers easy values for X and Y. The Shadow filter on the other hand offers a nice shadow, but instead of x and y offset, we need to specify direction and strength the set the length of the shadow.

So, this is how we make it work in Internet Explorer:

.shadow {
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

The Combined Styles

This all the CSS for various web browser collected in one rule:
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

What It Looks Like

Here you can see shadows applied via CSS for an element:

I can haz shadow

Honorable Mention: CSS3 Please!

An easy way to automatically generate these styles and others, cross-browser, is available in the excellent service CSS3 Please! by Paul Irish and Jonathan Neal. Just enter your value, watch its rendering, copy the code and you’re good to go!

A little caveat is that they are currently using the DropShadow filter for IE, but I’m sure that will be updated soon. If you have any feedback about that service, please let Paul know in his post Introducing… CSS3Please.com.

Regards
Rashid Imran Bilgrami
http://www.bestvisualization.com 

Comments

Popular posts from this blog

OLEDB jet 4.0 driver In Vista 64bit / he 'Microsoft.Jet.OLEDB.4.0' provider is not registered on the local machine

Well i think you must be thankful for me specailly for this research i am really getting the solution after 6 month research that is how to enable the oledb jet 4.0 driver in vista, i read arround 100s of articles and maximum said that is not possible to enable it and ala bla well at the end i got the answer that is so easy Acctually that is correct that oledb jet 4.0 driver is not avaialble for 64 bit but if you run your IIS on 32 bit instead of 64 then Oledb jet will working fine Here are the steps Click on the Start > Program > Administrative Tool > IIS Management panel Select the Computer name Right click on the application pool and select properties Select "TRUE" in Enable 32 Bit Application by default it is false Then this problem will resolve if you need any assitance then feel free to email me rashidbilgrami@hotmail.com Regards Rashid Imran Bilgrami CEO Best visualization www.bestvisualization.com

How to create a search engine for your DotNetNuke site

Dear Readers today i found very interesting item now you can create your own search engine like google in just few steps by using dotnetnuke technology Original URL  http://www.wrensoft.com/zoom/support/tutorial_dnn.html thanks for zoom Zoom Search Engine is a software package that allows you to create a powerful custom search engine for your website. It is unlike other search solutions in that it gives you full control over its indexing capabilities, and there is no advertising or annual fees, while being one of the easiest to use and most feature packed solutions on the market. More on the advantages of using Zoom here . The following tutorial explains how to use Zoom with your DotNetNuke website. Since many DotNetNuke (DNN) users find the built-in search functionalities of DNN Search to be lacking, they have found that Zoom is far more capable in providing a much more effective (both in relevance and performance) search function to their DNN website. We provide

How to convert and crack windows server 2012 from Evaluation to Full

Dear All This is a way how you Convert Evalution to Full Step1: Open CMD and run following command DISM /online /Get-CurrentEdition <edition ID> is like ServerStandard with out Eval Step 2: DISM /online /Set-Edition:<edition ID> /ProductKey:XXXXX-XXXXX-XXXXX-XXXXX-XXXXX /AcceptEula WINDOWS SERVER 2012 Serial Key Windows Server 2012 DataCenter: 48HP8-DN98B-MYWDG-T2DCC-8W83P Datacenter: Y4TGP-NPTV9-HTC2H-7MGQ3-DV4TW Standard: XC9B7-NBPP2-83J2H-RHMBY-92BT4 Standard R2: DBGBW-NPF86-BJVTX-K3WKJ-MTB6V Server Essentials: K2XGM-NMBT3-2R6Q8-WF2FK-P36R2 For Standard R2 here is a command For R2 its like that DISM /online /Set-Edition:ServerStandard /ProductKey:DBGBW-NPF86-BJVTX-K3WKJ-MTB6V /AcceptEula Regards