Challenging highlight style ;-)
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
112,420,400,860 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
13 Responses
Totally doable (assuming this is markup highlight via <em> or <strong> rather than user selection). Just set a tileable bg image then use before:/after: to generate an element to use for your caps (also bg image). :)
about 2 years ago
But if it happens to span multiple lines?
about 2 years ago
Not sure about that. Might still work if the bg image height is the same as the line-height and you use display: inline-block; for the highlight element (although that might prevent the wrapping).
Of course, I'm doing what I loath: recommending a solution I don't absolutely know to work.
about 2 years ago
You've posted this here so someone solves it, right? ;)
about 2 years ago
I've done something similar with padded background colours on the banner on the activehotels.com homepage. Sure it could be adapted to use images instead.
about 2 years ago
@partiallyblind is sat next to me, virtually telling me he's sorted it and I have to try harder to stump him. He has thrown down the gauntlet! ;-)
about 2 years ago
If it spans multiple lines should be doable .. make it a PNG with transparency. Might need an extra element to wrap a LHS border on it .. could be done I think.
about 2 years ago
Wait, alcohol affects my ability to drive?
WHY DID NOBODY TELL ME THIS?
about 2 years ago
Easily achieved if inline or inline-block?
about 2 years ago
not the easiest on the eye but in principle this example will work in most browsers (not IE 7 and earlier): http://dl.dropbox.com/u/58678/experiments/highlighter/index.html
about 2 years ago
Drew – who said anything about alcohol? This is for the page about ohol.
Cole – great! Except the ends of each line need to not be cut off. Anyway, no worries as our devs have it sorted ;-) Thanks tho!
about 2 years ago
Care to share what the devs came up with.
almost 2 years ago
Found it on the prototype site - unfortunately I can't use that as I don't know the width of the box.
almost 2 years ago