SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tricky CSS issue. Color text per line?

    I'd like to apply a different shade to each line of text in a series of h2 elements like in the screenshot below:

    text-clip.png

    I had considered using a transparent png overlay with varying degrees of opacity. It works but its not bulletproof when the size of the text changes.

    Can this be done with some fancy new css3?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    I'd like to apply a different shade to each line of text in a series of h2 elements like in the screenshot below:

    text-clip.png

    I had considered using a transparent png overlay with varying degrees of opacity. It works but its not bulletproof when the size of the text changes.

    Can this be done with some fancy new css3?
    I can't see the attachment, but to answer your question about CSS3, no, it doesn't exist. I'll have to wait for the image to further engross your other question(s) . Though from the sounds of it, it doesn't really sound possible (or aesthetically pleasing) to have each line of text have different opacity.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There's a pseudo-element (that has been around since CSS2 I think) called :first-line that would do half the job for you, but unfortunately not the rest.

    You may have to just stick a <span> around each word, then use good old CSS2 to apply your different colours to each word. Probably the least messy solution, especially considering your PNG overlay idea. If it can be done just with text, it's almost certainly preferable!

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    There is a schmancy new CSS thingie that could do similar to what you're thinking, but it's -webkit only last I checked.

    It's called mask. You can take a chunk of text in an element, set a background image, apply the bg image as "mask" and it appears only where the letters appear. You'd have the image be a vertical gradient.

    But we live in the real world where NOT everyone uses webkit, to the apparent dismay of the hippest of web developers (not you, OP, I'm just ranting again)... so I would use two spans.

    <p>For
    <span>Healthy</span>
    <span>Living</span></p>

    The added bonus is instead of relying on limited width to keep the text stacked, you can simply set the p spans to display: block.

    Then you'd
    p {
    top colour;
    }
    p span {
    middle colour;
    }
    p span+span {
    last colour;
    }

    The :first-line thing could work here, but in general it's horrid because browsers like FF get all confuzled when the first characters of the first line aren't alpha-numeric. Or just alpha, I forget.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post

    I had considered using a transparent png overlay with varying degrees of opacity. It works but its not bulletproof when the size of the text changes.
    That's probably what I would have suggested. Use :after to apply an absolute overlay to the relative element and stretch it to fit. It would only work if you knew the number of lines (e.g. for 3 lines of text the image have gradient changes at 33%.3%).

    Or just for fun
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    h2 {
    	width:80px;
    	color:blue;
    	position:relative
    }
    h2:first-line { color:red }
    h2:after {
    	position:absolute;
    	content:"Living";
    	bottom:0;
    	left:0;
    	color:green;
    }
    </style>
    </head>
    
    <body>
    <h2>For Healthy Living</h2>
    </body>
    </html>
    Or:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    h2 {
    	width:80px;
    	color:blue;
    	position:relative;
    	font-size:1.4em;
    	line-height:1.4em;
    	border-bottom:1px solid #000;
    }
    h2:first-line { color:red }
    h2:after {
    	position:absolute;
    	content:"Living";
    	bottom:0;
    	left:0;
    	color:green;
    }
    
    h2 + h2{
    	margin-top:50px;	
    }
    h2 + h2:before{
    	position:absolute;
    	content:"For";
    	top:-1.4em;
    	left:0;
    	color:orange;
    
    }
    </style>
    </head>
    
    <body>
    <h2>For Healthy Living</h2>
    <h2>More Healthy Living</h2>
    </body>
    </html>
    (Not any use though really )

  6. #6
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That's probably what I would have suggested. Use :after to apply an absolute overlay to the relative element and stretch it to fit. It would only work if you knew the number of lines (e.g. for 3 lines of text the image have gradient changes at 33%.3%).
    Yep, that's what I'm going with now and as long as I insert <br/> at the right points inside the text, it works amazingly well.
    (Not any use though really )
    But fun to try.

    I'll be utilizing generated content more and more now that I know how handy it is. I recently discovered it could be used for created a psuedo clipping mask to isolate icons from a base sprite image. Doing it this way eliminates the need to create large gaps in your sprite image to accomodate vertical or horizontal clear zones.


Bookmarks

Posting Permissions

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