Welcome to WebmasterWorld Guest from 54.147.10.12

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Shadow Effect

CSS based shadow effect on span element

     
10:36 am on Sep 6, 2008 (gmt 0)

New User

5+ Year Member

joined:Mar 16, 2007
posts: 4
votes: 0


I'm creating an ajax based data table where users can filter by field. Their filter selections are displayed in span elements and they can click the span element to remove the filter criteria.

I was messing around trying to see if I couldn't create a shadow effect for the filter terms span elements. Figured out a reasonable solution in Firefox but, of course, it didn't work in explorer. Googled around but didn't find much so thought I'd post what I came up with and see if anybody could improve on it.

The less complicated the better and not really interested in image based solutions. Absolute positioning solutions are not useful either because the span elements will be displayed dynamically.

Here's what works in firefox...

<html>
<STYLE TYPE="text/css">
<!--
.inner{
color: black;
background: #CCFF99;
padding: 7px 5px 5px 5px;
margin: -10px 3px 3px -10px;
}
.outer{
background: #D9D9D9;
padding: 0px 3px 3px 0px;
margin: 0px 3px 3px 20px;
border-bottom : 6px solid #D9D9D9;
}
-->
</STYLE>
<body>
<span class="outer">
<span class="inner">True dat</span>
</span>
</body>
</html>

Here's the closest I got in explorer...which is not a viable solution because its fixed width and the filter criteria is variable in length.

<html>
<head>
<style type="text/css">
<!--
.outer{
margin:25px;
width: 60px;
padding:0px 8px 8px 0px;
background:#D9D9D9;
}
.inner{
margin:-8px 0px 0px -11px;
background:#CCFF99;
color:black;
padding:5px 5px 5px 5px;
min-height:0;
height:1px;
position:relative;
}
-->
</style>
</head>
<body>
<span class="outer">
<span class="inner">True dat</span>
</span>
</body>
</html>

You can just copy and paste the code into the testing editors at w3schools.

12:01 pm on Sept 6, 2008 (gmt 0)

Full Member

5+ Year Member

joined:July 26, 2008
posts:265
votes: 0


I'd go with a image + absolute position solution. Just because it's dynamically displayed doesn't make a difference. Make the span have position:relative and base the absolute position off of that.
1:19 pm on Sept 6, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


There are many ways to do this, but this is a simple method that works for FF 2&3, ie6&7, opera9, win safari.


.outer {
background-color:#D9D9D9;
margin:0.4em;
}

.inner {
position:relative;
top:-0.4em;
right:0.4em;
background-color:#CCFF99;
}

Adjust margin and top/right to achieve the desired "shadow" effect

5:37 pm on Sept 6, 2008 (gmt 0)

New User

5+ Year Member

joined:Mar 16, 2007
posts:4
votes: 0


alt131, very neat solution! It's so simple that I'm really surprised I didn't run across it during my google searches. Thanks for sharing.