Member Avatar for dlannetts

Hello, l have a website template done in photoshop cs4, now l have made the template but l want to make it blend to a 0 transparency at the bottom for different page lengths and stuff, does anyone know how this can be done? Thanks :)

  • 4 Contributors
  • 8 Replies
  • 131 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by dlannetts

Dani AI

Generated

Quick practical follow-up for : there are two robust ways to get a bottom fade that behaves well as page height changes — make a proper transparent asset in Photoshop and avoid baking shadows/borders into it, or handle the fade in CSS so it always stretches with content. and pointed you toward gradients; below are safe, concrete alternatives that avoid the common pitfalls you hit (visible baked shadows and halos).

In Photoshop keep the decorative shadow/border on its own layer (or recreate the shadow with CSS). Put only the background artwork into a group, add a layer mask to that group, and paint a top-to-bottom mask gradient (white -> black) so the bottom becomes fully transparent. Export as PNG-24 (or use Export As) with transparency preserved; in Save for Web choose Matte: None to avoid color halos on semi-transparent pixels.

If you prefer CSS (more flexible for variable-length pages), either overlay a fading pseudo-element or use a mask. Example pseudo-element overlay (replace the rgba stops with your page background if you want a color fade):

.container {
  position: relative;
  background: url('bg-tile.png') repeat-y;
}
.container::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 200px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

Modern alternative using masking (good when you want the actual element alpha to fade):

.container {
  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
}

Notes: recreate drop shadows with box-shadow or a separate shadow image so they don't get faded by your mask; test PNG edges against the real page background to catch matte/halo issues; and provide a solid-color fallback for old browsers if needed.

Recommended Answers

All 8 Replies

Member Avatar for Member #334542

I) Edit the layer that you have the background
2) Create linear gradient fill on a shape (up towards down)
3) While giving gradient filll you look into the slider you have
4) click one of the slider that has the color of bottom part and give transparency (opacity) to 0.

Hope this helps!

Member Avatar for dlannetts

I) Edit the layer that you have the background
2) Create linear gradient fill on a shape (up towards down)
3) While giving gradient filll you look into the slider you have
4) click one of the slider that has the color of bottom part and give transparency (opacity) to 0.

Hope this helps!

mmm, this doesn't work to well because l have border and shadows that still appear, instead, sorry about this, how would l make it that the more text l have on my page the longer the page is, so it extends on how much text there is?

Thank you to raja for your quick, easy and straight to the point response, it is much appreciated....

Edited by dlannetts because: n/a
Member Avatar for Member #334542

Are you asking in photoshop (or) about extending text in webpage (HTML)?

Edited by Member #334542 because: n/a
Member Avatar for dlannetts

Are you asking in photoshop (or) about extending text in webpage (HTML)?

well, what l was after is how to make the image right in photoshop so l can latter implement the html, why? how can l do it?

Member Avatar for Veneficae

If you were wanting the bottom of the image to always fade to a transparent, what might be easier is to get your background colour and have it fade to that. Unless your background colour changes, it'll always appear to fade into the colour in all browsers. Do the same in Photoshop. Get the background colour you want, and make that colour the last one (far right) in the gradient you've made. It should now always end with that colour at the bottom. Then you've free to save that portion of the image for the HTML.

To make it extend the longer the page is in HTML, you'll need to have the fading portion of the image in a div, and put it underneath where your content is.

For example:

<div id="content">
<p>
Within this div is the main page content.
</p>
</div>
<div id="footer_img">
<img src="images/filename.jpg" alt="filedesc" />
</div>

There are more elegant ways to do it, but that will work if it's a fixed-width container. I can provide a more detailed solution if you wish.

Edited by Veneficae because: n/a
commented: very helpful... +1
Member Avatar for dlannetts

ehmm, is it me or does this seem almost completely un related, oh and thanks for the help raja and Veneficae +rep for both yous, l am marking this as solved now

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.