Vickz

Have you ever seen a CSS stylesheet with multiple attributes applied to the one property and wondered how it’s done? Let’s go through it and make your stylesheets that much better.

body {
background-color: #fff;
background-image: url('images/background.jpg');
background-repeat: no-repeat ; /* repeat-x, repeat-y, no-repeat*/
background-attachment: fixed; /* scroll fixed */
background-position: center; /* top, bottom, center, left, right,
center */
}

It looks a lot for just styling the background, doesn’t it? Let’s change it into one property. We will be using ‘background’ to apply all of these properties in just the one.

body {
background: #fff url('images/background.jpg') no-repeat fixed
center;
}

Download the PDF now for more Shorthand CSS!

Thanks to Hulldo.

Tutorial CSS, CSS shortcut, download PDF, shorthand CSS

Some of my friends asked on how to Add Facebook Fan Box to a website. So, I though it would be a good idea for me to share this in my blog.

Add Facebook Fan Box to website

Read more…

Tutorial add facebook fan box to website, add fan box to website, facebook fan box, steps to add facebook fan box

Looks like flash? Nope, that is only done by using Adobe Photoshop! You also can make it without flash knowledge! Lets get it done now.
Read more…

Tutorial

Today, my friend ask for a simple .gif animation to show ” Loading in progress “. I’m sure that many of you knew, Adobe Photoshop now already have it’s own ” Animation ” panel which located in ” Windows “, Windows > Animation. The animation panel let user to create animated .gif layer by layers. Look at the sample above, which i use 26 frames to create the .gif animation.

Before you start to animate, you have to draw out the symbol. Let me share with you how I draw by using Adobe Illustrator.

Illustrator part

Step-01-Create a ” doughnut ” shape
By subtracting ( windows > pathfinder > Subtract from shape area ) with two Ellipse, big and small in the middle.

Step-02-Draw a Stroke
Draw a stroke with weight 2pt ( This will become the space between )

Step-03-Align center the stroke with the shape
Please align center ( horizontal & vertical ) the stroke with the ” doughnut ” shape.

Step-04-Rotate and duplicate strokes
Select the stroke, double click on ” Rotate tool “, set angel = 10%, then press copy. Second stroke will be duplicated. Now, use your keyboard, press ctrl+C then ctrl+F then ctrl+D, you will see the stroke has been duplicated and rotated. Continue hitting the “ctrl+C then ctrl+F then ctrl+D” keys, until it reach full circle.

Step-05-Outline Stroke
Now, select all the strokes, go to Object -> Path -> Outline Stroke. All the stokes will become objects ( no longer a stroke – you cannot adjust its weight already ). Pathfinder there, select “add to shape area”, which means “merge”.

Step-06-Trim / Subtract it
Select both, pathfinder there, press on ” Subtract from shape area ” means trim. You will get the shape as above. Right click on the object, select ” release compound path “, then select the released objects by following images above ( blue color selection ), delete the selected objects.

Step-07-Copy to Photoshop, start animate
Congrats! You have succeed to create the shape. Now, copy the selected part one by one to Photoshop, let’s start to animate it. Look at the images above, copy by selecting two parts, which is opposite each.

Tutorial