Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Contours around text in dreamweaver?
- Thread starter lia77
- Start date
- Sort by reaction score
Hi!
On the first page of my website I have 5 questions placed above a background image. (www.thedreamdayproject.com) 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!
Lia
On the first page of my website I have 5 questions placed above a background image. (www.thedreamdayproject.com) 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!
Lia
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.
-jim
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.
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.
-jim
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.