Brad_ZA Brad_ZA - 2 months ago 17
CSS Question

I need some help adding a gradient to a texture

I would like to try and add a centered gradient to the texture in the link below.

http://lea.verou.me/css3patterns/#carbon-fibre

I would like each side to be #2a2b2c and the center to start at #555454.

My CSS is a bit weak, can someone help me out and maybe point out where I could learn how these methods work?

Thanks

Answer

.myDiv {
	margin: 0;
	height: 500px;
	width: 500px;
	background:
	radial-gradient(black 15%, transparent 16%) 0 0,
	radial-gradient(black 15%, transparent 16%) 8px 8px,
	radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
	radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
	background-color:#282828;
	background-size:16px 16px;
	position: relative;
}

.myDiv:after {
	content: '';
	position: absolute;
	background: red; /* For browsers that do not support gradients */
	background: -webkit-radial-gradient(#2a2b2c , #555454); /* Safari 5.1 to 6.0 */
	background: -o-radial-gradient(#2a2b2c , #555454); /* For Opera 11.6 to 12.0 */
	background: -moz-radial-gradient(#2a2b2c , #555454); /* For Firefox 3.6 to 15 */
	background: radial-gradient(#2a2b2c , #555454); /* Standard syntax */
	height: 500px;
	width: 500px;
	opacity: 0.7
}
<div class="myDiv"></div>

Comments