DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • Redefining DevOps: The Transformative Power of Containerization
  • How to LINQ Between Java and SQL With JPAStreamer
  • Auto-Scaling Kinesis Data Streams Applications on Kubernetes
  • Which Is Better for IoT: Azure RTOS or FreeRTOS?

Trending

  • Redefining DevOps: The Transformative Power of Containerization
  • How to LINQ Between Java and SQL With JPAStreamer
  • Auto-Scaling Kinesis Data Streams Applications on Kubernetes
  • Which Is Better for IoT: Azure RTOS or FreeRTOS?
  1. DZone
  2. Coding
  3. Languages
  4. Drop shadow with CSS for all web browsers

Drop shadow with CSS for all web browsers

Robert Nyman user avatar by
Robert Nyman
·
Mar. 17, 10 · News
Like (0)
Save
Tweet
Share
9.33K Views

Join the DZone community and get the full member experience.

Join For Free

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:

.shadow-bringer { width: 100px; height: 100px; margin: 20px auto; padding: 5px; background: #ffffa2; } .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'); }
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.

CSS Web Service

Published at DZone with permission of Robert Nyman, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • Redefining DevOps: The Transformative Power of Containerization
  • How to LINQ Between Java and SQL With JPAStreamer
  • Auto-Scaling Kinesis Data Streams Applications on Kubernetes
  • Which Is Better for IoT: Azure RTOS or FreeRTOS?

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: