...

View Full Version : Question about CSS Gradient



arfirst
06-14-2012, 09:32 PM
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.


<!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.

badwolf
06-14-2012, 11:48 PM
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.


background:-moz-linear-gradient(80% 20% 0deg, #866400, #FF4E28 10%)

They seem to be using just "background" to call the gradient



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum