Published February 9, 2011 • 0 Comments • 0 Delicious Bookmarks

In this tutorial, we recreate the now-classic iOS header bar. We use HTML5 and CSS3 techniques to match the iOS look and feel. Download Files or View Demo The HTML The header element should be in a place on the page where it has the ability to stretch fullscreen. Each navigation button has it’s own [...]

Published February 5, 2011 • 0 Comments • 0 Delicious Bookmarks

In honor of the Steelers going for championship #7 this weekend, I decided to create a CSS3 only version of their logo.

Published February 1, 2011 • 3 Comments • 0 Delicious Bookmarks

I came up with this little bit of CSS and jQuery magic when working on the “Google Maps” version of BuyDeals.in. Download File or View Demo The HTML <div id=”popover”> <div class=”popover_triangle”></div> <div class=”header”> Choose Your City </div> <div class=”content”> <ul> <li><h6>Alabama</h6></li> <li class=”item”><a href=”#/alabama/birmingham/” >Birmingham</a></li> <li class=”item”><a href=”#/alabama/huntsville/” >Huntsville</a></li> <li class=”item”><a href=”#/alabama/mobile/” >Mobile</a></li> <li><h6>Alaska</h6></li> [...]

Published January 25, 2011 • 3 Comments • 0 Delicious Bookmarks

This quick code gives you a corner banner made entirely with CSS3 and HTML (no images). It does provide a decent fallback for IE users. I use it on my local deal aggregator site, BuyDeals.in View the Demo The HTML <span id=”corner-banner”> <em>updated</em> <a href=”#”>1-16-2011</a> </span> The CSS The key attributes here are -webkit-transform: rotate(-45deg);, [...]

Published January 16, 2011 • 2 Comments • 0 Delicious Bookmarks

Here we customize the use of the popular jQuery plugin, Cycle. We use HTML5, a customized paging feature and pseudo dual sliders (one is a fade, but still looks cool). Download Files or View Demo The HTML5 Nothing really special here other than the fact that we use the new HTML5 Data- attributes to link [...]

Published June 22, 2008 • 9 Comments • 0 Delicious Bookmarks

Photo Credit: Glockenblume Although I am certain that I am not the only one doing this, I have developed an extremely easy way to get CSS text shadows without the need to use the wildly unsupported CSS property of text-shadow. .post_title { position:relative; padding:10px 0 0 0; } .post_title h1 { position:absolute; top:2px; left:2px; font-size:30px; [...]

Published March 30, 2008 • 0 Comments • 0 Delicious Bookmarks

The semantic web is coming in a hurry, so now is as good a time as any to embrace it and spend a few minutes to update your web site accordingly. On my site here, and for every member on my local community site, I use the same small snippet of HTML to make my [...]