"Skinning" html elements

Further to my earlier post in alt.html, I ended up preparing these pages:

http://nrkn.com/skinning/

They list different ways to "skin" an HTML element (ie add rounded corners,
drop shadows, various other graphical effects) using images while still
allowing for viewport and text re-sizing.

Anyone know of any other techniques that I've missed?

Any other comments?

Nik Coughlin wrote:

Further to my earlier post in alt.html, I ended up preparing these pages:

http://nrkn.com/skinning/

They list different ways to "skin" an HTML element (ie add rounded corners,
drop shadows, various other graphical effects) using images while still
allowing for viewport and text re-sizing.

Anyone know of any other techniques that I've missed?

I've skinned squirrels. I suppose that's no help.

--
Blinky
Killing all posts from Google Groups
The Usenet Improvement Project: http://improve-usenet.org
NEW --> Now evaluating a GG-free news feed: http://usenet4all.se

"Blinky the Shark" <no.spam (AT) box (DOT) invalid> wrote

Nik Coughlin wrote:

Further to my earlier post in alt.html, I ended up preparing these pages:

http://nrkn.com/skinning/

They list different ways to "skin" an HTML element (ie add rounded
corners,
drop shadows, various other graphical effects) using images while still
allowing for viewport and text re-sizing.

Anyone know of any other techniques that I've missed?

I've skinned squirrels. I suppose that's no help.

Depends, would your technique pass the W3 validation suite? Does it work in
most browsers? :P

Nik Coughlin wrote:

"Blinky the Shark" <no.spam (AT) box (DOT) invalid> wrote in message
newsan.2008.05.14.05.05.45.856303 (AT) thurston (DOT) blinkynet.net...
Nik Coughlin wrote:

Further to my earlier post in alt.html, I ended up preparing these pages:

http://nrkn.com/skinning/

They list different ways to "skin" an HTML element (ie add rounded
corners,
drop shadows, various other graphical effects) using images while still
allowing for viewport and text re-sizing.

Anyone know of any other techniques that I've missed?

I've skinned squirrels. I suppose that's no help.

Depends, would your technique pass the W3 validation suite? Does it work in
most browsers? :P

No, but it can lead directly to dinner.


--
Blinky
Killing all posts from Google Groups
The Usenet Improvement Project: http://improve-usenet.org
NEW --> Now evaluating a GG-free news feed: http://usenet4all.se

On May 14, 12:05 am, Blinky the Shark <no.s... (AT) box (DOT) invalid> wrote:

Anyone know of any other techniques that I've missed?

I've skinned squirrels. I suppose that's no help.

Here in Texas we have possums ( a flat animal that sleeps in the
middle of the road ). They are too thin to skin so we fillet them.

Dave Kelly wrote:

On May 14, 12:05 am, Blinky the Shark <no.s... (AT) box (DOT) invalid> wrote:
Anyone know of any other techniques that I've missed?
I've skinned squirrels. I suppose that's no help.

Here in Texas we have possums ( a flat animal that sleeps in the
middle of the road ). They are too thin to skin so we fillet them.

Thanks for the laugh.

--
Gus

Nik Coughlin wrote:

Further to my earlier post in alt.html, I ended up preparing these pages:

http://nrkn.com/skinning/

In my opinion only variations of the nesting are in practice, practical.
At least for modern layouts.

I'm not at this time reading alt.html, do you have a pointer for that
post so I can look it up.

I had been working on a "Standard Module Format", whereas the same
"block" could be styled as you wish.

It's not that different than yours:

<div class="skinContainer flat">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="left">
<div class="right">
<p>nesting technique</p>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom"></div>
</div>
</div>
</div>

Except I've added an inner wrapper to do the drop shadows, and/or
top/bottom double backgrounds. (I also didn't do the topLeft and
bottomLeft wrappers, but I like that idea.)

I see you can do that (drop shadow) with your left/right classes if
you turn off (not use) the rest. Dropping a shadow on all of it would be
difficult, unless I've missed something.

Also, I wonder if the top container block couldn't be a heading,
since content placed there typically is a heading. You could still have
the nested div inside for corner effects...

Let us (or at least myself) know how this has been working out for you!

I'd like to see more.

Jeff

They list different ways to "skin" an HTML element (ie add rounded
corners, drop shadows, various other graphical effects) using images
while still allowing for viewport and text re-sizing.

Anyone know of any other techniques that I've missed?

Any other comments?

"Jeff" <jeff (AT) spam_me_not (DOT) com> wrote

Nik Coughlin wrote:
Further to my earlier post in alt.html, I ended up preparing these pages:

http://nrkn.com/skinning/

In my opinion only variations of the nesting are in practice, practical.
At least for modern layouts.

Hi Jeff,

Yes, I think in many ways it's the tidiest of the methods but I've also been
using the positioning technique because of not being able to do alpha
transparency in IE6 using the nesting technique (because the alpha image
filter doesn't have any way to position background images etc)

I'm not at this time reading alt.html, do you have a pointer for that post
so I can look it up.

http://groups.google.com/group/alt.h...4564297ccd195b

I had been working on a "Standard Module Format", whereas the same "block"
could be styled as you wish.

It's not that different than yours:

div class="skinContainer flat"
div class="topLeft"
div class="topRight"
div class="top"></div
/div
/div
div class="left"
div class="right"
p>nesting technique</p
/div
/div
div class="bottomLeft"
div class="bottomRight"
div class="bottom"></div
/div
/div
/div

Except I've added an inner wrapper to do the drop shadows, and/or
top/bottom double backgrounds. (I also didn't do the topLeft and
bottomLeft wrappers, but I like that idea.)

I don't quite get what you mean Do you have an url I could have a look
at?

I see you can do that (drop shadow) with your left/right classes if you
turn off (not use) the rest. Dropping a shadow on all of it would be
difficult, unless I've missed something.

I combine everything together so that the drop shadow is part of the box, do
you mean adding drop shadow seperately to the box images?