Yahoo’s Text-Sprite Generator

Some of them called it as Yahoo's secret text sprite generator, because i think yahoo has not publish it officially. This is a pretty cool stuff by yahoo, which will generate a sprite to the text given.

Basically it’s a URL you can hit which will create a perfect sprite-ready PNG graphic of the text you include in the URL. Check it out for yourself:

Here is the url...
http://l.yimg.com/img.sports.yahoo.com/static/bir/headline?txt=webdevelopertut

Just copy the link and paste it in the address bar. You can have your own text just like i have used webdevelopertut. The image generated is always 468×68px and the color is white on top and yellow-orange on the bottom. Where you can use it for hover also.



For SEO, you can use CSS font replacement technique to have both text and image versions.

Read more...

Float bug fix in div to expand

Many of would find a problem when using a block(div) called a container with the background color, where you don't want to use float or height to the div. And in the inner div of the container you want to give float to it.

You can find this issue in most of the browser like ie, firefox, the container will not expland as the inner div.

For Example:
HTML:
<div class="container">
<div class="inner_div">
blablabla <br> blablabla <br> blablabla<br>
</div>
</div>

CSS:
.container{width:300px;background:red;}
.inner_div{float:left;width:200px;font:12px arial;}

The red background in the container div will not expand when you add content to the inner div. So here is a simple trick to get the container div to expand.

Just add
.container{overflow:hidden;}

Will make the job easy.

Read more...

Principles for keeping your code clean

The art of writing HTML and CSS is the foundation of a beautiful website. The advantages of clean, semantic HTML are many, but so many websites suffer from poorly written markup.

Most of the attractive website have beautiful designs but fails to pass in the w3c validations. This is because of bad coding. These are the basic and most follow principles for keeping your code clean and have a semantic structure. They are as follows...

1. Strict DOCTYPE
2. Proper indentation
3. Nest your tags properly
4. Character set & encoding characters
5. Eliminate unnecessary divs
6. Use better naming conventions
7. Leave typography to the CSS
8. Use Class/id the body tag
9. Keep your CSS and JavaScript external
10. Validation

This will be a great start to write clean HTML, but there is still lots more. When starting from scratch, this seems to be much easier. When trying to fix existing code, it feels a lot more difficult. SO from the next project, just think what you can make it right.

Read more...

Colour Picker for web designers

Designers used to develop the website with the combination of colors using photo shop to make the website more attractive. Now a days developers used to select the color with the help of addon called color picker using firefox.

Imagine when you move to a place where you see some beautiful colors, pictures, spots etc.. where you want to take a combination of those colors, when you don't have a laptop or camera with you. What you will do?


Designer Jinsun Park from Korea has come out with a simple tool called 'Color Picker', which is just look like a pen. This color picker pen consists of

1. RGB Color sensor.
2. Color scan button.
3. RGB ink cartridge.
4. Color display.
5. Ball type.

Place the pen against an object and press the scan button, the color will be detected by the color sensor and the RGB cartridges in the pen will mixed the required inks to create the target color. And you can also draw the colors in a paper with this pen.

Now it has become very easy with this pen, where ever you go just carry the color picker with you.

Read more...

CSS font replacement technique

Many of us would like to have headers with nice custom fonts on our website. For instance, logo which we like to have in an attractive graphics. But this stuff can be done only with the help of <img> tag, not with the regular text.

The proper HTML tag to use for headers is the header tag (e.g. <h1>, <h2>, etc). This is best for accessibility as well as SEO. Instead of using an image, we will think that having a text based logo will be much preferable for more SEO point of view even though we have an alt tag to the image. But text might not give you an attractive look. So how to use css font replacement technique to use both text as well as image in logo.

You may also be aware that CSS allows us to place background images on elements. Also text indent to align the text. We can use a proper header tag, but also use an image.
We need to somehow hide the text so that only the image is visible. Here it goes...

HTML:
<h1 class="logo">
Webdevelopertut
</h1>

CSS:
h1.logo {
width: 200px; height: 175px;
background: url("images/logo.jpg");
text-indent: -9999px;
}

Basically this technique creates the text goes way off the screen to the left. The text is being left-justified and cannot be seen. instead image is placed in the top left of this box.

When both css and image is on or off this method will get pass and fails when css is on and image is off. Most of them are now following this technique.

Read more...

Title and Alt attributes on Images for ie8

The alt attribute is no longer displayed as the image tool tip when the browser is running in IE8 mode.I have decided to add title attributes to most of my images so the subject is described on a mouse over.

The alt attribute plays most important role, when the images could not be showed to the user for some reasons. It also helps, when people are searching for images in Google Images, this alt attribute used to display the images while searching in it.

Now its similar to Firefox and others in that alt attributes are not described on a mouse over. Most of the traffic is from users using IE (although Firefox is coming up nowadays..) I decided to start on this.

For example:
<img src="images/logo.gif" width="100" height="100" alt="webdevelopertut logo" title="logo">.

Read more...

Facebook launches contest for Indian developers

Facebook a Social networking site has launched Facebook Developer Contest India, a contest for Indian developers to show their web development skills by creating Facebook applications and Facebook Connect Integrations.

According to Facebook, entries will be judged on originality, business potential, social utility, usefulness, expressive features, intuitiveness and potential of the application. To enter the contest, participants are required to create a Facebook platform application for use on the Facebook site or Facebook Connect integrations in English or Hindi and register their application in the contest’s homepage.

Duration of the Contest
The Contest begins at 12:30:01 pm Indian Standard Time on July 2, 2009 and ends at 12:29:59 pm Indian Standard Time on September 11, 2009 (the latter being the “Closing Date”). Any entry submitted after the Closing Date will not be eligible for consideration in the Contest.

The three winners will get $4000, $2000 and $1000, in each of the two categories. The contest ends on 11th September and the winners would be announced in the last week of September 2009.The Contest is open to all individuals who are over the age of 16 at the time of entry and are resident in India (the “Participants”). Participants must have a Facebook.com account to participate in the Contest.

For more information and conditions about the contest, please logon to facebook.com.

Read more...

Vertical align text in floating div using css

Do you know how to vertically align a text in a floating div? When a content is dynamically generated and you want to align it automatically according to it?

Today i was experimenting about this for a long time and finally i have got a solution which will work in all the browsers including ie6. There are many ways of doing it, but i would like to work the code in all the majore browsers inculding ie6.

So here is the code...

HTML:
<div class="contentdiv">
<p>It works! Vertically Center Align!</p>
</div>

CSS:
.contentdiv{ width: 135px; height: 84px; display: table; border:2px solid red;}
.contentdiv p{ display: table-cell; vertical-align: middle; text-align: center;}

Hack for ie:
.contentdiv p{*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");}

According to the height you increase, the content will get vertically aligned center. My only worry is iam using expression. We must try to avoid using more expression. But it looks very simple. Fine, any other method of handle this will be a great help! Please feel free to post.

Read more...

Browser Extensions For CSS Coding

In my previous post Tools for web developers, i have written about the common tools like firebug, ie developer tool etc, which will be much useful for developers. Here are some more additional extensions which will be much useful. These extensions helps the developers to edit live html and css, to check css rule and much more in other browser like ie, opera and safari. They are

1) Firebug Lite
2) ReCSS
3) Dust-Me Selectors
4) CSS Usage
5) PixelPerfect Firefox Plugin
6) Code Burner

1) Firebug Lite
Most of us have used firebug in firefox, but how many of them are using firefox browser? Firebug Lite brings the goodness of Firebug to Internet Explorer, Opera and Safari. Its a Javascript file that can be included in web pages to enable Firebug features in browsers other than Firefox.

2) ReCSS
Recss is other wise known as reload your css. Recss1.1 is a bookmark let, where you can drag it to your bookmark let tool bar. This bookmark let will make refreshing your css which also have got safari support.

3) Dust-Me Selectors
Dust-Me Selectors2.11 is a FireFox plugin that finds unused CSS selectors to help you keep your code clean.

4) CSS Usage
CSS Usage is a Firebug extension that allows you so scan multiple pages of a site to see which CSS rules are actually used.

5) PixelPerfect Firefox Plugin
PixelPerfect Firefox Plugin, generates an overlay over a web composition over top of the developed HTML.

6) CodeBurner
CodeBurner is a Firefox add-on, it with reference material for HTML and CSS. It contains contains a search tool for looking up HTML elements, attributes, and CSS properties.

Hope this article will be useful for you....

Read more...

CSS class inherit one or more other classes?

Question:
Is it possible to make a CSS class that "inherits" from another CSS class (or more than one).

For example:

.test { width:200px;display:block }
.logo { background:#cc;border:1px solid #4d4d4d }

I'd like to do is something like this:

.combine
{
.test;
.logo
}

where the ".combine" class would use all the attributes like width 200px, display block, background color #ccc and border color.

Answer:
Good Question my friend. But i think you can't do something like that. It would be much helpful for a developer if this is possible! Instead you can use multiple classes to a single block element.

For Example:
<div class="test logo ">text text text</div>

I heard that there is a tool called lesscss which iam not sure whether it will work in all the browsers. That tool might solve your problem, but do check for browser compatibility.

Read more...

Take full screenshots of your webpage? its easy!

Tired of taking screen shots from browser plug-ins or planning to buy a screen shot capture software which required more money to invest?

Here is a simply way to take screen shot of your full web page without installing any software or browser extensions.

Aviary.com is a suite of powerful creative applications that you can use right in your web browser. It is an online tool where you can take the screen shot from the live site. Just goto aviary, and paste your url to capture. You have the option to set your Resolutions, Quality, Region(entire page or above fold) to take the screen shot.


You can save the image to the desktop and add annotation using the Type Tool, freehand brushes, arrows, image editor, color palette and other tools available in the Aviary editor. What else you want?

There are many other online services like aviary, but they won’t do full pages.



Aviary is also providing other services like

1) Image Editor (Just like basic photo shop)
2) Color Editor
3) Effects Editor
4) Vector Editor
5) Image Markup
6) Screen Capture

TO use this tool, they will ask you to register in order to save your work. But don't worry it is absolutely FREE! It can’t get easier than this.

Read more...

Rounded corners using css

The simple way of using rounded corners using css with the header and the content in it.

HTML:
<b class="b1h"></b><b class="b2h"></b><b class="b3h"></b><b class="b4h"></b>
<div class="headh">
<h3>Here is your Header!</h3>
</div>
<div class="contenth">
<div>No images!</div>
</div>
<b class="b4bh"></b><b class="b3bh"></b><b class="b2bh"></b><b class="b1h"></b>

CSS:
.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}
.b1h {height:1px; background:#aaa; margin:0 5px;}
.b2h, .b2bh {height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.b3h, .b3bh {height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.b4h, .b4bh {height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.b2bh, .b3bh, .b4bh {background: #ddd;}
.headh {background: #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contenth {background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.contenth div {margin-left: 12px; padding-top: 5px;}


With this code you can easy create a fill based header and border based rounded corner content in it. Just customize the code to change the color if needed.
This article will tell you about the fill and borderd rounded corners.

Read more...