I am trying to accomplish the left widget box below and as you can see, there is a diagonal linear gradient, as well as a shine from top to bottom. The one I created in CSS is to the right, while the one I am trying to accomplish is to the left. Is there a way I can accomplish this using only one background property? Or would I need to surround the entire div with another div so I can overlay a semi-transparent gradient on it? Thanks
UPDATED with code:
.drk-grad {
background: linear-gradient(to bottom, #d2d2d2 7%, #b1b1b1 100%);
-webkit-border-radius: 10px;
border-radius: 10px;
background-clip: padding-box;
-webkit-box-shadow: 0px 1px 3px 1px #969494;
box-shadow: 0px 1px 3px 1px #969494;
border-top: 1px solid rgba(255, 255, 255, 0.7);
border-left: 1px solid rgba(255, 255, 255, 0.3);
}
SOLUTION:
background: repeating-linear-gradient(rgba(255,255,255,.5) -1%, rgba(107, 107, 107, 0.1), repeating-linear-gradient(135deg, #b6b6b6, #B6B6B6 10px, #b2b2b2 10px, #b2b2b2 20px);
Generally you can add multiple backgrounds, separated by commas. The first one listed will appear on top.
http://css-tricks.com/stacking-order-of-multiple-backgrounds/
http://lea.verou.me/css3patterns/
Here's a basic outline. Play with the numbers for your exactly desired effect:
div {
background:
linear-gradient(to top, transparent, #b1b1b1 100%),
gray repeating-linear-gradient(45deg, transparent, transparent 35px,
rgba(255, 255, 255, 0.5) 35px,
rgba(255, 255, 255, 0.5) 70px);
background-clip: padding-box;
border-left: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0px 1px 3px 1px #969494;
height: 250px;
width: 250px;
}
Demo: https://jsbin.com/fidaxigaxi/edit?html,css,output
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With