How can i make this text background with css only?

almost 8 years ago from Viktor Geringer, Webdesigner/Webdev

http://fs1.directupload.net/images/150519/dr3hdo5n.png

13 comments

Adam Brace, almost 8 years ago
When did DN become Stack Exchange?
8 points
- Adam T., almost 8 years ago
  This is a good thing
  5 points
  - Adam Brace, almost 8 years ago
    It's cool but I can see this getting abused so fast. I don't think the intention of Designer News is to provide people with a platform to get CSS problems solved
    3 points
    - Kyle Mitchell, almost 8 years ago
      i dunno, there's an icon for CSS ... so I'm not sure it's outside of the realm of DN.
      1 point
Matt Coady, almost 8 years ago (edited almost 8 years ago )
Here's one way of doing it. There's probably better ways but it give the right effect. It won't grow with the text so you'll have to adjust the height and top properties accordingly:
http://jsfiddle.net/y4Lae2r9/
edit
Here's a better variation using gradient backgrounds (see the second solution):
http://jsfiddle.net/y4Lae2r9/2/
It doesn't require positioning like the first method and it'll grow with the text size and follow the text over multiple rows.
4 points
- Ian Williams, almost 8 years ago
  Damn! I was trying to figure out the text wrapping thing on my own site. Thanks!
  2 points
  - b. briel, almost 8 years ago
    Absolutely in love with the typefaces you're using here. Is this site already live?
    2 points
    - Ian Williams, almost 8 years ago
      No but thank you :) It will be soon and I'll post it on DN.
      0 points
b. briel, almost 8 years ago
I'd use the :after selector, which is very useful and let you keep a clean HTML.
Example: http://codepen.io/anon/pen/MwePJp
3 points
- Luke Clark, almost 8 years ago
  I reached a similar outcome.
  http://codepen.io/ljcl/pen/KpMGag
  You're going to have a problem if your highlight effect spans more than two rows of text though.
  3 points
  - b. briel, almost 8 years ago
    Yes, your solution is actually nicer for long paragraphs. :)
    1 point
Aiden Guinnip, almost 8 years ago (edited almost 8 years ago )
A couple weeks ago I made this using the pseudo elements method as well!
http://aidenguinnip.com/labs/highlighted-quote/
0 points
- Jan Lehtinen, almost 8 years ago
  This is nice, going to use similar effect in one of my projects.
  0 points

Join Us

Login to Comment

Register Today