2010 July | Codepal

Archive for July, 2010

Creating a Neon Blink Effect for your Forms using CSS3 and jQuery

Saturday, July 17th, 2010

Well thanks to the bright new kid on the block, CSS3, spruced up with a bit of jQuery, I will show you how to build a nifty effect to enhance your forms.

Am sure that this cool Neon blink effects in forms are going to be useful for a lot of purposes so don’t miss my tutorial on 1stWebDesigner.com.

In this tutorial, we have made use of @-webkit-keyframes which works only in browsers using the Webkit layout engine like Chrome and Safari. For browsers like Firefox and Opera, where there is no alternative, we will have to gracefully degrade the effect, which in this case will be just a box-shadow on focus. Internet Explorer ( till version 8 ) cannot render most of what we will learn here, but IE 9 does seem to be very promising from what I’ve seen in the recent platform preview.

Tags: CSS 3, Development, forms, how to, jQuery
Posted in Tutorials | 4 Comments »

Grunge Template

Friday, July 16th, 2010

Psdnation.info is a site dedicated to tutorials, articles, resources and artworks on photoshop. They provide many freebies which includes high quality PSD website templates. They made Grunge available as a fully editable, layered, grunge PSD website template. Professionally designed by them and developed by us, this high-quality freebie from PSDNation is a now also available as a xHTML/CSS template for the web development community. It can be used as a blog template or can also form a basis for CMS integration.

Tags: CSS 3, Dark, Free, Grunge, xHTML
Posted in Blog, Downloads | 21 Comments »

How to Create a Cool Slide Out Panel with CSS3 only

Monday, July 5th, 2010

I wrote a tutorial for 1stwebdesigner.com It is about how to use CSS3 to achieve goals which were only possible using javascript libraries like jQuery and Mootools. In this tutorial, we create a slide out subscribe panel.

Once the viewer hovers over the subscribe button on the top right hand corner, the whole hidden panel will come sliding down with a very smooth animation effect revealing the subscribing options to the visitor. All of this will be done by just using CSS3.