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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Question about CSS Gradient

    I have a question that's driving me nuts!

    if an element contains 3 lines, the gradient (red-blue or blue-red) should only appear on the third line and not on lines 1 and 2. I been trying to use "child" selector but I'm unable to make it work.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title> Midterm: Background Properties </title>
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    		<style>
    			*{padding:0;margin:0;}
    			html, body {height: 1000px;}
    			body{font:1em/1.5 sans-serif;}
    			h1 {font-size: 1.25em; text-align: center;}
    			ul {list-style:none;}
    			li {padding: 6px 10px; border-bottom: 1px solid #a1a1a1;}
    			.box {
    				width: 320px;
    				background: #eee;
    				margin: 0 auto;
    			}
    			.title {
    				border-bottom: 1px solid #a1a1a1;
    				font-size: 1.5em;
    				padding: 0 5px;
    				color: #fff;
    				background-color: black;
     
    				/* Answer */
     
    				:last-child {
     
    				background-image: -webkit-gradient(
    					linear,
    					left bottom,
    					left top,
    					from(red),
    					to(blue)
    				);
    				background-image: -moz-linear-gradient(blue, red);
    				}
     
     
     
    			}
     
     
     
    		</style>
    	</head>
    	<body>
     
    		<br />
    		<h1> A one-line title: </h1>
    		<div class="box">
    			<div class="title"> This is a one-liner </div>
    			<ul>
    				<li> Story Headline #1 </li>
    				<li> Story Headline #2 </li>
    				<li> Story Headline #3 </li>
    			</ul>
    		</div>
    		<br />
     
    		<h1> A two-line title: </h1>
    		<div class="box">
    			<div class="title"> This heading is long enough to extend into a 2nd line </div>
    			<ul>
    				<li> Story Headline #1 </li>
    				<li> Story Headline #2 </li>
    				<li> Story Headline #3 </li>
    			</ul>
    		</div>
    		<br />
     
    		<h1> A three-line title: </h1>
    		<div class="box">
    			<div class="title"> This heading title will hopefully be long enough that it will extend into a third line </div>
    			<ul>
    				<li> Story Headline #1 </li>
    				<li> Story Headline #2 </li>
    				<li> Story Headline #3 </li>
    			</ul>
    		</div>
    		<br />
     
     
    	</body>
    </html>
    The :last-child {} is what I added but doesnt work.

  • #2
    New Coder
    Join Date
    Nov 2010
    Location
    Virginia,USA
    Posts
    36
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Maybe I am mistaken here. But it may be because you have "background-image:" instead of just "background:" since your not actually calling an image.

    Got the following code from http://www.css3maker.com/css-gradient.html They have a different way of writing the code. Maybe give this a shot.

    Code:
    background:-moz-linear-gradient(80% 20% 0deg, #866400, #FF4E28 10%)
    They seem to be using just "background" to call the gradient
    Last edited by badwolf; 06-14-2012 at 11:51 PM.


  •  

    Posting Permissions

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