"Skinning" html elements

**Blinky the Shark** · Jun 27 '08, 07:18 PM

Re: "Skinning& quot; html elements

Nik Coughlin wrote:

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

>
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

**Nik Coughlin** · Jun 27 '08, 07:18 PM

Re: "Skinning& quot; html elements

"Blinky the Shark" <no.spam@box.in validwrote in message
news:pan.2008.0 5.14.05.05.45.8 56303@thurston. 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

**Blinky the Shark** · Jun 27 '08, 07:18 PM

Re: "Skinning& quot; html elements

Nik Coughlin wrote:

"Blinky the Shark" <no.spam@box.in validwrote in message
news:pan.2008.0 5.14.05.05.45.8 56303@thurston. 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

**Dave Kelly** · Jun 27 '08, 07:18 PM

Re: "Skinning& quot; html elements

On May 14, 12:05 am, Blinky the Shark <no.s...@box.in validwrote:

>

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.

**Gus Richter** · Jun 27 '08, 07:18 PM

Re: "Skinning& quot; html elements

Dave Kelly wrote:

On May 14, 12:05 am, Blinky the Shark <no.s...@box.in validwrote:

>>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

**Jeff** · Jun 27 '08, 07:18 PM

Re: "Skinning& quot; html elements

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="skinCont ainer 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="bottomLe ft">
<div class="bottomRi ght">
<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?

**Nik Coughlin** · Jun 27 '08, 07:18 PM

Re: "Skinning& quot; html elements

"Jeff" <jeff@spam_me_n ot.comwrote in message
news:N-WdnaBTbrkYCK7Vn Z2dnUVZ_qbinZ2d @earthlink.com. ..

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.html/browse_thread/thread/204564297ccd195b

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="skinCont ainer 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="bottomLe ft">
<div class="bottomRi ght">
<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?

"Skinning" html elements

"Skinning" html elements

Comment

Comment

Comment

Comment

Comment

Comment

Comment