• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Faded images?

F

Floris

Guest
#2
In Photoshop for example you can apply a mask to the layer, assuming it's not locked as a background image, and/or on top of a transparant layer. Then use a gradient tool set to black to transparant. And drag over the area from one direction to the other to apply the gradient (on the mask) and you will see what it deletes (and not). Creating a faded image that overlays in the browser on the background color or another image. Giving the faded effect.

Screen Shot 2012-05-02 at 2.20.35 PM.png

If you mean faded as if time has passed, of their opacity has changed. You can basically do the same, minus using the gradient or a mask. Just change either the saturation of the layer to fade the colours to grayscale, or change the layer opacity to whatever you want (making it basically transparant as a whole, and sometimes that makes them look faded)

I don't quite understand what you mean specifically, if the above isn't helpful please be more specific so we can be more specific.

If you mean an existing image, with CSS3, you want to use opacity with a value between 0.1 and 1 :: http://www.w3schools.com/css/css_image_transparency.asp
 

Matthew2D

Well-known member
#3
I'm trying to make forum icons, for my new forum. Each forum has a different icon. I want one icon to be not faded and the other to be faded.
 
F

Floris

Guest
#4
I would use the state to determine to use css opacity to a single image, or from the sprite. Rather than having multiple images.

To change an image to look faded I take -5 from saturation to remove a bit of color visually, then change opacity between 40 and 60% (depends on the image)
 

Saeed

Well-known member
#5
This is what I have added to my extra.css. I use only one normal image (unfaded) as the node icon, with the first half of the code below creating the fading effect (for read status) and the second half showing it normal (for unread status).

This code applies to node ID 7.

Code:
.node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
background-image: url("http://path/to/image.jpg");
background-position: 0 0;
background-repeat: no-repeat;
width: 36px;
height: 36px;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
.node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("http://path/to/image.jpg");
background-position: 0 0;
background-repeat: no-repeat;
width: 36px;
height: 36px;
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
}