|
CSS - Grayscale Image Made Colour By Alpha Channel?
Is it possible to overlay a colour onto a grayscale image to make it that colour with css? Such as using the alpha channel? Image in question would be a transparent background gif file.
Similar TutorialsHi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Hi all, newbie here. I have an image I want to use as a background. I want this image to slowly fade to black at the bottom (or blue, or green, or whatever, to be decided later). Can I do this in pure CSS? To be more specific, the image is a relatively small one in the middle of the page, and will fade to black which will continue down the page. Do I need to use javascript/jQuery to do this? Because I'd rather not, I'm not familiar with them and it will probably be too much effort. I have tried making the image transparent and having a background gradient white to black behind it, but that doesn't look right (obviously, since I need 0% transparency of the image at the top and 100% at the bottom). Thanks for any and all help! Is there a way to get it so that if images dont load, then it shows a background colour I tired using both colour an image, but it didn't work Code: background: url(images/background.png); background:#000000; The reason i'm asking is when i'm at college, i have images disabled, and because i used white text, i have to highlight the text in order to read it Is there a way to do this Dear all, I have an iframe of variable width (width="100%") and a fixed height. Within the iframe I show multiple divs containing calendar appointments. Quite often, the number of divs that are side by side causes the iframe to scroll horizontally, which is fine, but when I scroll to the right I lose my background image and colour in the portion that wasnt visible when the page loads. If I reduce the screen size down, and refresh, then expand again, the area of the iframe that appears has a white blank background. Is there any way around this? Many thanks, Mark Hi guys, Is it possible in CSS to change the colour / image of the page background dynamically. So that as you hovered over different links , the background of the page changed. I know you can do this in JS but how would you do it in CSS? I was kinda thinking something like: a.linkname:hover, a.linkname:focus body { background-color:#00FF00; } but thats just a guess and doesnt work lol. Many Thanks, Alvin. hi | i'm setting alphas and this code: filter:alpha(opacity=50); is working fine on: IE on a PC IE on a MC Mozilla on a PC Mozilla on a MAC but it doesn't work on: FireFox on a MAC Safari on a MAC is the filter tag not supported by these 2 browsers? anyone have any suggestions? any help is greatly appreciated. thanks. fu-meng. Well, I have a couple png images that are using a transparent background. As most of you probably know, it looks great in every browser except IE for the PC. It looks like complete *** in that browser. Now I looked all over the net for a fix for this and found this in Microsoft's library of fixes for their products and found the AlphaImageLoader. Tried using their own code and the same code I found on a dozen other sites and it still isn't loading the transparency, so I'm just curious what I am doing wrong. Here is the code: Image HTML Code: <div id = "welcome_image"> <img src = "/testing/inertia/images/home/welcome.png" alt = "Welcome" /> </div> Image CSS Code:
#welcome_image
{
position: absolute;
top: 10px;
left: 10px;
width: 168px;
height: 216px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/testing/inertia/images/home/welcome.png", sizingMethod="scale");
}
is there any way to have the background of a table be at 50% opacity and the text be at 100% opacity? i've been playing with this code: style="filter:Alpha(Opacity=xx)" ...where xx is 50 or 100 and have placed it within the <table> tag and also within a <font> tag, but nothing seems to work. the font wants to be the same opacity as the table. is there any way around this? on a possible workaround, i've tried using semi-transparent PNG file as the background of the table, and that didn't work. i couldn't get the PNG file to do semi-transparent. it wanted to do a diffusion transparency, which looked like @ss. Hello, im new to this forum ( A pleasure to meet everyone! ) I was browsing through the forum and could not find exactly what my problem is. I am trying to make a filter for my CSS code with the dropshadow effect on text. Eg: .content { color: White; text-align:justify; line-height:12px; font-family:tahoma,arial narrow,arial; font-size:9px; Filter: Alpha(Opacity=70) DropShadow(Color=#8F5A3A, OffX=1, OffY=1, Positive=1); } The problem is its just not working Its hard for me to get the colors correct to begin with because of the BG the text is on. But If I could get the Alpha(Opacity) to work with the DropShadow the text will be significantly more visible and would work fine. Any suggestions? or Solutions? Keep in mind im NOT very knowledgable in a lot of new things yet Help much appreciated- Thanks a lot! Hiya, been playing around with trans PNGs and appreciate Firefox more and more with each passing hour!! What's the best way to get PNGs with alpha channel transparency to work in IE6, so far I've tried the .htc script mehod which works OK, except, on my PC it asks if I want to execute the script each time I open or refresh the page. Don't know if it would do this on my web server and haven't tried it yet. Is there another equally straight forward way to deal with this? I thought about browser sniffing and then giving IE6 a nasty transparent GIF and everything else a PNG. What does everyone else think? John. I have an image link which I want to display at 50% opacity and when the user hovers over it I want it to be 100%. My code doesnt seem to be working tho? Please could someone help me... <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- .fadein { } a.fadein { filter: alpha(opacity=50); } a.fadein:link { filter: alpha(opacity=50); } a.fadein:hover { filter: alpha(opacity=100); } --> </style> <head> </head> <body> <a href="gfdg.html" class="fadein"><img src="First.gif" width="257" height="130" border="0"></a> </body> </html> If I set a height for my LIs, then IE does not increment the list item. It shows a. a. a. a. instead of a. b. c. d. Actually it's the same for any list-style-type. It never increments the list-type, even when it's just the default style. I couldn't find any other mention of this anywhere. Does anybody know what causes this bug, or if there's a way to fix it? Here is some code to reproduce: Code:
/* CSS */
#qform ol {
list-style-type:lower-alpha;
}
#qform ol li {
color:#333;
height:25px;
margin:10px 0;
padding:0 0 0 20px;
}
#qform ol li input {
margin:3px 5px 0 0;
}
#qform ol li label {
margin:0;
}
<!-- HTML -->
<form id="qform" action="index.php" method="post">
<fieldset>
<ol>
<li>
<input type="radio" id="rada" name="answer" value="a" /><label for="rada">Once</label>
</li>
<li>
<input type="radio" id="radb" name="answer" value="b" /><label for="radb">Twice</label>
</li>
<li>
<input type="radio" id="radc" name="answer" value="c" /><label for="radc">Three Times</label>
</li>
<li>
<input type="radio" id="radd" name="answer" value="d" /><label for="radd">A Lady</label>
</li>
</ol>
<input type="submit" value="OK" />
</fieldset>
</form>
In IE6, that will display a list with a, a, a, a. Remove the height from #qform ol li and it works as it should. Thanks, I'm working on a site that's a single php page with CSS file. The site uses the same rotating image script, in 2 locations. In the one location, it rotates the background image of a div. I've set the opacity to 0.7, alpha filter at 70. This is working properly - it is affecting the opacity of the background image as I want. The problem is that it is also affecting the opacity of static images that are contained within that same div. Any ideas on how I can keep the opacity of the rotating background image, without affecting the opacity of the static images that are on top of the background? Site is triple-w . visitchester . ca Relevant code he FROM INDEX.PHP (IT'S THE JPG'S IN THE BIZCARDS FOLDER THAT I WANT TO BE SOLID) <div id="rotator2" style="background-image:url(link to rotate2.php); opacity:0.7; filter:alpha(opacity=70); padding-top:20px;"> <a href="link here" target="_blank"><img src="bizcards/mecklenburghinn.jpg" height="170" width="207" style="border:#FFF; margin-left:5px; border-style:double;" /></a> <a href="link here" target="_blank"><img src="bizcards/ropeloft.jpg" height="170" width="207" style="border:#FFF;border-style:double; " /> <img src="bizcards/banner3.jpg" height="170" width="207" style="border:#FFF;border-style:double;" /> <img src="bizcards/banner4.jpg" height="170" width="207" style="border:#FFF;border-style:double;" /> </div> FROM MAIN.CSS: #rotator2 { width: 900px; height: 655px; font-family:"Courier New", Courier, monospace; font-size:16px; color:#FFF; } Thanks in Advance! Regards, ChesterNerd I'm sure this can be fixed... But I'm not sure how! I was doing the final adjustments and cross-browser tweaking when I stumbled upon this issue... I'm using a CSS with the following background tag: Quote: background: #E8E9EA url(img/test.png) repeat-x 0 8px; My PNG is 32bits, and of course, this works OK in Firefox, etc.. But not in MSIE! ( tested under 6.0.2900.x ) - Instead of correctly blending the PNG with the table background, it displays full white rects as backgrounds. I tried a few ms-ie "holy" fix scripts, etc. None of them worked on this special case. Any ideas?. I wouldn't like to work-around this one... Thanks. I have a problem involving the ie only filter alpha(). My problem is that any <div> that is nested inside another becomes clipped, see example: Code: <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
#inBusinessHolder {
position: relative;
}
div.inBusinessBox {
display: block;
filter: alpha(opacity=80);
position: absolute;
width: 250px;
height: 80px;
border: 1px solid black;
background: #cff;
}
</style>
</head>
<body>
<div id="inBusinessHolder">
<div class="inBusinessBox" style="top:70px;left:100px;">text</div>
<div class="inBusinessBox" style="top:140px;left:110px;">text</div>
<div class="inBusinessBox" style="top:210px;left:120px;">
text
<div class="inBusinessBox" style="top:10px;left:-10px;background:#cf6 z-index:1000">text</div>
</div>
</div>
</body>
</html>
Anyone got any ideas? It's like the parent container is behaving like a clipping rectangle! Is there Opera compatible code for filter:alpha or -moz-opacity? The first ever fully integrated CSS expanding/collapsing menu is here, get them while they are hot!! Ok, ok, maybe that was a bit over the top but, hey what can one do? Heh! I have finally finished it, if the actual coding can be improved and such, please feel free to critique. Code: <HTML><HEAD><BASE taget="menu"><STYLE TYPE="text/css"><!--
table {display: block; border-color: #B0C4DE; border-style: inset; border-width: 10px; position: absolute; top: 75px; left: 20px;}
a:link {}
a:visited {}
a:hover {}
a:active {}
a {display: block; font-family: arial; font-size: 12px; color: #FFFF00; text-align: center; cursor: pointer; text-decoration: none; border-color: #B0C4DE; border-style: outset; border-width: 4px; padding: 2px 15px 2px 15px;}
.main:hover {color: F5F5F5; background-color: #B0C4DE; border-style: inset; border-width: 1px;}
.show:hover a.sub1, .show:hover a.sub2, .show:hover a.sub3, .show:hover a.sub4, {display: block;}
a.sub1:hover, a.sub2:hover, a.sub3:hover, a.sub4:hover {color: #F5F5F5; background-color: #B0C4DE;}
a.sub1, a.sub2, a.sub3, a.sub4 {display: none;}
//--></STYLE></HEAD><BODY bgcolor="#778899"><TABLE><a href="#" return false;><tr><td>
<DIV CLASS="show"><DIV CLASS="main"><a href="#" return false;><B>Main 1</B></a></DIV>
<a CLASS="sub1" href="Doc1.html" target="docView">S1</a>
<a CLASS="sub1" href="" target="docView">S2</a>
<a CLASS="sub1" href="" target="docView">S3</a>
<a CLASS="sub1" href="" target="docView">S4</a>
<a CLASS="sub1" href="" target="docView">S5</a></DIV>
<DIV CLASS="show"><DIV CLASS="main"><a href="#" return false;><B>Main 2</B></a></DIV>
<a CLASS="sub2" href="" target="docView">S1</a>
<a CLASS="sub2" href="" target="docView">S2</a>
<a CLASS="sub2" href="" target="docView">S3</a>
<a CLASS="sub2" href="" target="docView">S4</a>
<a CLASS="sub2" href="" target="docView">S5</a></DIV>
<DIV CLASS="show"><DIV CLASS="main"><a href="#" return false;><B>Main 3</B></a></DIV>
<a CLASS="sub3" href=""urn false;>S1</a>
<a CLASS="sub3" href="" target="docView">S2</a>
<a CLASS="sub3" href="" target="docView">S3</a>
<a CLASS="sub3" href="" target="docView">S4</a>
<a CLASS="sub3" href="">S5</a></SPAN></SPAN></DIV>
<DIV CLASS="show"><DIV CLASS="main"><a href="#" return false;><B>Main 4</B></a></DIV>
<a CLASS="sub4" href="#" return false;>S1</a>
<a CLASS="sub4" href="" target="docView">S2</a>
<a CLASS="sub4" href="" target="docView">S3</a>
<a CLASS="sub4" href="" target="docView">S4</a>
<a CLASS="sub4" href="" target="docView">S5</a></DIV></td></tr></a></TABLE></BODY></HTML>
Hello, I am trying to do a div box with a border made out of 4 blue pixels, and 2 black pixels. I tryied doing it at follows (which works), however I was wondering if there was a more simple solution... my current implementation for this required me of having to put two inner div's. I called one div outer, and the other one inner. The outer div has a border of 4 pixels solid blue, and the inner div has a border of 2 pixels solid black. the html code is as follows: Code:
<div class="mydiv">
<div class="outer">
<div class="inner">
Hello, World!
</div>
</div>
</div>
My question is whether there is any way to do this using one single div? regards, sim085 check this out, philistines LOL: Wiggles the Wonderworm not my design, but I think you'll agree how excellent it is. I'm having trouble with my list on a site im working on. When you hover over the link, I want it to display a background colour the full width of the box, not just the length of the text. You can see the menu, on the left hand side - HERE. Here's the CSS of the list. Code: div #leftcontent {
padding-left: 0px;
padding-top: 0px;
display: block;
font-size:90%;
font-family:Arial, Helvetica, sans-serif;
}
#leftcontent a {
text-decoration:none;
padding:0px;
color:#000066;
}
#leftcontent a:hover {
text-decoration:none;
background-color:#66CCFF;
background-color-width:30px;
}
#leftcontent ul{
margin: -10px 10px 2px 5px;
padding: 0;
list-style: none;
}
#leftcontent li a{
margin: 0 0 .5em 0;
padding: 2px 5px 5px 0px;
line-height: 1.4em;
font-size:100%;
color:#FFFFFF;
}
Any help is appreciated. Cheers. __________________ ULTRASUK |
|||||||