Cagintranet Web Design » CSS

Create an iOS Header Bar in CSS3 and HTML5

Chris Cagle — Wed, 09 Feb 2011 15:14:44 +0000

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 style, one for images .image_button and one for text buttons .button. The H1 is the title of the page.


	The Page Title
	
	Options

The CSS

header {
  display:block;
  width:100%;
  z-index:100;
  text-align:center;
  border-top:1px solid #666;
  border-bottom:1px solid #111;
  background: #222;
  background: -moz-linear-gradient(top, #333 0%, #111 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.55)), color-stop(0.2, rgba(255, 255, 255, 0.35)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, transparent), to(transparent) );
  position:absolute;
  top:0;
  left:0;
  box-shadow: rgba(46,60,63, 0.55) 0px 0px 20px;
  -moz-box-shadow: rgba(46,60,63, 0.55) 0px 0px 20px;
  -webkit-box-shadow: rgba(46,60,63, 0.55) 0px 0px 20px;
  color:#fff;
}
header h1 {
  padding:5px 0 5px 0;text-align:center;
  font-size:20px;
  text-shadow:rgba(0, 0, 0, 1) 0 -1px 0;
}
header h1 span {
  opacity:.75
}
header .left { left: 15px; }
header .right { right: 15px; }
header .image_button {
  display:block;
  padding:0;
  font-weight: bold;
  position: absolute;
  top: 4px;
  opacity:.70;
  cursor:pointer;
  margin:0;
  z-index:9900050;
  -webkit-transition: opacity .3s ease-in-out;
  -moz-transition: opacity .3s ease-in-out;
  -o-transition: opacity .3s ease-in-out;
}
header .image_button.active,
header .image_button:hover,
header .image_button:focus  {
  opacity:1;
}

.button {
  display:block;
  padding:2px 10px;
  line-height:21px;
  border-radius: 5px;
  -moz-border-radius:5px;
  -webkit-border-radius: 5px;
  overflow:hidden;
  height: 21px;
  font-weight: bold;
  position: absolute;
  top: 3px;
  font-family:inherit;
  font-size:12px;
  text-shadow:rgba(0, 0, 0, 0.6) 0 -1px 0;
  text-overflow:ellipsis;
  text-align:center;
  white-space:nowrap;
  background:none;
  cursor:pointer;
  margin:0;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
}
.button:link, .button:visited {
  color:#fff;
  background: #555;
  background: -moz-linear-gradient(top, #555 0%, #222 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.55)), color-stop(0.2, rgba(255, 255, 255, 0.35)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, transparent), to(transparent) );
  border:1px solid #222;
  text-decoration:none;
  -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, 0.25);
}
.button:active, .button:focus, .button:hover {
  text-decoration:none;
  background: #444;
  background: -moz-linear-gradient(top, #444 0%, #111 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.55)), color-stop(0.2, rgba(255, 255, 255, 0.35)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, transparent), to(transparent) );
}

Go Steelers! A Pure CSS3 Logo

Chris Cagle — Sun, 06 Feb 2011 02:45:30 +0000

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

The Demo

View the working demo (use Safari, Firefox or Chrome).

The HTML

A little of why I did it this way:

div.outer – This div is the main circle with with the thick gray border.
span – This is the container for the astroid. It’s class defines the color, and it is rotated 45 degrees to give it a diamond shape.
p – This is a inner container that I needed to make ‘relative’ so I could make all the b tags absolutely positioned.
em – This is the block that contains the color of the astroid. I tried making the span have the color, and it worked, but it left a weird anti-aliased halo around the diamond shape (square at 45 deg.) when overflow was set to hidden. This em fixes that.
b – These are the white circles that give the diamond it’s concave shape. 4 are needed, and are absolutely positioned over each side of the diamond.

The CSS3

I am not going to show all the CSS here (view source on the demo), but I will say that in this demo I used the following CSS3 properties:

rotate transform
border-radius
gradients
rgba
box-shadow
font-face

Create an iPad-Like Dropdown (PopOver)

Chris Cagle — Wed, 02 Feb 2011 02:44:42 +0000

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


	
  
    Choose Your City
  
  
    
		Alabama
		Birmingham
		Huntsville
		Mobile
		Alaska
		Anchorage
		Arizona
		Mesa
		Phoenix
		Scottsdale
		Tucson
		Arkansas
		Little Rock
		California
		Anaheim 

		...

The jQuery

This is the javascript that opens (fades in) the popover and sets the button’s class to active.

$('#popover_button').live('click', function($e){
	$e.preventDefault();
	$('#popover').fadeToggle('fast');
	if ($('#popover_button').hasClass('active')) {
		$('#popover_button').removeClass('active');
	} else {
		$('#popover_button').addClass('active');
	}
});

This is the javascript that closes the popover if anything else is clicked other than the button and/or the popover.

$('body').click(function(event) {
	if (!$(event.target).closest('#popover').length && !$(event.target).closest('#popover_button').length) {
		$("#popover").stop(true, true).hide();
		$('#popover_button').removeClass('active');
	};
});

The CSS

The CSS file for this demo is pretty straightforward. The one thing that might trip some people up is the fact that since the popover is absolutely positioned, it is given a top position. So to get it working in your particular instance, you will probably have to mess with the position properties to match where your button is.

CSS3 Corner Banner with IE Fallback

Chris Cagle — Wed, 26 Jan 2011 01:48:03 +0000

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


	updated
	1-16-2011

The CSS

The key attributes here are -webkit-transform: rotate(-45deg);, -moz-transform: rotate(-45deg); & transform: rotate(-45deg). Read more about these new CSS3 transform properties.

#corner-banner {
	position: absolute;
	left: -65px;
	top: 15px;
	display: block;
	width: 200px;
	background: #333;
	background: -moz-linear-gradient(top, #333 0%, #000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#000));
	text-align:center;
	font-size:11px;
	line-height:13px;
	padding:3px 3px 4px 3px;
	text-shadow: #000 1px 1px 0;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
	box-shadow: rgba(0,0,0, 0.2) 0px 0px 6px;
	-moz-box-shadow: rgba(0,0,0, 0.2) 0px 0px 6px;
	-webkit-box-shadow: rgba(0,0,0, 0.2) 0px 0px 6px;
}
#corner-banner a:link,#corner-banner a:visited  {color:#FFF0B7;text-decoration: none;}
#corner-banner a:hover,#corner-banner a:focus  {color:#FFF;text-decoration: none;}
#corner-banner em {
	letter-spacing:1px;
	font-style:normal;
	font-size:8px !important;
	color:#fff;
	text-transform:uppercase;
	line-height:12px;
	display:block;
}

The (IE) CSS

#corner-banner {
	text-align:right;
	padding-right:15px;
	left: -135px;
	top: 20px;
}

jQuery Cycle Demo: HTML5, Dual Sliders and a Custom Pager

Chris Cagle — Sun, 16 Jan 2011 20:53:34 +0000

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 the slides to their respective logos.




	
	Pittsburgh Sports : Teams & Stadiums
	
	
	
	

	
	

	



	
		
			Pittsburgh Sports

The jQuery

The Malsup Cycle options can be viewed here

pager – This is the #id of the empty ul element that gets populated with the new li‘s that are generated by our pageAnchorBuilder function.
pageAnchorBuilder – This is the function that custom builds own new menu. It pulls the title attribute of the section and uses it as the menu’s anchor text.
before – This is the function that runs before the slide changes. We use it to hide “all” images within the figure element.
after – This is the function that runs after the slide changes. We use it to fadeIn the new slide’s corresponding logo.

$('#slides').cycle({
	fx:     'scrollLeft',
	timeout: 0,
	speed:  1000,
	pager:  '#nav',
	pagerAnchorBuilder: function(idx, slide) {
	  var stadium = jQuery(slide).attr('data-team');
	  var title = jQuery(slide).attr('title');
	  return '' + title + '';
	},
	before:  onBefore,
	after:   onAfter
});
function onBefore() {
	$('figure img').fadeOut('fast');
}
function onAfter() {
	var logo = $(this).attr('data-team');
	$('figure img[data-team='+ logo+']').fadeIn('slow');
}

CSS Tip: Easy Cross Browser & Valid CSS Text Shadows

Chris Cagle — Sun, 22 Jun 2008 13:42:49 +0000

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.

Lorem ipsum dolor sit amet consectetuer

The only problem that some people may see with this example is “duplicate content” because the title is shown twice in the HTML. I’ve decided that sometimes when all you need is a simple text drop shadow, this is an acceptable problem. This technique is extremely easy, and I have used it on a couple sites of mine thus far with no cross-browser issues.

The Code (HTML)


	Lorem ipsum dolor sit amet consectetuer
	Lorem ipsum dolor sit amet consectetuer

The Code (CSS)

.post_title {
position:relative;
font-family:arial;
}

.post_title h1 {
position:absolute;
top:2px;
left:2px;
font-size:30px;
color:#C9D8E9;
padding:0;
margin:0;
}

.post_title h6 {
position:absolute;
top:0;
left:0;
font-size:30px;
color:#4471A2;
padding:0;
margin:0;
}

CSS Tip: Easy Semantic Web Contact Information

Chris Cagle — Sun, 30 Mar 2008 12:37:26 +0000

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 contact information semantic.

HINT: You will notice that near the bottom of the HTML code, there is a link to download the hCard. This is a service that Technorati provides free of charge, and is a wonderful way to give your visitors yet another way to save your contact information. For more information on what an hCard is, read up about it at Microfromats.org.

HTML



 Mail:
  
    Business Name
    Your Name,
    Owner
    24 Main Street
    Pittsburgh,
    PA
    USA 
    15202
  

 Email:
  admin@yourdomain.com

 Phone:
  
    Work
    412-555-9999
  
  hCard

CSS

dl,dt,dd {margin:0; padding:0}
dl.vcard {margin:0 0 35px 5px;}
dl.vcard dt, dl.vcard .org, dl.vcard .type {display: none;}
dl.vcard dd.adr {padding-bottom: 1em;}