CSS Gradient and Texture Play

Blog

I like to play with CSS and HTML just to see what I can do. Often I do not have any certain project in mind when I want to do something, I just want to learn or do something that I have never done before.

However, my newest play session I did have a project and an inspiration in mind. My inspiration was this site I have had in my favorites for a few years now. The site is from a company called The Gingerbread Construction Company. This site is my inspiration for a project that I am about to start that does cake decorating (may update this article after the project is done with the link to that site). I was particularly interested in the footer section of the page, the image below is a screenshot of what I am talking about.

Ginger Bread USA

If you will look closely at the 4 boxes you notice they used images with gradients and texture applied to the background. While this is very lovely, it means that there are 4 different images being loaded when the page is called. This site already has a lot of image in the background of most of the elements on the page. This can slow load times, especially on mobile devices. I wondered if I could create the same effect without that many images, using just CSS.

My second reason for wanting an alternative was I wanted more responsive backgrounds. If I did it the way this site has done my gradients would repeat at some point (depending on the size of the image used), this of course makes the dark color back-up to the light and then again the light to the dark. Not the effect I am going for.

My play session has been outlined and challenge accepted.

The method I am using isn’t for every problem of course, but it is one alternative that can be used.

Here is what my results came up with.
my texture gradients

So here’s my HTML mark-up

<div id="grad1">
		<div class="borderbox"></div>
	</div>
	<div id="grad2">
		<div class="borderbox"></div>
	</div>
	<div class="clear"></div>
	<div id="grad3">
		<div class="borderbox"></div>
	</div>
	<div id="grad4">
		<div class="borderbox"></div>
	</div>

The “border box” is for the dashed outline in my example. The “grad1” “grad2”, “grad3”, “grad4” are for my gradients and textures. As a side note, the inspiration has 4 different textures on their boxes. On my example, I am using only one as the texture is still an image being used. So all my boxes have the same texture. But this solves the issue of reducing the number of images being used.

Before we look at the CSS, we need to talk about gradients with CSS.
Not all browsers support it at least not in a way that is easy to code. For example, IE9 uses SVG code which is a monstrosity when coded. Of course, there are issues with older browsers as well. So it is important to decide what browsers you want to support with this feature and which ones you decide the code is just too bulky and decide to ditch with a different look instead. Since that decision is a personal one dependent on the project your working on, I have decided to include code in my CSS for all of them just so you can see what it would look like. Now, I didn’t code all this myself. I used a generator found online. The one I used is Colorzilla’s gradient editor you can use whatever you wish to use or code it yourself. Either way is fine.

#grad1 {
	border-radius: 1.5em;
	padding-top: .3em;
	box-shadow: 5px 5px 5px #666666;
	float:left;	
	height: 10em;
	width: 48%;
	margin-right: 1%;
	background: #1e589a; /* Old browsers */
	background: #8098b9; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjODA5OGI5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjYTRjN2ZjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NmZTBmYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(45deg,  #8098b9 0%, #a4c7fc 50%, #cfe0fa 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#8098b9), color-stop(50%,#a4c7fc), color-stop(100%,#cfe0fa)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  #8098b9 0%,#a4c7fc 50%,#cfe0fa 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  #8098b9 0%,#a4c7fc 50%,#cfe0fa 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  #8098b9 0%,#a4c7fc 50%,#cfe0fa 100%); /* IE10+ */
background: linear-gradient(45deg,  #8098b9 0%,#a4c7fc 50%,#cfe0fa 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8098b9', endColorstr='#cfe0fa',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
#grad2 {
	height: 10em;
	width: 48%;	
	border-radius: 1.5em;
	padding-top: .3em;
	box-shadow: 5px 5px 5px #666666;
	float:left;
	background: #faf860; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmFmODYwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmRmYzg4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZjZmJjZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(45deg,  #faf860 0%, #fdfc88 50%, #fcfbce 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#faf860), color-stop(50%,#fdfc88), color-stop(100%,#fcfbce)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  #faf860 0%,#fdfc88 50%,#fcfbce 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  #faf860 0%,#fdfc88 50%,#fcfbce 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  #faf860 0%,#fdfc88 50%,#fcfbce 100%); /* IE10+ */
background: linear-gradient(45deg,  #faf860 0%,#fdfc88 50%,#fcfbce 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faf860', endColorstr='#fcfbce',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
#grad3 {
	border-radius: 1.5em;
	padding-top: .3em;
	box-shadow: 5px 5px 5px #666666;
	float:left;	
	height: 10em;
	width: 48%;
	margin-right: 1%;
	background: #40a65f; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDBhNjVmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNzVmODlkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U0ZmVlYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(45deg,  #40a65f 0%, #75f89d 50%, #e4feec 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#40a65f), color-stop(50%,#75f89d), color-stop(100%,#e4feec)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  #40a65f 0%,#75f89d 50%,#e4feec 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  #40a65f 0%,#75f89d 50%,#e4feec 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  #40a65f 0%,#75f89d 50%,#e4feec 100%); /* IE10+ */
background: linear-gradient(45deg,  #40a65f 0%,#75f89d 50%,#e4feec 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40a65f', endColorstr='#e4feec',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
#grad4 {
	height: 10em;
	width: 48%;	
	border-radius: 1.5em;
	padding-top: .3em;
	box-shadow: 5px 5px 5px #666666;
	float:left;
	background: #a6406f; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYTY0MDZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmRjZWUzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZTRlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(45deg,  #a6406f 0%, #fdcee3 50%, #ffe4e0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#a6406f), color-stop(50%,#fdcee3), color-stop(100%,#ffe4e0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  #a6406f 0%,#fdcee3 50%,#ffe4e0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  #a6406f 0%,#fdcee3 50%,#ffe4e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  #a6406f 0%,#fdcee3 50%,#ffe4e0 100%); /* IE10+ */
background: linear-gradient(45deg,  #a6406f 0%,#fdcee3 50%,#ffe4e0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6406f', endColorstr='#ffe4e0',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

}
.borderbox {
	height: 9.5em;
	width: 98%;
	margin-right: auto;
	margin-left: auto;
	border: 1px dashed #FFF;
	border-radius: 1.5em;	
}
/*This is the upper 2 boxes. Using the pseudo before. This makes the texture image placement possible. Most of the code has to deal with positioning the texture image on the gradients correctly. */
#grad1:before,
#grad2:before
{
	content: ""; /*where the texture image appears within the content*/
	opacity: 0.3; /*lightens the image*/
	border-radius: 1.5em; /*lovely rounded corners (check browser support */
	height: 10.3em;
	float:left;	
	width: 47.3%;
	top: .5em;
	margin-right: auto;
	margin-left: auto;
	position: absolute;
	z-index: 1;
	background-image: url(Images/BrushedLook.png);
}
/*This is the lower 2 boxes. Using the pseudo before. This makes the texture image placement possible. Most of the code has to deal with positioning the texture image on the gradients correctly. */
#grad3:before,
#grad4:before
{
	content: ""; /*tells where the before is. */
	opacity: 0.3; /*lightens the image so it appears to e part of the image*/
	border-radius: 1.5em; /*makes my lovely rounded corners (check browser support) */
	height: 10.3em; 
	float:left;
	width: 47.3%;
	margin-right: auto;
	margin-left: auto;
	position: absolute;
	z-index: 1;
	background-image: url(Images/BrushedLook.png);
	margin-top: -.3em;
}
/*Used for clearing between the upper 2 boxes and lower 2 boxes */
.clear {
	width: 100%;
	height: 2em;
	clear:both;
}

Notice the SVG code? It seems to go on forever. As I said, deciding on what browsers you are going to support with this look may be the hardest part of the project. I always want to support everything, until I really dig deep into the design a reality hits me. Then I start trimming the code and changing looks between browsers.

I love CSS and HTML. Have fun with your next project, and think about giving CSS gradients a try for yourself.

P.S. Note on browser support. IE 8 won’t do the texture part, nor the rounded corners as code in the above examples. It will do the gradients. I am sure if IE 8 won’t the ones older than that most likely will not either. However, with the code in the above example, the gradients do work in IE8.

Leave a Reply