What is this CSS sprite technique & why?

CSS sprite, as interesting as it is called, is also an interesting CSS method itself. This approach involves changing an image to another different image, or the same image but different colour scape (greyscale, sephia etc.) upon hover.

The advantage of using the using css sprite technique is that the web page will automatically load all images at once, instead of one by one. This will speed up the loading time and there will be not much delay for users with slow Internet connection.

But how?

When we hover on the block, the background image will change smoothly to second image. If we use separate image for hover effect it will take time for website to load that image from server thus, will create ± 1 second empty space on hover. This will be a problem for user with slow internet connection.

Interesting. Show me how.

Here we go. Take a seat.

First of all, get any images or sprite to start. I would suggest an image with transparent background. In this tutorial I am going to use this Ninja Sprite from 36peas. Choose any two images – one for normal state and another for hover. Save them on some canvas by side or top and bottom.

Before we start, it’s a good idea to show some simple css background code.

Single line css background code in correct order would be:

background: color position size repeat origin clip attachment image;

In this image, each ninja will have width:227px and height:298px.

Total width for both ninjas in one canvas would be width:454px and height:298px.

In this tutorial we will only need a combination of three css background codes. Width and height set will just be for one image.

On hover, just change position of the image. Background image in this tutorial I put straight to image file. So the code should be like this:

Normal state:

display:block;
height:297px;
width:227px;
background-position:0 0;
background-repeat:no-repeat;
background-image:url('ninja.
png');

Hover state:

background-position:-227px 0;

Normal state in shortcut css:

display:block;
height:297px;
width:227px;
background:0 0 no-repeat url('ninja.png');

Hover state in shortcut background css:

background:-227px 0 no-repeat url('ninja.png');

or

background-position:-227px 0;

If you would like to see how it looks like, you may view the demo links here:

• normal/regular method
• shortcut background css

Correct syntax for shortcut background css :

background: color position size repeat origin clip attachment image;

For background-position, always remember all browser read css background position code from x-axis to y-axis. In these examples:

• background-position:(x-axis)px (y-axis)px;
• background-repeat: By default, all browser will use value ‘repeat’. To make it one image simply put ‘no-repeat’.

There are some bits of notes about background-image: – back during my first time doing css background, it was a bit confusing to do relative path if the file images are in different folder.

Here are some examples to show what I meant:

The location for the html file.

The location for images and CSS folder.

The location for the image file.

By default, the browser will find image in same folder where we save the CSS file. The solution for this problem would be that we have to jump outside the CSS folder by typing  ‘ ../ ‘ which means going back to one folder:

Here is an example based on my local html and css folder.

background-image:url('../art/ninja.png');

Here are some links for you to play around:

• background-position:
• background-repeat: 
• background-image:

Awesome! I am going to try now!

Yay! And if you do have some questions, suggestions or examples, do drop them links in the comment.

(Thanks W3C for being my main point of references.)

The post CSS Sprite Technique appeared first on Stampede: the strategic design & technology company.

A simple tap (click) can be used to produce a hover effect. However, it won’t work properly on hyperlinks with URL. On some mobile browsers, hover can be emulated by a long touch on the hyperlink but this can also produce unwanted results such as opening a context menu or highlighting the text.

Consider this typical Suckerfish-style HTML structure:

<ul id="mainmenu">
	<li><a href="about.html">About</a>
		<ul>
			<li><a href="about.html">Overview</a></li>
			<li><a href="news.html">News</a>
				<ul>
					<li><a href="news.html">Latest</a></li>
					<li><a href="archive.html">Archive</a></li>
				</ul>
			</li>
		</ul>	
	</li>
</ul>

Here’s how it looks like.

Users using the touchscreen devices would not be able to access the sub-menus by a simple tap because both About and News has a URL that will simply redirect the page.

The workaround here is when a touch-screen browser is detected, we disable the URL in the hyperlinks dynamically via Javascript either by changing the location to “#” or by preventing the default action. Conveniently enough, the code for detecting touch-screen browsers can be borrowed from the awesome Modernizr.js library, in just three lines.

function is_touch_device() {
  return !!('ontouchstart' in window);
}

What is left now is just to write the JS code that will go through the dropdown menu HTML and modify the <a> tag accordingly if it has a sub-menu. In jQuery, this can be written as follows:

$(document).ready(function() { 
	
	/* If mobile browser, prevent click on parent nav item from redirecting to URL */
	if(is_touch_device()) {	

		$('#mainmenu li > ul').each(function (index, elem) {
			/* Option 1: Use this to modify the href on the <a> to # */
			$(elem).prev('a').attr('href' ,'#');	
			
			/* OR Option 2: Use this to keep the href on the <a> intact but prevent the default action */
			$(elem).prev('a').click(function(event) {
  				event.preventDefault();
			});
		});
	}
	
});

If you have a dropdown menu with only one level of children, the code can be simplified further by modifying the jQuery selector and eliminating the “each” loop.

$(document).ready(function() { 
 
	/* If mobile browser, prevent click on parent nav item from redirecting to URL */
	if(is_touch_device()) {	
		/* Option 1: Use this to modify the href on the <a> to # */
		$('#mainmenu > li > a').attr('href' ,'#');		
		
		/* OR Option 2: Use this to keep the href on the <a> intact but prevent the default action */
		$('#mainmenu > li > a').click(function(event) {
			event.preventDefault();
		});
	}
	
});

The choice of using between Option 1 and Option 2 depends entirely on your application. If for instance you have additional JS events or interactions attached to the <a> tag of the dropdown menu, Option 2 might be useless because event.preventDefault(); might prevent those interactions from happening.

Click here to view the demo.

As always, I am happy to hear any other methods you might have out there to make hover interaction less miserable for touch screen users. Have a nice day!

The post Workaround for dropdown menu hover on mobile browsers appeared first on Stampede: the strategic design & technology company.

Unwanted space below <img>

Image above shows the correct styling (Left Side) and unwanted space below <img> (RightSide).

HTML Code

<a class="link" href="#">
    <img src="your image path" alt="Image" />
</a>

Style

.link {
border:1px solid red
}

Why Does It Happen?

Well, for my case, “line-height” property is the culprit. I often assign “line-height:normal;” to <body> so, I’ll never miss any line-height. However, it will also cause the unwanted empty space below <img>

How to fix it?

Change “line-height” value to 0 for <a> tag.

.link {
border:1px solid red;
line-height:0
}

The post Get Rid of Unwanted Space Below <img> appeared first on Stampede: the strategic design & technology company.

Dropdown menu comparison

As you can see in the image above, the dropdown on the left works while the one on the right is hidden behind <iframe>. The first thing that came into my mind when this problem occur is the z-index property. But after some debugging, I found that it has nothing to do with z-index since the error does not occur when I changed <iframe> to <img> element.

Is This Related to CSS?

The answer is no. So, how to fix? I am using a video embedding code from YouTube as example.

<iframe width="560" height="349" src="http://www.youtube.com/embed/rLVCjnEGrqQ" frameborder="0" allowfullscreen></iframe>

To fix the hidden dropdown issue, what you need is just a simple wmode=transparent code.

What Is WMODE?

WMODE is the Window Mode setting for Flash/SWF. Its possible values are “window”, “opaque” or “transparent”.

• wmode=transparent: sets the Flash/SWF background to be transparent. This allows the background color or image of the content page behind to show through. This is required for overlay (such as jQuery Overlay) contents to show the Flash/SWF.
• wmode=opaque: hides everything on the page behind Flash.
• wmode=window: plays in its own rectangular window on a web page

How Do I Use WMODE?

What you need to do is simply add the “?wmode=transparent” at the end of src parameter and “wmode=transparent” at the end of <iframe>

<iframe width="560" height="349" src="http://www.youtube.com/embed/rLVCjnEGrqQ?wmode=transparent" frameborder="0" allowfullscreen wmode="transparent"></iframe>

Hope this helps!

The post Dropdown Menu Hiding Behind <iframe> appeared first on Stampede: the strategic design & technology company.

Handcrafted CSS

Dan wrote everything inside this book based on CSS3 though it can easily merge with CSS5 in the future. He also covers ways to enriching web design using uncommon CSS3 properties and most importantly, how to render high-degree of style-consistency on every browser including IE6. In other words, Handcrafted CSS provides several ways to write CSS towards the same end result. There are 7 chapters in total, all covering CSS3 markups commonly used during web development with accompanying images for better details.

Chapter 1 covers a variety of styling the list element, particularly the <ul> element. Really simple modifications like font size adjustment, longer menu, floating, hovering treatment and positioning can lead to better, more usable listing style. This chapter also includes notes on how to change links into table and vice-versa.

Chapter 2 is all about “Rounded Corners”, deservedly so. It explains the handy property of border-radius on WebKit family browser (e.g Firefox and Safari). This method solves the problem of using of four extra <div> through the use of only one flexible rounded-corner box. With border-radius property, we can easily style flexible rounded input box – a frequent nightmare for many web developers. For me, I’m juts happy this method won’t screw other element and doesn’t require anything else besides CSS. The only downside is that it doesn’t work on IE7 and IE6, where all those sexy rounded corners and only shown as square, uninteresting boxes. I’ve also learned that twitter uses border-radius method.

RGBA is the main focus in Chapter 3. RGB stands for Red Green Blue – the color model that you can combine to create multitude hues – while RGBA stands for Red Green Blue and Alpha. This chapter will explain why there is an “alpha” value in RGB. In this chapter, Dan also show us how how to optimize color usage using CSS.

Chapter 4 covers text-shadow and box-shadow properties, again stuffs that are widely use by developers around the globe. Similar to “border-radius”, it eliminates the need to use any background image for the drop shadow effect. This means user can now easily change text and elements with drop-shadow on the fly.

Chapter 5 combines floating, stylesheet grouping, css framework and css reset. There are ways to tackle float, or known as “problem trigger”. The book suggests two solutions – clearing the float container and using single declaration for each element (will need long list css). It also shows the ways to to quarantine IE hacks and patches into developer’s own stylesheet. This chapter also discusses the two most popular frameworks at present: Blueprint and 960 Grid System. They are different but aims for the same objective – to make developers’ lives easier. The part about CSS reset covers essential things that you need to do to neutralize default css property values.

Chapter 6, The Fluid Grid is contributed by Ethan Marcotte and it elaborates more on the Grid System Framework. How to implement? What’s the problem expected to occur? Which browser doesn’t work? What is the solution? You’ll find pretty much everything about grid here.

Chapter 7 is dedicated to the details in web design craftsmanship. It discusses how typography can influence your design and gives valuable examples on how to make things more exciting for flash-like sliding animation using jQuery. Shifting backgrounds, collapsing/hiding image and the use of sliding bars are all new ways to sizzle up your web presence.

All in all, I have thoroughly enjoyed Handcrafted CSS. If you’re a front-end web developer or designer looking to harness CSS3 in your work, this book is a great start for you.

Handcrafted CSS: More Bulletproof Web Design
By Dan Cederholm and Ethan Marcotte.

The post Book Review: Handcrafted CSS appeared first on Stampede: the strategic design & technology company.