Text 7 Jun 2 notes Background gradient + Background image with CSS3

If we want to make a button (for example) with background gradient plus a concrete image we can do the following:

.blue-button {float:left; text-align:center; padding:6px 38px 6px 15px;border:1px solid #A9C5D6; color:white; font:bold 14px Arial; height:18px; text-decoration:none; margin-

  /*  text shadow */
  text-shadow:1px 1px 0px #6397B1;

  /*  border*/
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;

background: url(../images/common/bg-btn-arrow.png) right 1px no-repeat;
background: 
	url(../images/common/bg-btn-arrow.png) right 1px no-repeat,
	-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.19, rgb(142,185,206)),
        color-stop(0.6, rgb(172,207,226))
    );

background: 
	url(../images/common/bg-btn-arrow.png) right 1px no-repeat,
  -moz-linear-gradient(
      center bottom,
      rgb(142,185,206) 19%,
      rgb(172,207,226) 60%
  );
}
This is the original arrow:



And this is the final result:

  1. rabarroso posted this

Design crafted by Prashanth Kamalakanthan. Powered by Tumblr.