Log In Sign Up

Does anybody know


Forum: Graphic and Web Design

Notices

Welcome to the JustMommies Message Boards.

We pride ourselves on having the friendliest and most welcoming forums for moms and moms to be! Please take a moment and register for free so you can be a part of our growing community of mothers. If you have any problems registering please drop an email to boards@justmommies.com.

Our community is moderated by our moderation team so you won't see spam or offensive messages posted on our forums. Each of our message boards is hosted by JustMommies hosts, whose names are listed at the top each board. We hope you find our message boards friendly, helpful, and fun to be on!

Reply Post New Topic
  Subscribe To Graphic and Web Design LinkBack Topic Tools Search this Topic Display Modes
  #1  
May 6th, 2009, 01:17 PM
Kilikina's Avatar Mega Super Mommy
Join Date: Sep 2005
Location: Calgary, Alberta, Canada
Posts: 1,700
Send a message via MSN to Kilikina
How this look is acheived.... I mean the opacity that is below the menu on this website? http://www.lifestylehomes.ca/

I would really like to do something like this on a site. I saw it once also as a menu that you could see the background image through the menu.

Any ideas? Is it css?
__________________

"Splish splash I was taking a bath!"

I design custom photo cards and websites. For more
information please check my 2 websites:
http://www.designsbykristina.ca
http://www.q1media.net
or send me an email: kduverna@q1business.net




Reply With Quote
  #2  
May 6th, 2009, 03:44 PM
CeiCei's Avatar Platinum Supermommy
Join Date: Jul 2005
Location: Mobile, Alabama
Posts: 9,482
Send a message via AIM to CeiCei Send a message via MSN to CeiCei Send a message via Yahoo to CeiCei
You can accomplish this by using the following in your css

/Internet Explorer uses the following. To set the value use 0 to 100/

filter:alpha(opacity=x);

/Firefox uses the following. To set the value use 0.0 to 1.0/

opacity:x;

It's best to put the area you want on top of the background in a div...example

div.textbox {
filter:alpha(opacity:60);
opacity:0.6;
}


You can accomplish this by using the following in your css

/Internet Explorer uses the following. To set the value use 0 to 100/

filter:alpha(opacity=x);

/Firefox uses the following. To set the value use 0.0 to 1.0/

opacity:x;

It's best to put the area you want on top of the background in a div...example

div.textbox {
filter:alpha(opacity:60);
opacity:0.6;
}
__________________
Kassia's Blog | Kassia's Family Blog | In My Purple Passion | The Food Travel Enthusiast




My Three Princes: Cordell (23 y/o), Ernest (5 y/o), Robert (4 y/o)

Reply With Quote
  #3  
May 6th, 2009, 07:52 PM
CeiCei's Avatar Platinum Supermommy
Join Date: Jul 2005
Location: Mobile, Alabama
Posts: 9,482
Send a message via AIM to CeiCei Send a message via MSN to CeiCei Send a message via Yahoo to CeiCei
I had to wait to get home in order to give you an example of how to make things transparent.

Transparency Test

Here is the way it was done

CSS File:
Quote:
body {
background-color:#ffffff;
font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#6D006D;
background-image:url(images/star_trek05.jpg);
}
div.textbox {
/*Used for IE browsers. Value is set from 0 to 100*/
filter:alpha(opacity=50);
/*Used for Firefox browsers. Value is set from 0.0 to 1.0*/
opacity:0.5;
width:300px;
height:500px;
background-color:#65FEFE;
position:relative;
top:200px;
left:700px;
font: bold 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#000000;
}
The HTML page:
Quote:
<div class="textbox">
This is where your text will go.


</div>
I hope that helps you.
__________________
Kassia's Blog | Kassia's Family Blog | In My Purple Passion | The Food Travel Enthusiast




My Three Princes: Cordell (23 y/o), Ernest (5 y/o), Robert (4 y/o)


Last edited by CeiCei; May 6th, 2009 at 07:56 PM.
Reply With Quote
  #4  
May 6th, 2009, 09:06 PM
Kilikina's Avatar Mega Super Mommy
Join Date: Sep 2005
Location: Calgary, Alberta, Canada
Posts: 1,700
Send a message via MSN to Kilikina
cool thanks ceicei. I will be trying that out in a new design soon.

What do you think would be different inf you are using in a unodered list menu?

Sorry for all the q's. I am just realizing lately how little I really do know in css and how much I need to learn. So much fun.
__________________

"Splish splash I was taking a bath!"

I design custom photo cards and websites. For more
information please check my 2 websites:
http://www.designsbykristina.ca
http://www.q1media.net
or send me an email: kduverna@q1business.net




Reply With Quote
Reply

Topic Tools Search this Topic
Search this Topic:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off



All times are GMT -7. The time now is 03:14 AM.



Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
Search Engine Optimization by vBSEO 3.6.0