Here is the video

And the links to the font directory: Google Font Directory and a tutorial on getting started: tutorial

Sexy CSS+JS Form

I was working on our new open source project that i think you will like and I was working on the registration page. This is what I got in the end and i will walk you trough the process with me. This new tutorial is about styling the forms of your website, I find it very good looking and very simple to implement. We will use simple CSS and some JavaScript.

Usually for inserting text into the inputs or our forms we set the value attribute with the text and then use javascript to check for different scenarios for doing some fancy things. This is different we will use labels to fill the text and move them under the inputs and then just do our magic with JS.

The JavaScript library that we will use to create this effect for our forms is Jquery

1. Creating the markup!

            <div id="login">
                <div class="sayit">Log In:</div>
                <form action="javascript:void(0)" onsubmit="login()" autocomplete="off">
                    <label for="username">Username</label>
                    <input type="text" id="username"/>
                    <label for="password">Password</label>
                    <input type="password" id="password"/>
                    <input type="submit" class="medium button green" value="Log me In"/>
                </form>
            </div>

The above code is our markup and as you can see is very simple and it can be changed as you like because the code that we will use for checking for different scenarios in javascript will work without necessary classes or ids. We have 2 inputs and 2 labels, one is password one is text and we can work with these ones, you can add as many as you like.

Now let’s style these bastards!

2. Use CSS to style the form elements!

input[type=text],input[type=password]{padding: 5px 10px; background-color: transparent;	position: relative; z-index: 2;}
label{position: absolute; z-index: 1;-webkit-transition: opacity 0.15s linear; color: #bababa; background-color: #FFFFFF; }

#login{width: 290px; margin: 0 auto;}
#login input[type=text],#login input[type=password]{width:270px; margin: 5px 0; font-size: 24px; font-weight: bold; border: 1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; color: #595959;}
#login label{font-size: 24px; margin: 14px 10px;}

#login .sayit{font-size:24px; color: #595959; font-style: italic; padding-bottom: 5px;}

What we did here is make the label absolute so it will go under the input. This is important you will have to place the label before the input so remember this! The input will have a position relative and a z-index of 2 so we can be sure it will land above the label. Next we define the login div by using his id(#login). We use CSS3 for creating the round borders for the input and style the label by setting a big font-size to fit the input. The rest is pretty obvious, if you have trouble understanding this then let us know in the comments.

3. Make everything move with JS!

$(document).ready(function(){
    $.string(String.prototype);
    $("input,textarea").each(function (type) {
        $(this).focus(function () {
            if($(this).val().blank())
                $(this).prev("label").fadeTo('fast',0.45);
        });

        $(this).keypress(function () {
            $(this).prev("label").fadeTo('fast',0);
        });

        $(this).blur(function () {
            if($(this).val().blank()){
                $(this).prev("label").fadeTo('fast',1);
            }
        });
    });
});

We use here jQuery of course that we add using the google api like this:

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

And one plugin that I use to extend the jQuery string properties and that is $.string plugin. After we do that we create the above code and we assign to input and textarea elements a focus, keypress and blur actions. We use the focus action to lower the labels opacity to 45% then on keypress we just hide it for good. Then on blur we check to see if anything was written in our sexy element and if not then we fade the label back to 100%. This is kind of everything we do here, pretty simple.

4. Showing of a demo and download source

I’ve set up a demo here: DEMO

The source code you can either pick it from the demo page or from here: SOURCE

5. Wrapping up!

So here is our nice form styling that you can use on your website and that can be done very easily. Feel free to leave us comments and suggestions. Thanks a lot!

Have fun coding!

Play with CSS3

If you saw our “ImageRoll” page and you used Firefox, Chrome or Safari then you saw the images being rotated in different angles well the way i did that is by using CSS3. I guess you already figured that out from the title.

CSS3 implements a lot of new features that can make your life easier of course you will not be able to use them quite yet. IE is not supporting like more than 90% of them so it’s useless if you want to make this for a client. The ones that we used on our blog are: box-shadow, border-radius and text-shadow. I think these are the most important of them but you can check all of them out by taking a look at this page: css3.info/preview/.

I’m gonna do a simple explanation on the ones we used and show you some code.

We used on the hrefs of the page this property:

-moz-box-shadow: 0px 2px 15px #333;

Now let’s explain. Why “-moz” in front of it? This is a simple hack for those who don’t know it. It tells the browser to render this only in mozilla based browsers. Next we have the property box-shadow and 0px means the top margin of the shadow, 2px means we move the shadow 2 pixels to the left and 15px
means we create a shadow with 15 pixels of size of blur if you want, #333 is of course the color of the box shadow. Pretty simple .

Now let’s rotate the images:

   -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);

You know -moz- already but we have a new one “-webkit-” this one means it will render in webkit based browsers, the most popular are: Safari and Chrome. Next we have the property “transform” and the degree of rotation “-10deg”.

The other one that we used all over the blog is text-shadow

text-shadow:1px 1px 0px #000;

This property is like this 1px means we move the shadow with 1 pixel from the top, 1 pixel from the left and 0 blur or size, #000 means of course the color of the shadow.

And here is a preview in 2 browsers IE and Firefox so you can see maybe you are not using a browser that supports CSS3.

Ie view

Firefox view

My imageroll page is inspired from this page: line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery . Go and check it out .

Thank you and happy coding!

Write Better CSS

When writing your CSS, it is possible to write neater, more readable code by making use of CSS shortcuts. A shortcut is a feature of CSS that allows the developer to specify a number of related properties on a single line rather than specify them all separately. Lets look at the following example:

.header {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
}

The code above is perfectly valid and will work fine, but we can save time and make the code much neater using the following code:

.header {
padding:5px 10px 5px 10px;
}

Using the code above we can specify all of the padding for the header div on one line. It works by applying the first attribute (5px) to the top padding of the div. The second (10px) applies to the right side padding, the 3rd (5px) attribute means the padding on the bottom of the div, and the forth (10px) attribute means the left side padding. The padding is always applied in this order.

It is possible to shorten this code even further using the following code:

.header {
padding:5px 10px;
}

This works by taking the first (5px) attribute to mean the top and bottom, or vertical padding, and the second (10px) attribute to mean the horizontal padding (left and right).

The exact same principles can be used to declare the margin of your divs, so what could have looked like this:

.header {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:10px;
}

Can now look much neater, and is obviously much quicker to write using the following:

.header {
padding:5px 10px;
margin:5px 10px;
}

One of my favorite CSS shortcuts is the background property shortcut. This is how a typical CSS file could look without shortcuts:

.header {
background-image:url(images/image.jpg);
background-position:top;
background-repeat:repeat-x;
background-color:#fff;
}

However, with some nifty CSS it could look like this:

.header {
background: #fff url(images/image.jpg) repeat-x top;
}

The above code is much quicker and more manageable. Take note though, that all of the properties must be provided when using the background shortcut. If I missed off the colour specification at the beginning for example, the code would not work.

Another very useful shortcut is the font shortcut. The code below can be shorted considerably:

body {
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 0.8em;
line-height: 1.2em;
}

Here is the shortcut:

body {
font: bold 0.8em/1.2em verdana, sans-serif;
}

It is important to write the shortcut in the same order as above so that web browsers don’t get confused!

This is my favorite shortcut of all. This saves me a great deal of time when I am developing web sites because whenever I have a problem with a layout or an element, the first thing I do is put a border around it so that I can see its dimensions and work out what’s going on.

Here is some typical code:

.header {
border-width: 1px;
border-color: #000;
border-style: solid;
}

This can be shorted to the following:

.header {
border:1px solid #000;
}

Then, whenever you are not sure why an element is not behaving properly, just use the border shortcut above to debug your code and see what the dimensions of the element are.

As you can see, you can make your code much shorter and neater using the CSS shortcuts outlined here. Once you get into the habit of using them, I guarantee that you will wonder why you ever did it differently in the past!