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.

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.

HTML 5 is an extension of HTML 4 and XHTML 1. It gives web developers new functionalities for a more dynamic and improved user experience. This bit is interesting to me because the emphasis is now given to users, not only us developers.

It allows for better cross browser compatibility between mobile, desktop, netbook, pda, e-reader and whatever gadget there is in the future with the ability to display a web page.

Kevin Purdy from the Lifehacker sums it all rather neatly:

HTML 5 is a specification for how the web’s core language, HTML, should be formatted and utilized to deliver text, images, multimedia, web apps, search forms, and anything else you see in your browser. In some ways, it’s mostly a core set of standards that only web developers really need to know. In other ways, it’s a major revision to how the web is put together. Not every web site will use it, but those that do will have better support across modern desktop and mobile browsers (that is, everything except Internet Explorer).

The Technicalities

We often define class or id to any major <div> for styling on CSS such as <div id="header"> or <div id="footer">. In HTML5, most common div like header, footer and side content now have their very own element: <header> (for header block), <nav> ( for navigation menu ), <article> (for content), <section> (for generic document inside content), <aside> ( for side content ), and <footer> (for footer block). For a developer like me, this simplifies the entire development process and reduces page load time without the need to assign class or id to your markup.

Remember the long url and <object> or <iframe> tag for fitting video into your website? HTML5 comes with a nifty solution – the <video> element. It can now easily embed video without using the object element. There is some debate about the codec we should use as default, though. You will find an interesting attempt at breaking down the codec debate here.

For the table-base web site, the <td> element is no longer allowed in <thead>. Besides improving page load, I find it useful for the tricky bit when I need to add emphasis to a certain content. I have been using <span> frequently, ranging from font and font color change to adding a different hue to background. HTML5 utilizes <mark> instead of <span> to highlight these content. I look forward to this.

The most stunning thing for me about HTML 5 is the contenteditable attribute. Any element with contenteditable attribute will allow the designated user to add and edit text on the web page, without having to use an editor. And it’s all LIVE.

HTML 5 also packed up the input element with more control, one of which is <input type="tel">. This will automatically change the input box format for telephone number. For the large input box such as comment box, i often use “textarea”. But there are new member of “textarea” in HTML5 called “textLength”. So that, we can easily define the length of the text inside the input box no matter how big the box is. Another cool thing about HTML5 is the capability to drag and drop pretty much anything. It allows you to drag and drop information block on a web site such as URLs, files, bookmarklets and anything into a drop zone. This was achieved by javascript before. To be able to do this with only markup is a refreshing change.

Another new element worth a mention is <nav>. Current HTML relies heavily on CSS to get navigation to work with <ul> or <ol>. In HTML5, <nav> will float the links side by side automatically.

It is also a lot easier to arrange the layout with HTML5. The <hgroup> allows you to group headings, letting you manage headers more effectively. If your content is heavily embedded with video, table or photo, you might want to give <figure> a try. This elements will allow you to add caption for your embedded content. You also can used <figure> element in conjunction with the <legend> element to provide a caption for the contents of your <figure>; element.

Dropped

Apart of the new elements, I noticed that a few deprecated elements have not made it to the latest version. They are <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> and <xmp>.

All in all, HTML5 is packed with cool new features, code slimming advantage and a few slick solution to the current way we build front-end. While it attempts to solve issues found in earlier iterations of HTML, HTML5 also addresses the needs of Web Applications – an area previously not adequately covered by HTML. To end with an understatement, it will also change the way we use the web in the future.

(Photo by Anja)

The post My Take on HTML 5 appeared first on Stampede: the strategic design & technology company.