Got Chance

blog

Google Launches Font API

Google has announced the launch of its new Font API which enables anyone to use fancy fonts on their websites. This is done using CSS3′s @font-face. You can select the font from Google’s font directory and they provide your a CSS file to link to. Just add it to your web page and you’re free to use the font anywhere in your CSS.

I currently use Mido from FontSquirrel for headings on this blog. Its basically the same technique. But Google just makes it easier. Also, Google’s font API will be faster and also you can save a handful of bandwidth by not loading the font files from your server.

Google’s API competes directly with the freemium service TypeKit and the still-in-stealth service FontDeck. But, Google’s font directory is still very young and they have only 18 fonts available currently, compared to TypeKit’s 400+ fonts. But, its Google. The font directory will expand rapidly very soon. Also, its free. Who doesn’t love freebies !?

The Magic of z-index : The 24Ways Effect

When someone talks about the z-index CSS property, the first thing that comes to my mind is not a fancy lightbox or stacked up social media buttons, but the 24Ways website. According to me, its the most awesomest (i like that word, 😉 forgive me ) implementation of z-index property. Combine it with the opacity property and you can create some beautiful effects.

For detailed information about the z-index property and what all can be achieved using it, check out this post on Smashing Magazine. I’m not going to elaborate on that. In this short tutorial, you’ll learn how to use z-index like how 24Ways does.

DemoDownload

Step 1 : Mark-Up

As with any CSS effect, no special HTML mark-up should be added. It should be simple and straight-forward. So, this is the HTML code i’ll be using. No aero-science here. Simple, normal HTML.

	<div id="menu">
		<ul>
			<li><a href="#">2008</a></li>
			<li><a href="#">2009</a></li>
			<li><a href="#">2010</a></li>
			<li><a href="#">2011</a></li>
		</ul>
	</div>
	<div id="site-name">
		<h1><a href="#">gotchance.com</a><h1>
	</div>
	<div id="content">
		<div id="nav">
			<ul>
				<li><a href="#">january</a></li>
				<li><a href="#">febraury</a></li>
				<li><a href="#">march</a></li>
				<li><a href="#">april</a></li>
				<li><a href="#">may</a></li>
			</ul>
		</div>
		<p>Lorem ipsum DUMMY TEXT</p>
	</div>

Read the rest of this entry »

Why I Encourage Lorem Ipsum

Recently I happened to read a post at Design Informer which states that “Lorem Ipsum is Killing your Design“. For those who’re not aware of it, Lorem Ipsum is a dummy place-holder text used by designers in their design mock-ups. Kyle says that Lorem Ipsum (referred to as Lipsum here after) kills your design and distracts client’s attention away from the design. In my humble opinion, i disagree with this. Lipsum is actually a boon to designers. Very often, creating awesome designs is not just enough. It doesn’t appeal unless it contains necessary amount of text. Lipsum saves the designer’s time by making him not think up new text every time.

Also, earlier when designers used Lipsum, clients used to wonder what it was. But, the practice is very common now that almost everyone knows about Lipsum. I’ve had clients who make simple mock-ups which themselves contain Lipsum.

And more than the normal Lipsum text, nowadays i use the more useful HTML-Ipsum, which wraps the classic Lipsum text with various HTML tags in various formats. What’s your opinion on this ? Do you think Lipsum kills your design ?

All New GotChance.com

As you can see, i’ve redesigned GotChance.com completely. Comments and suggestions are welcome. From here on, i’ll be blogging quite frequently here, on web designing and web development. A couple of posts have been lined up already.

Also, i’m available for freelance projects. If you’d like to hire me, get in touch.

And finally, i’ve been working on a couple of web apps recently. I’ll be writing about them soon.

HOW TO : Put Your Own “Feedback-Style” Twitter Badge

Few days back, i wrote a post about a Twitter badge, that looks like Uservoice’s Feedback button. However, there were certain limitations in using it :

  • The image is hosted on their server, not yours.
  • It includes a small “?” link that leads back to their website.
  • It relies on Javascript. Won’t work if javascript is disabled.
  • Limited to the texts “Follow us”, “Follow”, “Follow Me” and “My Twitter”

When Mike left a comment asking if it was possible to get the image hosted on our site, i decided to write a quick tutorial on how to put such a badge on your site without relying on external site.

Personally, I hate to follow tutorials without knowing the outcome. So, check out the DEMO to see what you’ll be creating.

Step 1 : The Markup

The markup is really simple. Just link your image to your twitter account and wrap it inside a div with an id, as follows :

<div id="twitter-badge">
	<a href="http://twitter.com/shrihari"><img src="twitter.jpg" alt="Twitter" /></a>
</div>

That code should go just before the closing body tag : </body>.

Step 2 : The CSS

The CSS is also amazingly simple. Firstly, you need to make sure the an image with a link has no ugly border around it. If you’re using WordPress, chances are high that your theme author has already done this, unless you’re using some spammy theme. Next, you need to fix the position of the image.

img, a img { border: 0; }
#twitter-badge
{
	position: fixed;
	left: 0;
	top: 200px;
}

If you want the image on the right side, you’ve to replace left: 0; with right: 0;

Check out the demo here. If you’ve any questions feel free to drop them in the comments.