Playing with Google Font API and WordPress

With new webdesign trends, standard fonts such as Arial, Times and Verdana aren’t enough to give our blog/website the loon&feel we want.

That’s why today we’ll discover the magic of Google Font API.

The Google Font API lets you include in your pages high-quality web fonts provided by the Google Font Directory.

This means you can use custom fonts in your design, and they are hosted and served by Google.

That’s nothing new, since services like Typekit are already on the wild for quite a while, and scripts like cufòn already enhance the beauty of most premium templates.

But unlike cufòn, texts rendered with the Google Font API are selectable, and there isn’t any copyright issue, and unlike Typekit, Google Font API is free.

So let me show you the simplest example… Read more

JQuery powered lights off effect

A couple of days ago a fan of my Facebook page asked me for a script to make the effect you see on this page.

Obviously simply reverse-engineering the script wouldn’t be enough for me, so I decided to create a lights off effect that make any content in a given div remain highlighted while the rest of the page fades to black (or to any color).

I used JQuery to manage the fade effect because it’s the best Javascript library available at the moment.

As a developer, I also tried MooTools and scriptaculous but believe me JQuery is some steps ahead.

Now let’s see this script: Read more

MagOrMin – an old php based game

This is an ooooooold (let’s call it) game I explained for a web programming class in 2003 or 2004.

It was made to explain some basics about Php, sessions, MySql and styles. All in one.

That’s how students learn… all in one and with a real world example.

It’s just a “guess if next number will be higher or slower than the current one” concept, the same that I applied to GuessNext last year.

It’s called MagOrMin and the name comes from the italian translation of “higher” (maggiore) and “lower” (minore).

Simply click to say if next number will be higher or lower, gain extra lives and compete for the high scores.

I plan to port the game in Ajax, adding a so-called “Web 2.0″ style and convert it into a Facebook application with all features… you know… I must monetize everything…

Meanwhile here it is the source code: Read more

Create a Lightbox effect only with CSS – no javascript needed

You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect.

When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground.

I mean this effect

In the upper example, when clicking on a photo the site fades to black and shows the photo, in the lower one when clicking on “login” the site fades to white and shows the login form.

There are tons of Lightbox scripts in the web, each one with its unique features and limitations, but all require massive use of Javascript or the installation of javascript frameworks.

In some cases, there are “lightweight” versions with “only” 40KB of Javascript.

This example does not want to compete with those scripts, but if you are looking for a simple, 100% CSS, 0% javascript lightbox, this may help you.

Features of this Lightbox:

100% CSS as said
You can insert any content in it (some scripts out there only allow images) Read more

Managing crossbrowser opacity with CSS

Sometimes you may want to change the opacity of some images with CSS.
There are different ways to do it, according to the browser you are using. In this example, we’ll see both Explorer and Firefox.

Firefox

In Firefox, the style is -moz opacity: xx where xx is a number from 0 to 1, where lesser equates to more transparency (basically, it’s the alpha).

1

<img style="-moz-opacity:0.5" src="/images/google_logo.gif">

The above image should look solid in Explorer and 50% transparent in Firefox.

Explorer

In Explorer, the style is filter: alpha(opacity=xx) where xx is a number between 0 and 100 (again, it’s the alpha)

1

<img style="filter: alpha(opacity=50)" src="/images/google_logo.gif">

The above image should look solid in Firefox and 50% transparent in Explorer.

Firefox and Explorer

To create an image with transparency both in Firefox and Explorer, you need to use both styles

1

<img style="filter: alpha(opacity=50); -moz-opacity:0.5" src="/images/google_logo.gif">

This image should look 50% transparent in Explorer and in Firefox.

Enhanced country selection with Css and Javascript

How many times you had to choose your country in a form, with a old, simple popup?

Time to change the way you choose your country (or anything else) with a bit of Css and Javascript.

I am showing the example in a iframe not to mess with WordPress styles.

As you can see, when you move the mouse over the text input, a list with (almost) every world country and flag appears, and when you click on a country, its ISO code is displayed into the text input.
When you move the mouse out of the country list, it closes.

How can it be made? Read more

Submit button “inspired” to Macromedia Buttons

I like very much Macromedia buttons, and I wanted to have it one like these in my forms.

That’s all… here it is

the style is

1

<input style="width: 120px; border: 3px double #999999; border-top-color: #CCCCCC; border-left-color: #CCCCCC; padding: 4px; background-color: #EEEEEE; background-repeat: repeat-x; color: #333333; font-size: 11px; font-weight: bold; font-family: Verdana, Helvetica, Arial, sans-serif;" type="submit" value="Push me" />

Bye.