Creating Apple.com style HTML5 box gradients

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.

Engagement portraits at Magnolia Plantation in Charleston, SC

This is my first time visiting the Magnolia Plantation.  It’s a very nice area, it reminds me a lot of Brookgreen Gardens.  Unlike Brookgreen though we were allowed to go wherever we wanted to do the pictures and spend as much time as well.  I had a lot of fun walking around for an hour or so with the couple and finding places to do shots.  The first time to an area takes a bit of experimenting and exploring around.

We had some pretty strong early afternoon sunlight which can be difficult at the beach or in an open area, but being in a nice area with plenty of trees and shade it’s not really a problem.  In fact the strong sun gives some nice Bokeh from the pinpoints of light reflecting off the trees, you can see this especially on the first image.  You can tell if someone has a really good lens not by looking at what is in focus, but by looking at the quality of the out of focus areas.

I really liked the old fence where the horses were as well, you can see a number of shots from that spot below.  The bamboo was really cool as well, but what I really wanted was evening sun showing through the Bamboo, and I couldn’t really get that, I’ll try again at this couple’s wedding in December. It should be very nice and will be later in the day so things should go even better.  Let me know in the comments if you like the pictures.

Kiss on a bridge, shot with 70-200 f2.8 - Magnolia Plantation Charleston

Kiss on a bridge, shot with 70-200 f2.8 - Magnolia Plantation Charleston

Kiss in front of a lake, push process black and white  - Magnolia Plantation Charleston

Kiss in front of a lake, push process black and white - Magnolia Plantation Charleston

There are more pictures from this event - Continue Reading . . .

After wedding pictures at the Myrtle Beach State Park

Now that things have slowed down some I’m going to try and go back and blog about some of my previous weddings and events.  This couple was married the day before, and just wanted to do some portraits of the two of them.  The Myrtle Beach State Park is really a great place for pictures because of the options like the oak trees, the pier and the really nice dunes, all in the same location.  Also, it’s out of the Myrtle Beach city limits, so you don’t get in trouble for doing picture there.  The only thing is, you have to be really careful about getting on the dunes.  I still see other photographers getting in trouble with the park rangers sometimes.  I saw this one photographer recently not only up on top of the dunes and getting talked to by a park ranger, but also waist deep in the swash trying to photograph a model, which is highly contaminated with bacteria.

Back to this couple, the evening turned out to be great with some really nice colors in the sky.  I was even able to catch some of the seagulls flying by in a few shots, which is really cool of you happen to get it.  This is a good example of how you can get some really nice pictures no matter how big your wedding is, I just did this like I would do any set of family or engagement pictures and got a lot of nice shots.  I hope you enjoy some of them below.

Couple sitting on oak tree root

Couple sitting on oak tree root

Bride leaning against oak tree - Myrtle Beach State Park

Bride leaning against oak tree - Myrtle Beach State Park

There are more pictures from this event - Continue Reading . . .

Beautiful wedding at Litchfield Plantation with a horse drawn carriage

This is the first wedding I’ve done at Litchfield Plantation.  It’s a very beautiful area, I always like the Litchfield / Pawleys Island area with all the moss covered Oak trees.  It’s so pretty if you can get the light coming through the trees just right in the evening.  One of my favorite bridal portraits ever was down in this area.  Just in case you are not familiar, Litchfield is about 20 minutes south of Myrtle Beach down business 17.  A lot of the best spots, with the beautiful trees, are away from the beach near the intracoastal waterway.  I’m going to post some extra pictures below of the carriage ride and some shots of the location that you won’t see in my galleries or on Facebook.  I hope you enjoy them.

Update:
It sounds like this will be my first and last wedding at this location.  I had a client telling me they are turning this into a housing development or something and no longer booking events.  I guess they had financial problems.  Oh well, it was a pretty spot.

 

Oak trees at entrance to Litchfield Plantation

Oak trees at entrance to Litchfield Plantation

House at Litchfield Plantation

House at Litchfield Plantation

There are more pictures from this event - Continue Reading . . .

Fun wedding at Kingston Plantation in North Myrtle Beach

Kingston Plantation seems to be one of my usual spots, like the Grand Dunes, that I end up going to frequently.  It’s nice when I get to work at the same location multiple times, I can really get to know all the good photo spots after a while.   It’s also nice because it’s out of the Myrtle Beach city limits so you don’t have to worry about getting fined by trying to take pictures on the beach.  This couple was a lot of fun, I got a lot of just casual, fun shots of them as well as really nice posed shots as well.  I know it’s hard to relax at a wedding, but if you can and just try to act silly and not worry about things too much it makes for a lot better photos.  I tried to pick out some shots to highlight that were more unique to this wedding.  We did a lot of normal poses of course that turned out great, but I tried to highlight some that were more candid or a bit different.  I hope you like them.

First look at the bride - Kingston Plantation - North Myrtle Beach

First look at the bride - Kingston Plantation - North Myrtle Beach

Passing the rings among the family during the ceremony  - Kingston Plantation - North Myrtle Beach

Passing the rings among the family during the ceremony - Kingston Plantation - North Myrtle Beach

There are more pictures from this event - Continue Reading . . .

Backup strategies for a professional photographer ver. 2

A while back a wrote a post about my backup strategy, but I’ve changed my workflow significantly since then so I thought I needed to make an updated post.  This should be helpful to anyone trying to figure out how to keep the precious images, we as professional photographers take, safe from accidental loss or deletion.  Backup is one of the most important things a photographer needs to do.

First of all, I forget who said it, but if you don’t have a digital image in at least 3 places you don’t really have it.  You should have 3 copies of any picture you take, you also should have an offsite copy just incase your home or office is broken into or fire or something else destroys your hard drives.  This might seem like overkill, but trust me, things happen.  I once had to get some data from what I call my last resort offsite backup because of a stupid mistake on my computer.  It’s scary, I’m really glad I was making good backups.

My Workflow:

First of all, as soon as I get home from a shoot, I begin importing images into my Lightroom catalog and to the folder it creates on my hard drive.  I don’t have time in this post to go into my Lightroom workflow, but the images get placed into an organized by date folder on my drive.  Then I put the CF memory card to the side and I don’t delete it until all my backups have been made, typically by the next morning.

First Backup:

Data Robotics Drobo 4-Bay USB 2.0/FireWire 800 SATA Storage Array DR04DD10The important key to backing up is that it has to be automatic.  You will forget if you have to do it manually.  I use software called Sync Toy on my PC.   You can see how to automate the software here.  Automatically each night, Sync Toy copies any new or changed images from my working hard drives inside my PC over to my Drobo.  This way I have my original working copy on my fast internal raid 0 array, plus an extra copy on my Drobo.  The Drobo is much slower but provides the additional protection that a drive can fail and be replaced without any loss of data.  I can’t go into what a Drobo is here, but you can check out their website.

Offsite Backup:

So now we have 2, and essentially 3 copies of the pictures because the Drobo provides protection from a hard drive failure itself.  What about the offsite backup? In the past I would just occasionally put a copy of all my images on an external hard drive and store it somewhere offsite, but this is a pain and it doesn’t get updated frequently enough.

Why Carbonite doesn’t work:

I’ve tried various services like Carbonite that promise unlimited offsite backup.  This doesn’t work for a pro photographer!  Here is why.  I have a new Docsis 3.0 internet connection with 5mbps up, so technically I have plenty of bandwidth to upload as many files as I need quickly.  The problem is, at first Carbonite works very fast.  However, after around 50gb of storage, they start to slow down your uploads so much that it becomes very difficult to keep up with incoming images even if backing up constantly day and night.  After 200gb they slow you down to 100kbps, so you are pretty much done at that point.  So even though they claim unlimited backup, they slow you down so much that it’s not practical.  I always wondered how they got unlimited storage for $60 a year, now I know.

Amazon S3 to the rescue:

I signed up for the Amazon S3 service.  This gives you storage space on Amazon’s servers that you can use as much and as fast as you want, they just charge you per GB of storage.  If you use their reduced redundancy storage option, which is still 99.9% reliable, plenty for a 3rd offsite backup, it cost about $10 per 100GB per month.  This might seem like something very complicated, but if you get software called Cloudberry Backup for about $30 it steps you through the process and automates the backups.  With the Cloudberry software, every night any new pictures I’ve imported, are automatically uploaded and backed up to the Amazon S3 service.  S3 is so fast that I can backup a whole wedding’s worth of raw images overnight.  What I’m going to do so the cost doesn’t get too high, I’m still going to keep my offsite physical hard drive backup and update it every few months.  My latest 500GB or so of pictures I’ll keep backed up on Amazon S3 which will cost around $50 per month.

Now if you really want to get fanatical, like I am, you can also get a fireproof safe and keep a 4th backup copy in there as well.  Hard drives are so cheap now it doesn’t hurt.  So to sum it up, Microsoft Sync Toy automatically copies any new pictures to my Drobo.  The Cloudberry Backup automatically uploads all new images to Amazon S3 overnight.  You would really have to try hard to find a way to lose images using this system.  I hope this helps!   Let me know if it does or if you have any suggestions below.

Wedding and sunset pictures at Ocean Isle Beach, NC

Sorry I haven’t posted to the blog in over a month.  The idea was I wanted to put up a blog post after weddings to show pictures from different location and events.  What I realized is in the summer I just don’t have time.  What I’m thinking I will do is during my slower months, I’m going to go back through all my spring and summer weddings, and put up some post about them.  So it should get more regular soon.  Also, sorry about the delays in getting proofs up and orders done, I’ll be getting caught up here in the next few weeks.

I always like doing weddings up at Ocean Isle, it’s such a pretty location.  It’s a lot like the Garden City area where you have the ocean on one side and the marsh area on the other.  The sun was still pretty bright and harsh during the wedding itself, but it turned out fine.  Later I was able to get some pictures of the couple a little while before sunset that I just loved.  I actually tried to get them to go out right when the sun was actually setting, but they were too tired by that point to do it.  I ran out and took just a sunset picture without them because it was so pretty.  I’ll post a few of the pictures below, actually there are lots of pictures from this wedding I loved in addition to these few, but I just don’t have time to post them. Remember you can always see a lot more if you stop by my home office to talk about a wedding.

Almost ready for the ceremony

Almost ready for the ceremony - Ocean Isle Beach, NC

Dad saying goodbye

Dad saying goodbye - Ocean Isle Beach, NC

There are more pictures from this event - Continue Reading . . .

Really cool black and white images

A lot of people don’t have a clear understanding of how black and white images are done with modern digital cameras.  It’s not like with film where you choose to use either b&w or color film.  Even if your digital camera has a black and white setting, all it’s doing is taking a color picture inside the camera and then converting it to black and white.  With the nicer cameras you take your pictures in a raw color format and then adjust and do what you want with an image later on in software.  There is really no such thing as taking a black and white image anymore, so any picture you see that I have in black and white, there is always a color original to choose from.

Now if you just let the camera do the black and white conversion, or if you just use basic software that removes the color, you can end up with a pretty flat and boring image.  Doing a good black and white is a lot more than just removing the color.  I think a big difference between a good and bad photographer is the investment you make in really good equipment and software.

I’ve always used actions in Photoshop that would allow for soft and glowing, sharp and high contrast, and other types of b&w image conversions.  Recently I just starting using new software called Nik’s  Silver Efex Pro 2.  This really takes the black and white conversions to a whole new level. I’m just getting started using this software, but I’m already getting results I love.   As I work with it I’m sure I will get better, keep an eye out here and on my Facebook page for more variety in black and white styles.  I will post a few of these black and white images below, I hope you enjoy them.

Groomsmen in black and white - Kingston Plantation - North Myrtle Beach

Groomsmen in black and white - Kingston Plantation - North Myrtle Beach

Entering the reception - Grande Dunes - Ocean Club

Entering the reception - Grande Dunes - Ocean Club

There are more pictures from this event - Continue Reading . . .

Really cute family and senior pictures at the Myrtle Beach State Park

I just wanted to put up a quick post.  I’ve been loving some of my family pictures recently. Sometimes I will get a really big family with a lot of grumpy two year olds, you know how that can be at times.  But lately I’ve had some of my favorite family pictures in a long time.  I also want to apologize for the delay in getting some family proofs ready for viewing, I’m really going to be working on getting them all up this next week.

This month has just been really busy, I’m actually making a decision to cut back some to make sure I can keep up with the clients I already have, if you do write me and I’m booked I can give you some good suggestions of photographers in the area to try.   On a week I have weddings I’m keeping it down to about 3 or 4 family sessions during the week.  I’m not going to become a business where I send out photographers to do the work for me, keeping things small seems to be working well for me.  I hope you enjoy some of the pictures, if you do please comment below.

Senior portrait with the sunset reflecting on the water - Myrtle Beach State Park

Senior portrait with the sunset reflecting on the water - Myrtle Beach State Park

Fun adult family pictures in an old tree - Myrtle Beach State Park

Fun adult family pictures in an old tree - Myrtle Beach State Park

There are more pictures from this event - Continue Reading . . .

Random things during the busy summer and the wedding documentary gallery

I’ve been meaning to put up a new blog post for a while.  Myrtle Beach is just in it’s busiest time right now, and I’m always backed up with work, which is a good thing but it makes it hard to do extra things like posting to the blog.  It also doesn’t help I got strep throat and now that I’m off my antibiotic it seems to be coming back, and I almost never get sick. So instead of trying to concentrate on one subject I decided to just put up a few random pictures I’ve really liked over the past month.

One new thing you will notice on the website, I’ve put up a new gallery called wedding documentary.  The idea for this is to put up more candid pictures that I might not put in a gallery otherwise.  I always have lots of pictures I really like, but I just don’t think they are suitable to put in as my main examples of my work.  The idea for this gallery is a place for these more raw, less perfect and touched up images.  I’m going to try to stick to pictures that are truly candid and unexpected, or sometimes perhaps a really silly picture even if the client knows I’m taking it that wouldn’t make it into the gallery otherwise.

I’ve also been experimenting with the new Nik Software Color Efex Pro 3 software.  I used the bleach bypass filter for the first image below, it’s a cool effect.  I’ve just got to get used to working this software into some images in my workflow and figuring out what I like.  Below I’m going to put some examples that are in the new wedding documentary gallery, as well as just a few other random shots I liked.  As always if you enjoy some of these pictures please click the like button below.

Groomsmen waiting on the second floor - Ocean Club - Grande Dunes

Groomsmen waiting on the second floor - Ocean Club - Grande Dunes

Bridal party in the sunset - Ocean Club - Grande Dunes

Bridal party in the sunset - Ocean Club - Grande Dunes

There are more pictures from this event - Continue Reading . . .