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

RegisterStartupScript updated way to right Java script JS (Javascript) in code behind also work with update panel

Dear All
RegisterStartupScript is obsolete now the new way that works with update panel  is given below its is code behind file code also

VB Code Dim csname1 As String = "PopupScript"
Dim cstype As Type = Me.GetType()
Dim cs As ClientScriptManager = Page.ClientScript
Dim cstext1 As String = "alert('Your message');"
cs.RegisterStartupScript(cstype, csname1, cstext1, True)

C# Code
String csname1 = "PopupScript";
Type cstype = this.GetType();
ClientScriptManager cs = Page.ClientScript;
String cstext1 = "alert('Hello World');"; cs.RegisterStartupScript(cstype, csname1, cstext1, true);
I hope it will help you also 
Regards  Rashid Imran Bilgrami

Calling LoadLibraryEx on ISAPI filter “C:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet_filter.dll” failed

Dear Readers
if you get the error

Calling LoadLibraryEx on ISAPI filter “C:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet_filter.dll” failed


Here is the solution 
Get a command prompt in administrator mode and go to C:\Windows\Microsoft .NET\FrameWork64\v4.xxx
and run aspnet_regiis -r. This will re-register the right libraries. It has happened twice already to me.
For other frameworks (32 bit or other versions of .net make sure you go to the correct folder (i.e. Framework/v2.xxx, etc.)

xxxx is the the number which is present with the folder name so i suggest you guys to check the folder name in your directory

If "run aspnet_regiis -r" is not working and if you get the error run is not recognized command then just type " aspnet_regiis -r" it will run fine

Reason of problem
Your asp.net frame work has been change may be you have install the lower version on the higher version or may be because of any reason you have register another version in your IIS, in my cas…

Multi Language Website In DNN Or Content Localization in DNN

Dear Readers
Before that when we create the Multi Language website in dnn we always create two portal but with DNN 5.x version you will use the language resource for creating multi language website website

You are facing two major challenges to create Multi language website
1) Translation of the DNN controls in to local language
2) Translate your own pages navigation or menu in to multi languages
3) Translate your own custom content in to local language
4) Translate your custom modules in to the local languages

Lets start with the first challange

Challenge 1: Translation of the DNN controls in to local language 
This is an easiest part, you can follow the steps achieve this challenge

1) Login with your host/Admin  account
2) Go to the Admin / Languages
3) Click on ADD Languages
4) Select the language that you need and Add it
5) You will see now two languages in your language section
6) With the list you will see the three option

Static Resources
System | Host |Site

7) you can click on t…