Welcome to WebmasterWorld Guest from 54.147.220.66

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)

5+ Year Member



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 Sep 6, 2008 (gmt 0)

5+ Year Member



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 Sep 6, 2008 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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 Sep 6, 2008 (gmt 0)

5+ Year Member



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.