homepage Welcome to WebmasterWorld Guest from 54.145.209.80
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Shadow Effect
CSS based shadow effect on span element
epiphyte

5+ Year Member



 
Msg#: 3739629 posted 10:36 am on Sep 6, 2008 (gmt 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.

 

csuguy

5+ Year Member



 
Msg#: 3739629 posted 12:01 pm on Sep 6, 2008 (gmt 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.

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3739629 posted 1:19 pm on Sep 6, 2008 (gmt 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

epiphyte

5+ Year Member



 
Msg#: 3739629 posted 5:37 pm on Sep 6, 2008 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved