The title of this post probably just turned off most readers, but if you make your own website you should read on. Anyone who has followed me for long knows I’m into website design, not the out of date Flash sites, but using modern techniques like HTML5 and CSS3. You will miss a lot of subtle effects on my website if you are not using a modern browser, of course everything will still work.
I figured if there is a company that knows subtle style it would be Apple, of course after their leather bound iPad calendar app this could be argued. Their website uses very little color, just some very slight shades of grey, except for their products that really pop off the page. You might notice my website tries to do the exact same thing with my photography.
I was studying Apple’s website, and like the way boxes that contain information look, for example on their store page.
It might be hard to see in this picture. But the box has a very slight gradient that gets much stronger near the bottom of the box. There is also a very slight drop shadow on the bottom that makes the box looked slightly raised off the page. I don’t know how Apple does it, but I thought I could do this with CSS3. This means the effect can be done without using any images or gradients made in Photoshop.
While you could try to figure out the code for this manually. The gradient generator from Colorzilla.com http://www.colorzilla.com/gradient-editor/ is fantastic. It can create gradients similar to Photoshop that have color stops that work in most web browsers, even older IE versions. What the color stop lets you do, is instead of having a gradient that changes shade evenly from top to bottom, you can do, like Apple does, and have it change very little until the bottom portion of the box where it increases. Here is the exact code I use to get a very similar gradient as well as drop shadow on my boxes like on the Apple Store website, even a slight roundness to the corners. To put a box like this anywhere on your page just use something like . . .
<div class="myBoxes">Whatever I want inside</div>
Then in your css file . . .
.myBoxes {
padding: 10px;
background: rgb(255,255,255);
/* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2ZkZmRmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmN2Y3ZjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(253,253,253,1) 75%, rgba(247,247,247,1) 100%); /* FF3.6+ */;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(75%,rgba(253,253,253,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */;
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(253,253,253,1) 75%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */;
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(253,253,253,1) 75%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */;
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(253,253,253,1) 75%,rgba(247,247,247,1) 100%); /* IE10+ */;
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(253,253,253,1) 75%,rgba(247,247,247,1) 100%); /* W3C */;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-8 */;
-webkit-box-shadow: 0px 1px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 1px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 1px 0px rgba(50, 50, 50, 0.5);
border: 1px #CDCDCD solid;
border-radius: 5px;
}
This may look complicated, but play around with the gradient generator and you can make your own easily. Or if you want to try my code, just paste this into your CSS for any <div>. There is a small hack you have to do to get it working properly in IE9, but it explains how to do it on Colorzilla’s site. I hope any web developers find this helpful, if you do or if you need more explanation let me know in the comments below.
