SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how do I make this "gradient" with css?

    I made an example in PS, but want to do the same in css.

    4e0NO.png

    Also if someone know if it is possible to do it but diagonal from on bottom-corner to top-corner on the opposit side.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    There are tons of resources, articles and tools online for creating "css3 gradient buttons". Check out some of those, grab their code, and if you have trouble with it, give us a shout here.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    ReGGaeDude,

    Put this in your toolbox:

    http://www.sitepoint.com/10-best-css3-code-generators/

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    One note, you could do this even w/o gradients using box-shadow.

    Code:
    		ul {padding:0; margin:0; list-style: none; display:table;}
    li {display: inline-block; padding: .5em;   box-shadow: inset 0 1.125em .0625em rgba(255,255,255,.65),  1px 1px 2px #000; text-shadow: 0 1px 0 #fff;  border-radius:.125em}
    li+li { margin-left:1em}
    
    .red {background: red;  box-shadow: inset 0 1.125em .0625em rgba(255,255,255,.44), 1px 1px 2px #000;}
    .cyan {background: cyan; }
    .pink {background: pink; }
    .orange {background: orange; }
    li:hover { background: #555}
     
    <ul>
    	<li class="red">Bushy</li>
    	<li class="cyan">Ray</li>
    	<li class="pink"> Veronica </li>
    	<li class="orange">Havoc</li>
    </ul>
    which has the advantages of : easier semantics, can (also) interact with bg-color, and you dont have to redo the whole rule for :hover effects.

    hope that helps


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
  •