SitePoint Sponsor

User Tag List

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

    CSS3 gradient of a defined height?

    I'd like to convert a png based gradient to a pure CSS3 gradient. However, I can't determine if its possible to define the height of the gradient (without altering the height of the container element that the gradient is attached to.

    For example, my current png based gradient is 300 pixels tall by 1px wide. I have it attached to the body and set to repeat horizontally. Can I emulate this with css3 gradients?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I find gradients awkward to work with but you can set the height if you set the colour stops in pixels and not percentages.

    e.g.

    This one stretches with the element.
    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>
    .test {
    	float:left;
    	width:200px;
    	height:300px;
    	margin:10px;
    	border:1px solid #000;
    	background: -moz-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 73%, rgba(255,255,255,0.95) 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,183,234,1)), color-stop(73%, rgba(255,255,255,0.96)), color-stop(100%, rgba(255,255,255,0.95))); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 73%, rgba(255,255,255,0.95) 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 73%, rgba(255,255,255,0.95) 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 73%, rgba(255,255,255,0.95) 100%); /* IE10+ */
    	background: linear-gradient(to bottom, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 73%, rgba(255,255,255,0.95) 100%); /* W3C */
    }
    
    .test2{height:100px}
    .test3{height:500px}
    .test4{height:400px}
    </style>
    </head>
    
    <body>
    <div class="test"> </div>
    <div class="test test2"> </div>
    <div class="test test3"> </div>
    <div class="test test4"> </div>
    </body>
    </html>
    If we change the colour stops to pixels then it stays at a fixed height.

    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>
    .test {
    	float:left;
    	width:200px;
    	height:300px;
    	margin:10px;
    	border:1px solid #000;
    	background: -moz-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 100px, rgba(255,255,255,0.95) 150px); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,183,234,1)), color-stop(100px, rgba(255,255,255,0.96)), color-stop(150px, rgba(255,255,255,0.95))); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 100px, rgba(255,255,255,0.95) 150px); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 100px, rgba(255,255,255,0.95) 150px); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 100px, rgba(255,255,255,0.95) 150px); /* IE10+ */
    	background: linear-gradient(to bottom, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 100px, rgba(255,255,255,0.95) 150px); /* W3C */
    }
    .test2 { height:100px }
    .test3 { height:500px }
    .test4 { height:400px }
    </style>
    </head>
    
    <body>
    <div class="test"> </div>
    <div class="test test2"> </div>
    <div class="test test3"> </div>
    <div class="test test4"> </div>
    </body>
    </html>
    I used the gradient generator to produce the first section of code.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Two ways around that.
    1) As Paul said, you could construct a gradient using px instead of %s. the last color stop would then go on to fill the element in the direction of the gradient angle. Math
    OR
    2) Remember that a gradient is a UA generated bg IMAGE anyway and use the background-size property in conjunction with background-color.

  4. #4
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for this guys. What would I need to do to get the transparent area to go from transparent at the top, down to pure white at 250px from the top, then white the rest of the way down the height of the element?

    Tried several edits on the example css, but I couldn't quite get it to take.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    if you want transparency you will need rgba, am not sure but I dont thing there is another way around it.

    Code:
    background: -webkit-linear-gradient(top, rgba(0,255,255,0) 0, rgba(0,255,255,1) 250px, rgba(0,255,255,1));
    You will also need to code SEPARATE background declarations for each vendor, it might also be good to BEGIN with a solid color declaration as a fallback.


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
  •