Contours around text in dreamweaver?

Discussion in 'Web Design and Development' started by lia77, Apr 19, 2009.

  1. lia77 macrumors member

    Jul 23, 2007

    Does anybody know how to create a contour around a text in Dreamweaver?
  2. Me1000 macrumors 68000


    Jul 15, 2006
    Can you provide us with an example of what you're trying to accomplish?
  3. r.j.s Moderator emeritus


    Mar 7, 2007
    Probably CSS, but without an example, we'll never be able to help.
  4. lia77 thread starter macrumors member

    Jul 23, 2007
    On the first page of my website I have 5 questions placed above a background image. ( I have asked a couple of people and they all think the text is a little hard to read. And since the background image is a collage it is difficult to find a colour that stands out enough to make the reading fine.

    So...I somebody told me that it would be better if my orange letters had like a line around them. Now I am wondering how to do that...
    I tried in photoshop and then insert images rther than text but it is alot of work so I wondered if there was a smart short cut to this problem in dreamweaver:)

    Thanks for responding!
    have a good day!
  5. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    The photos are so vivid and dark you might want to add a little transparency to them to make your text overlay stand out more, plus it's a nice looking effect and still maintains the design concept.

    In terms of the border color around each letter in standard text, this isn't as easy as some people think. In graphics, it's easy. Problem with text borders and other glow effects is the good ones are CSS3 or browser specific which means not all browsers render the effect. More specifically, filter effects don't render on Firefox and a few others, for example.

    The only way around this, other than using graphics, is to create two div's and absolutely position them slight offset from each other. Both will contain the same text content, font size and styling, but make each a different color. You can also create a nice shadow effect by using an offset of 2-5px on each axis, use black for the shadow color and apply opacity effects which are available across platform. Not an easy or fun way of doing it, and you can't just position the div's using smaller sizes to show an outline - the browser still scales the font, even when px are used, the kerning might be a little off for example. No easy answer to format text with cool borders and styles easily and across all browsers.


    ps: in PS, make the text a layer, turn on blending options, enable border outline, set to 1px or whatever you want and the color, it's like 2 steps. Not sure what method you used, but it's that easy in PS, all versions.

Share This Page