CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

New Member - Transparent/See through header?


Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old February 3rd, 2013, 05:18 PM
sw0800 sw0800 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2013
Posts: 4 sw0800 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 59 m 54 sec
Reputation Power: 0
New Member - Transparent/See through header?
So I'm thinking of doing a header like the one seen in this site.

http://www.i-am-tiago.com

As you can see the header (part where he puts all his links to contact him and such) is kinda see though/transparent. Can be seen as you scroll down the page you can still see a little bit of the other parts of the page underneath the header. I've been looking at the code and nothing in the CSS, to me at least suggests how this is achieved.
I'm just not seeing it. Does any one know how this is done? Is it in CSS or via his java script?


Code:
/* -------- Header -------- */
DIV.header{width:100%;height:104px;text-align:center;background:transparent url('../images/headerbg.png') repeat-x; position:fixed;z-index:2;}
DIV.head{width:975px;height:107px;margin:0 auto;}
DIV.logo{float:left;}
DIV.logo A.logo IMG{margin:24px 0 0 39px;border:none;}
DIV.nav{margin:0;float:right;}
DIV.nav UL.navbar{margin:0;padding:0;}
DIV.nav UL.navbar LI{list-style:none;width:145px;float:left;background:transparent url('../images/navlibg.png') repeat-y left;}
DIV.nav UL.navbar LI A{text-decoration:none;font:normal 24px 'YanoneKaffeesatzRegular',arial,sans-serif;color:#ffffff;text-transform:uppercase;padding:36px 0 36px 0;margin:0 0 0 2px;display:block;}
DIV.nav UL.navbar LI A:hover{background-color:#e4563a;}


Thanks!
Reply With Quote
  #2  
Old February 5th, 2013, 03:13 PM
Manfred Manley Manfred Manley is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2013
Posts: 7 Manfred Manley User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 4 m 58 sec
Reputation Power: 0
Quote:
Originally Posted by sw0800
So I'm thinking of doing a header like the one seen in this site.

http://www.i-am-tiago.com

As you can see the header (part where he puts all his links to contact him and such) is kinda see though/transparent. Can be seen as you scroll down the page you can still see a little bit of the other parts of the page underneath the header. I've been looking at the code and nothing in the CSS, to me at least suggests how this is achieved.
I'm just not seeing it. Does any one know how this is done? Is it in CSS or via his java script?


Code:
/* -------- Header -------- */
DIV.header{width:100%;height:104px;text-align:center;background:transparent url('../images/headerbg.png') repeat-x; position:fixed;z-index:2;}
DIV.head{width:975px;height:107px;margin:0 auto;}
DIV.logo{float:left;}
DIV.logo A.logo IMG{margin:24px 0 0 39px;border:none;}
DIV.nav{margin:0;float:right;}
DIV.nav UL.navbar{margin:0;padding:0;}
DIV.nav UL.navbar LI{list-style:none;width:145px;float:left;background:transparent url('../images/navlibg.png') repeat-y left;}
DIV.nav UL.navbar LI A{text-decoration:none;font:normal 24px 'YanoneKaffeesatzRegular',arial,sans-serif;color:#ffffff;text-transform:uppercase;padding:36px 0 36px 0;margin:0 0 0 2px;display:block;}
DIV.nav UL.navbar LI A:hover{background-color:#e4563a;}


Thanks!


The transparency is in the .png he's using for the background of the header class. "../images/headerbg.png".

If you make a .png in photoshop or whatever with 50% opacity, it can display that transparency in a web browser so you get that effect.
Reply With Quote
  #3  
Old February 5th, 2013, 04:17 PM
sw0800 sw0800 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2013
Posts: 4 sw0800 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 59 m 54 sec
Reputation Power: 0
Thanks for that advice!! I was coming to that conclusion as well.

However now when I try to do this in photo shop, I make an image, I delete the white background layer and make a new layer that has opacity of 50%. Then I save it and put it into my code it still does not show up as "see through". Any more advice?

I researched a lot on how to make a transparent PNG and have even saved my file for the web and kept the transparency option. I'm still stuck...
Reply With Quote
  #4  
Old February 5th, 2013, 06:57 PM
aeternus's Avatar
aeternus aeternus is offline
For POny!
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2012
Location: Amsterdam
Posts: 416 aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114
make sure its a png and not a jpg.

Are you sure your image is transparent? because all this tiago does is indeed use a transparent png. nothing more
(http://www.i-am-tiago.com/images/headerbg.png)
__________________
PHP Tutorial
Reply With Quote
  #5  
Old February 5th, 2013, 07:49 PM
sw0800 sw0800 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2013
Posts: 4 sw0800 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 59 m 54 sec
Reputation Power: 0
Quote:
Originally Posted by aeternus
make sure its a png and not a jpg.

Are you sure your image is transparent? because all this tiago does is indeed use a transparent png.


Thanks for looking at this both of you, I figured out what was the problem, in my own code I had a z index error that wasn't allowing me to see the changes I was making and I was editing the wrong image.

But it's good to know that the transparency doesn't come from the css it can simply come from how you make your image!
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > New Member - Transparent/See through header?

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap