naioo.com Wallpaper August 2010 (1900×1200, JPG)

So what’s up here? I finally did a little further work on the blog template, like adding Google Webfonts to style the headlines (“Droid Sans” is really nice) and a Captcha to fill out before leaving comments. The massive amount of spam everyday is more than annoying. Some other small tweaks here and there. Still need to add a searchfield, finish the footer layout and so on.

There’s also a first version of the Aqua Smiley Generator (v0.4) available, which allows you to extend the Aqua Smileyset with your own creations.

32 Free Web Development / Application Icons

Download and start using them. There’s no license or restrictions. The .psd file comes with four ready-made color variations (blue, orange, green and grey) but you can easily change them to the color of your choice.

Though there are now usage restrictions at all, it would be nice if you link back to naioo.com if you like and use the icons. Thanks!

Download

WebDev Iconset (.ZIP, ~68kb)

Now, with the release of Firefox 3.6 (Safari / Webkit supported that a bit earlier) we don’t need any images at all, thanks to the “moz-linear-gradient” / “webkit-gradient” property.

In detail, the buttons use the same code as the buttons from my last example. The only thing we have to change is the background attribute. Instead of using an image, we now add a CSS generated gradient, that gives our button a more plastic look. This is done by using “moz-linear-gradient” respectively “webkit-gradient” for Webkit based browsers. For our buttons, it looks like this:

background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
background:-moz-linear-gradient(top,rgba(255,255,255,1),rgba(185,185,185,1));

This draws a linear gradient from white at the top to a light grey at the bottom. Instead of using the RGBa color values you could also use #Hex codes, as we don’t need any transparency here.

In addition to the previous example I also added an “active / focus” state to the CSS in order to make it feel more like a real button people are used to.

Click here to view the full source code and a live demo.

• Smooth scrolling background with CSS & JavaScript
• Great: Pure CSS rolling Coke Can
• Monster drawings from children painted by an artist
• Freefont “PT Sans” by Paratype
• And of course, something on the iPad – interesting read!

I’ll make some changes to my blog within the next days. The footer finally needs some content, a search field is still missing and the sidebar looks a bit empty by now. There are still a lot of things to do around here…

Update!

This example uses a small background gradient image to achieve the plastic look of the button. Click here for an updated version of the CSS buttons without any images at all.

The main CSS markup

.btn {
	display: inline-block;
	background: url(btn.bg.png) repeat-x 0px 0px;
	padding:5px 10px 6px 10px;
	font-weight:bold;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
	border:1px solid rgba(0,0,0,0.4);
	-moz-border-radius: 5px;
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}

By using RGBa color values, the button and text shadows always blend well with any color we’ll add to our button later on. No matter if we want the button to be green, red or blue. The code above always stays the same.

Using the common hex-values, we would get a result similar to the one on the right when hovering the button.

Adding the color

.blue		{background-color: #CCCCCC; color: #141414;}
.blue:hover	{background-color: #00c0ff; color: #ffffff;}

.green		{background-color: #CCCCCC; color: #141414;}
.green:hover	{background-color: #8aff00; color: #ffffff;}

.red		{background-color: #CCCCCC; color: #141414;}
.red:hover	{background-color: #ff004e; color: #ffffff;}

This is where we define the different color variations. All we need to change is the text- and background color along with the mouseover/hover values. To change the color of a button, just attach the corresponding class to the main button class.

Click here for a live demo.

Of course, there’s a lot more. After sorting everything and moving the crap out, I’ll put up a kind of online archive / gallery where you can browse all that old stuff.

There are three different icon sizes available:

• RSS Robot Icon (256×256, PNG)
• RSS Robot Icon (128×128, PNG)
• RSS Robot Icon (48×48, PNG)

With the first few smileys created back in 1999, the Aqua Smileyset has grown to a collection of over 80 high-quality emoticons nowadays. Both animated and static smileys offer you the right emoticon for almost every mood.

And best of all, they’re totally free – no license, no restrictions. Use them wherever you want. For your website, blog, message board, mails, whatever …

Here’s what you get:

• 58 static smileys
• 24 animated smileys
• .GIF-files /w transparent background
• Absolutely FREE for both private and commercial usage

 Aqua Smileyset Download (.ZIP, ~250kb)