Topic: pixel bevel Pages that link to <a href="https://ozoneasylum.com/backlink?for=10883" title="Pages that link to Topic: pixel bevel" rel="nofollow" >Topic: pixel bevel\

 
Author Thread
aroma
Paranoid (IV) Inmate

From: uk
Insane since: Sep 2001

IP logged posted posted 12-22-2002 13:07 Edit Quote

Hey all,
I'm wanting to create a pixel bevel effect for tables using css

so far i have found this but need to create the holder for the text http://www.thk-network.com/e-boredom/tutorials/css/cssbevel/

i would link to an example but i think every1 knows the effect i want to create and the link i wanted has excceded the bandwidth limit!!!!!

Cheers Aroma

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 12-22-2002 17:12 Edit Quote

So...what is the question exactly?

aroma
Paranoid (IV) Inmate

From: uk
Insane since: Sep 2001

IP logged posted posted 12-22-2002 20:39 Edit Quote

after playing around all afternoon i can't seem to get it to work, the questions is, is it possible to create the pixel bevel effect using css??

Cheers

Veneficuz
Paranoid (IV) Inmate

From: A graveyard of dreams
Insane since: Mar 2001

IP logged posted posted 12-22-2002 20:48 Edit Quote

If I've understood you question correctly, something I don't seem to have done, the link you gave the effect you want. Using only CSS it creates a bevel effect... But since that isn't the effect you are looking for would you care to explain it again for silly little me?

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"

aroma
Paranoid (IV) Inmate

From: uk
Insane since: Sep 2001

IP logged posted posted 12-22-2002 21:44 Edit Quote

here's a reference
http://www.thewebmachine.com/photoshop/micro_bevels/microbevel_box_demo.html

I want to create a similar box etc to this in css but obviously using straight lines and not little cut outs like in the demo!!!!!!!

Cheers

Veneficuz
Paranoid (IV) Inmate

From: A graveyard of dreams
Insane since: Mar 2001

IP logged posted posted 12-22-2002 23:13 Edit Quote

The only way I can think of is using one color for the top and left border and then using a darker/lighter shade of the same color on the bottom and right border. That will create a bevel effect and that is the only way I know of to do a bevel with CSS only. The closest I could get to the link you showed using this method was this (works in Mozilla and IE6)...

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 12-22-2002 23:59 Edit Quote

border:1px inset #888;

Bam. "bevel" effect built into CSS. Try also "outset." (Or "ridge" or "groove," or just use separate colors for each border-left, border-top, etc all with "solid.")

[edit: didn't mean to post with old sig]

[This message has been edited by Slime (edited 12-24-2002).]

aroma
Paranoid (IV) Inmate

From: uk
Insane since: Sep 2001

IP logged posted posted 12-23-2002 11:42 Edit Quote

Thanks guys, Veneficuz that looks cool man!!!!
Slime yeah i forgot about outset etc thanks and i like the new sig (although it took me a second glance to realise what it was)

Merry Crimbo guys

Aroma



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu