Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Alternative to basic text highlight effect?

    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.

    Alternative to basic text highlight effect?-knockout_example.jpg

    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

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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/
    Last edited by Sammy12; 09-11-2012 at 01:41 AM.

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sammy12,

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

    Hats off to you!

    Cassidy


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •