- This topic is empty.
-
AuthorPosts
-
October 5, 2011 at 8:55 pm #34652
jtrusz
MemberHey guys .. new here, have been looking online for a solution for some time, but looking for a way to add a ragged background color to text that spans multiple lines. I dont want a rectangle behind the full text, but just behind each line of text. Is there a preferred method of achieving this ?
Any help would be great.
thanksOctober 5, 2011 at 10:11 pm #88576TheDoc
MemberDo you have a picture of what you’re trying to achieve? Can’t quite picture it.
October 6, 2011 at 1:01 am #88587standuncan
MemberYou can use a small grunge texture and have it repeat as the background of your
tags or heading tags. I think that is what you mean. And if you don’t want it to look too much like a repeating pattern you can look up randomizing multiple background images with CSS3. I think that is what you are asking??
October 6, 2011 at 2:13 pm #88635jtrusz
MemberHey … so the effect I’m looking to do can be viewed here : http://dl.dropbox.com/u/2128494/raggedTitle.png
Hope that makes sense, and is achieveable. Setting it to be the background of a header tag just does a solid rectangle, and not on a per line basis.Hope that makes sense.
thanksOctober 6, 2011 at 2:15 pm #88637chrisburton
Participantline-height should be the fix for that.
Edit: I skimmed too quickly. I see you don’t want the rectangle it outputs.
I think you may need javascript for this. Try lettering.jsOctober 6, 2011 at 2:18 pm #88639TheDoc
MemberAaaahhhh. That’s a little more tricky I think. I have a feeling you might need to use JS. I would try to find a site that is doing the same thing and see what they are doing.
October 6, 2011 at 2:21 pm #88640chrisburton
Participant@thedoc I spoke before refreshing and see that we both came to the same conclusion. So again, I would say use lettering.js
October 6, 2011 at 3:11 pm #88643October 6, 2011 at 8:51 pm #88664jtrusz
MemberOh thats great … thanks very much !! Some cliping happening on the decenders, but can probably sort that out. Thanks again ! You guys rock.
November 29, 2011 at 5:29 am #91483jtrusz
MemberSo this works well … however if the text spans multiple lines it sits flush to the left side. Is there anyway (i assume not) through CSS to keep padding on multiple lines. If i add padding to the span, it includes it at the start of the first line, and the end of the last line.
thanks guys !December 13, 2011 at 10:47 pm #92662kooka
MemberHi mate… the test link is not up anymore…
What solution did you end up using?cheers
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.