Alternative to basic text highlight effect?

cazzzidy · 09-10-2012, 11:48 PM

Hello all,

Love this forum. Thanks for all the great information

I am a designer working on a new website.

We want to use a text knockout effect. Please see the attached illustrator image to see our goals:
- Dropshadow behind text
- Nice even spacing of knockout box around the text, even on linebreaks.

Click image for larger version

Name: knockout_example.jpg
Views: 24
Size: 39.5 KB
ID: 11535

Look at what we've gotten:
http://staging.xhtml-lab.com/workaday/

This is using the highlight parameter, which prevents us from getting a dropshadow or even spacing on line breaks.

Does anyone have any techniques for better executing this design? Thank you very much.

Cassidy

Sammy12 · 09-11-2012, 12:37 AM

Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				background: lightBlue;
			}
			div {
				width: 600px;
				margin: 40px auto;
			}
			.cutout p {
				padding: 4px 12px 2px;
				display: inline-block; *display: inline; *zoom: 1;
				background: #fff;
				-webkit-box-shadow: 2px 2px 3px #666;
				   -moz-box-shadow: 2px 2px 3px #666;
				     -o-box-shadow: 2px 2px 3px #666;
				        box-shadow: 2px 2px 3px #666;
			}
		</style>
	</head>
	<body>
		<div class="cutout">
			<p>Meh close as you're going to get.</p><br />
			<p>Browser support is normal. you can use IE filters</p><br />
			<p>Decided to not use + or :after content for the shadows and line breaks</p><br />
		</div>
	</body>
</html>

IE filters for box-shadow (if you want < IE9 to have shadows): http://css-tricks.com/snippets/css/css-box-shadow/

cazzzidy · 09-12-2012, 02:48 AM

Sammy12,

Thank you so, so much. That code is exactly what I was looking for.

Hats off to you!

Cassidy