On Sun, 21 May 2006 07:33:28 +0100 Toby Inkster <us**********@tobyinkster.co.uk> wrote:
| phil-news-nospam wrote:
|
|> Is there anything wrong with doing this intentionally to create effects
|> like the shadows on:
|>
http://linuxhomepage.com/
|
| No, but the OP wasn't doing it intentionally -- he was doing it
| accidentally and seeing some undesired side-effects.
|
| I often use a DIV-within-DIV trick with a little relative positioning to
| create a drop-shadow effect.
|
| <div id=outer>
| <div id=inner>...</div>
| </div>
|
| #outer {
| padding: 0;
| position: relative; top: 3px; left: 3px;
| background: silver;
| }
| #inner {
| margin: 0;
| position: relative; top: -6px; left: -6px;
| background: white;
| border: 1px solid black;
| padding: 0.5em;
| }
For more fun, make the apparently height of the front ("inner" in your IDs)
rise up when the pointer hovers (on browsers that support the necessary CSS
standard to do so). Now, move the point around in the corners and see if
you can make it oscillate. If you applied the hover to the boxes that do
the moving (e.g. hover changes the relative offset), you can do that at 2
of the corners. The fix I use is to wrap one more box around the whole
thing and make everything work from that.
<div id=riser>
<div id=outer>
<div id=inner>...</div>
</div>
</div>
#riser #outer {
padding: 0;
position: relative; top: 3px; left: 3px;
background: silver;
}
#riser #inner {
margin: 0;
position: relative; top: -6px; left: -6px;
background: white;
border: 1px solid black;
padding: 0.5em;
}
#riser:hover #outer {
position: relative; top: 4px; left: 4px;
}
#riser:hover #inner {
position: relative; top: -8px; left: -8px;
}
Actually, I just avoid IDs or classes on the inner 2 DIVs and use
a class on the added one and work it that way:
..riser>* {
padding: 0;
position: relative; top: 3px; left: 3px;
background: silver;
}
..riser>*>* {
margin: 0;
position: relative; top: -6px; left: -6px;
background: white;
border: 1px solid black;
padding: 0.5em;
}
..riser:hover>* {
position: relative; top: 4px; left: 4px;
}
..riser:hover>*>* {
position: relative; top: -8px; left: -8px;
}
Probably won't work in web standards challenged browsers.
One annoying thing about this is one cannot just use CSS to create a
style to an existing single HTML element, such as locally overriding
the style on a page obtained from online. What I would like to see
is an enhancement to CSS in the next version that allows the _effect_
of inserting extra "virtual elements". There would be selectors to
select the specific real element, as well as a specific virtual element
by its index number. Then the above could be done like:
<div class="riser">...</div>
..riser {
virtual-elements: div 2; /* add 2 virtual DIV elements */
}
..riser[1] {
padding: 0;
position: relative; top: 3px; left: 3px;
background: silver;
}
..riser[2] {
margin: 0;
position: relative; top: -6px; left: -6px;
background: white;
border: 1px solid black;
padding: 0.5em;
}
..riser:hover[1] {
position: relative; top: 4px; left: 4px;
}
..riser:hover[2] {
position: relative; top: -8px; left: -8px;
}
--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN |
http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net |
http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
