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.
I’m getting a new portrait lens the Sigma 85mm f1.4. You might wonder why I’m not buying the Nikon version of this lens. I almost exclusively use Nikon, my go to lenses the 24-70 f2.8 and 70-200 f2.8 are fantastic. Ryan Brenizer, a photographer I really trust, reviewed the Sigma lens and really loved it. With the problems in Japan, Nikon lenses are so expensive and hard to get right now, I just decided to go with the Sigma instead. The reason I’m mentioning this, is this will probably be my new lens for engagement pictures, at least for many shots. For example the Bokeh, or out of focus sun coming through the trees in the first image, with the 85mm prime lens at f1.4 would be much creamier and and softer. It makes for a really amazing look. It’s harder to use a prime lens of course, because you have to zoom with your feet. Also accurate focus is critical when shooting at very wide apertures like f1.4. I’m going to give the lens a good try and I’ll probably write a review myself as well.
