For our last post Cody asked me to create these two glossy icons for the jFeedback jQuery plugin. We thought, we could post the icons as well with the Photoshop file because you might want to change the color or the symbol.

So, here they are, two incredibly awesome glossy icons :-) “open source”, of course.

Here you can download the ZIP file with the psd Photoshop file and the set of four png icons (256 x 256):

jFeedback Icon Set

Enjoy!

1. PHP CAPTCHA Library for reCAPTCHA

http://recaptcha.net/plugins/php

2. Ajax Fancy Captcha – jQuery Plugin

http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin

3. Securimage (PHP)

http://www.phpcaptcha.org

4. JCaptcha (Java)

The open source java framework for captcha definition and integration
http://jcaptcha.sourceforge.net/

5. The Captcha

http://www.thecaptcha.com/

6. 3D Captcha

http://www-personal.umich.edu/~mressl/3dcaptcha/

7. ASSIRA

http://research.microsoft.com/en-us/um/redmond/projects/asirra/

8. Captchas.net – Free CAPTCHA Service

http://captchas.net/

9. Visual and Audio PHP CAPTCHA Generation Class

http://www.ejeliot.com/pages/php-captcha

10. freeCap PHP CAPTCHA

http://www.puremango.co.uk/2005/04/php_captcha_script_113/

11. Cool PHP CAPTCHA

http://code.google.com/p/cool-php-captcha/

12. Quick CAPTCHA 1.0 (PHP)

http://www.web1marketing.com/resources/tools/quickcaptcha/

13. Jcap (Javascript)

http://www.archreality.com/jcap/

14. Simple Javascript CAPTCHA

http://sourcefirst.wordpress.com/2007/05/02/simple-javascript-captcha/

15. CAPTCHA Service – Web Form Spam Protection

http://webspamprotect.com/

16. cryptograPHP

http://www.captcha.fr/

17. Free CAPTCHA Form-To-Email Script

http://www.snaphost.com/captcha/

18. hoomanTest: A Mootools Bot Filtering CAPTCHA Class

http://fragged.org/dev/hOOmanTest_captcha_for_mootools.php

19. Simple PHP-GD CAPTCHA Image

http://www.php-help.ro/php-tutorials/simple-php-gd-capcha-image/

20. Simple AJAX CAPTCHA

http://blog.smileylover.com/simple-ajax-captcha/

21. AJAX CAPTCHA 1.0

http://webscripts.softpedia.com/script/PHP-Clases/AJAX-CAPTCHA-50370.html

Enjoy!

Here is the result of my experiment with some example banners (click on the image to see the demo page):

Click on this image to see a demo

You can download the ZIP file with all the images here: CSS3 Banners ZIP

The main idea is to create an image using the Urban Scrawl Photoshop brushes and to put it as the logo of the banner.

The CSS is built up like this:

h1{
padding-top: 10px;
font-size: 36px;
padding:0px;
margin: 0px;
line-height:100px;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
width:310px;
float:left;
}
.slogan{
float: right;
margin:75px 20px 0px 0px;
font-size: 20px;
}

Here we define the heading and the slogan of the banner. In the next class we define the general banner layout:

.banner{
width:620px;
height: 100px;
margin:7px auto;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding-left:190px;
}

And now, we define each individual banner, by changing the background image, which is the logo, the font color and the font-family:

.banner0{
background: #656964 url(banner0.png) no-repeat center left;
}
.banner1{
color:#37535B;
background: #31B3DA url(banner1.png) no-repeat center left;
font-family: "Arial Narrow";
}
.banner2{
color:#656A64;
background: #81C573 url(banner2.png) no-repeat center left;
font-family: "Palatino Linotype";
}
.banner3{
color:#37535B;
background: #656964 url(banner3.png) no-repeat center left;
font-family: "Arial Narrow";
}
.banner4{
color:#2B8EAC;
background: #656964 url(banner4.png) no-repeat center left;
font-family: "Century Gothic";
}
.banner5{
color:#37535B;
background: #C6CC10 url(banner5.png) no-repeat center left;
font-family: "Trebuchet MS";
}
.banner6{
color:#37535B;
background: #b8d8fb url(banner6.png) no-repeat center left;
font-family: "Arial Narrow";
text-transform: uppercase;
letter-spacing: 4px;
}
.banner7{
color:#6e9cf9;
background: #a08c60 url(banner7.png) no-repeat center left;
font-family: "Arial Narrow";
font-style: italic;
}

The html looks like this:

 <div class="banner banner0"></div>
 <div class="banner banner3"></div>
 <div class="banner banner1">
  <h1>Sweet City</h1>
  <div class="slogan">there's a lot to discover in your town</div>
 </div>
 <div class="banner banner2">
  <h1>Automobile</h1>
  <div class="slogan">The true fan club</div>
 </div>
 <div class="banner banner4">
  <h1>Arrow Shmallow</h1>
  <div class="slogan">Best Services</div>
 </div>
 <div class="banner banner5">
  <h1>Radio Header</h1>
  <div class="slogan">Listen to the music!</div>
 </div>
 <div class="banner banner6">
  <h1>Energizer</h1>
  <div class="slogan">The Smarter Power</div>
 </div>
 <div class="banner banner7">
  <h1>Brickyton</h1>
  <div class="slogan">We build everything</div>
 </div>

The first two banners are complete images, but since we apply the general style of .banner to them, we get the rounded and shadowed borders.

We apply both classes, the .banner and the .bannerN to each element. This will apply the common style and the individual style to the element. Keep in mind, that we can control which property gets overwritten by defining the order of class application. Everything that we define in the individual class .bannerN will replace the property (if it existed) of the .banner class.

Here is the demo link again: DEMO

And also the ZIP: CSS3 Banners ZIP

Tamsin Baker’s homepage: http://www.tamsinbaker.com/

Thank you, Tamsin, and enjoy!

Update Note: There are some issues with older browsers and, of course, Internet Explorer, because of the color depth. To avoid problems of having the image in a slightly different color than the background color of the banner, you should use web colors when creating banners like these…

Click here to download the set as ZIP file: 32 arrow icons ZIP

Enjoy!

Glossy buttons

Download them as a zip file: Buttonset ZIP Download

Enjoy!