Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Unique layer effect - how's it done? 1

Status
Not open for further replies.
TheDemon

TheDemon

Programmer
Joined
Feb 7, 2000
Messages
108
Location
GB
Sort by date Sort by votes
Code: 
<BODY BACKGROUND=&quot;myBackground.gif&quot; STYLE=&quot;background-attachment:fixed&quot;>

Done. Kevin
slanek@ssd.fsi.com

&quot;Life is what happens to you while you're busy making other plans.&quot;
- John Lennon
 
Upvote 0 Downvote
Thats only half the story so far....

The background-inage is fixed but the semi transdparency is created using filters.

Until the release of NS6.1 there were no major browsers other than IE supporting filters but now the new -moz filters are available for ns6 too.

The code used onthe site you highlited is simply

.hilite {filter:light();}
.flipHilite {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0,xray=0,mirror=1,invert=0,opacity=1,rotation=0);}

these classes are then appplied to the layers you wish to have a effect on. Filters can create all sorts of effects but opacity chanegs creating a semi transparent feel is the most common.

The simplest way to do this is

.fade{filter:alpha(opacity=50,enabled=1);

and for ns i think you wouild add

-moz-opacity:0.7

yet again a discrepancy between the big two but since there are currently no standards supporting the use of filters thats not sobad.

for more info checkout


its fairly simple to follow.

hope this helps

rob
 
Upvote 0 Downvote
Rob - thanks for this, m8. It doesn't fully explain how this person managed their semi-transparent layer background, but I need to read more about filters as I know jack about them. This is a great start. The Demon

..:: Visit me at: ..:: Try out: ..:: Subscribe to:
 
Upvote 0 Downvote
Demon, what graphics program are you using? Kevin
slanek@ssd.fsi.com

&quot;Life is what happens to you while you're busy making other plans.&quot;
- John Lennon
 
Upvote 0 Downvote
PSP, PS, FW

I did manage to get halfway there. I created a gif (3x3 pixels) with a blue dot in the middle and made it transparent. I then used that gif as the bgimage for a table cell. Pretty much creates the transparent/mesh background as used on I could go further by creating another similar gif, this time with the cut-away corners, and placing it in the row and table cell directly underneath, ensuring the padding and spacing are set to 0.

Does that make sense? What's your suggestion, Kevin? The Demon

..:: Visit me at: ..:: Try out: ..:: Subscribe to:
 
Upvote 0 Downvote
Sounds like you're on the right track to me. Let me know how it goes. Kevin
slanek@ssd.fsi.com

&quot;Life is what happens to you while you're busy making other plans.&quot;
- John Lennon
 
Upvote 0 Downvote
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question Question
Slight page curl effect
Replies
3
Views
504
ChrisHirst
ChrisHirst
southbeach
  • Locked
  • Question Question
set css for last div layer based on its class
Replies
3
Views
326
southbeach
southbeach
lupidol
  • Locked
  • Question Question
Positioning elements, how do I do it ?!
Replies
2
Views
339
vacunita
vacunita
rekcut01
  • Locked
  • Question Question
Taking input on a hidden text field?? Can it be done??
Replies
9
Views
505
1DMF
1DMF
lupidol
  • Locked
  • Question Question
How do I place an element at the center of its' ancestor?
Replies
5
Views
485
datamasher
datamasher

Part and Inventory Search

Sponsor

Back
Top