Easter, Website, and Free Tacos

About a month ago I was asked if I might be able to put together a simple landing page for the Easter service for the church I’m a part of (Realitycarpinteria.com). It was a volunteer job and I only had a day to get it done (because of my schedule) so I used every trick I could think of to speed up the development process. Luckily for the sake of time, the content was already established (date, time, place) and there was already a look to work off of, as well as a nice video already made.

I started by putting together a basic look based on the church flyer design I was provided. I simplified and cleaned up the typography a bit and decided since the video already started with a still image similar to the flyer that it would perfect at the top of the landing page.

To speed up development, I used Paul Irish’s HTML5 Boilerplate as a base. It really helped to get the site code up and running super quickly. Because the page is so basic, though, I didn’t really get to tap into anything new that HTML5/CSS3 offers as far as interesting effects or techniques.

For the custom font in the headings, I used @font-face and I generated the font-face kit with the help of Font Squirrel’s @Font-Face Generator. I highly recommend it.

The one effect I wanted that required a bit of CSS3 trickery was the drop shadow around and below the video. I wanted to have a small drop shadow around the entire box holding the video as well as drop shadow below to give the look of slight page curls. I’d created this look before in sites but never with pure CSS (and no images). This article, “CSS drop-shadows without images” by Nicolas Gallagher,  does an excellent job explaining how to get whatever look you want via CSS drop-shadows without using images. There was a hitch, however. It seems that this particular combination of items, container with two forms of drop-shadow applied via CSS that also contains a video, has a bug in Chrome that causes the video to play back with a horrible frame rate. Since the video is key to the page in question, I had to pick my battle and ended up ditching the slight drop-shadow that surrounds the container with the video. It’s still applied in Firefox via -moz-box-shadow but I disabled -webkit-box-shadow and box-shadow. Perhaps someone smarter than I could come up with a more optimum solution to this issue, but as far as I can tell, this was my best option given this particular set of circumstances.

CSS Image-less Drop-Shadows Plus Video = Chrome's Achilles Heel

For the sharing functionality at the top of the page, I turned to AddThis which is a nice little sharing plugin. I customized the default settings a bit to only focus on the most relevant items (Facebook, Twitter, Email, and Print).

Anyway, tomorrow (Sunday, April 24th) is Easter and my church will be meeting in the La Playa Stadium at the Santa Barbara City College at 10am. If you happen to be in the area and don’t already have plans then I’d love to see you there! Plus, there will be a free taco lunch. How can you go wrong with free tacos? Seriously, c’mon.

Website – Easter with Reality