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

Faded images?

Discussion in 'Off Topic' started by Matthew2D, May 2, 2012.

  1. Matthew2D

    Matthew2D Active Member

    How would I make a image faded? Thanks.
     
  2. Floris

    Floris Guest

    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
     
  3. Matthew2D

    Matthew2D Active Member

    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.
     
  4. Floris

    Floris Guest

    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)
     
  5. Saeed

    Saeed Well-Known Member

    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;
    }
     
  6. Matthew2D

    Matthew2D Active Member

    I use the custom node addon...
     
  7. Brentnauer

    Brentnauer Well-Known Member

    It should still apply.
     

Share This Page