Ambiance Pro Demo Photos

Community Forums Forums Design Tips and Tricks Ambiance Pro Demo Photos

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  paulsibley 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #106993

    jsavage
    Participant

    Hello,

    Can someone please direct me to a photoshop tutorial that explains how to achieve the same effect in photos included in the Ambiance Pro demo?

    The main aim is to replicate the style of photo in the demo whilst ensuring that the white text appears over any photo without getting drowned out by any white in the background.

    Thank you,

    http://www.japanbnl.com/
    #107103

    paulsibley
    Participant
    Post count: 8

    Not sure what to suggest for the photographic style; maybe look for vintage/retro tutorials as a starting place.

    A couple of suggestions to try and stop white text from being drowned out by any white in the background:

    I’m a long long way from being an expert with this stuff, so please bear that in mind if you make changes based on my suggestions – backups would be a good idea.

    I’ve added a drop-shadow effect on mine, which works nicely, but may not be fully cross-browser compatible.

    Look for this CSS:

    .ambiance-grid .entry-title a,
    .ambiance-grid .entry-title a:hover {
    	color: #fff;
    	display: block;
    }

    Add this:
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.7);

    Or you could try adding an opaque background:

    Same CSS, but add this instead:
    background: rgba(0, 0, 0, 0.5);

    The latter of those might be more cross-browser friendly; but I much prefer the neater drop-shadow – and I think it will only be IE that has a problem with it.


Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.