I have been working with CSS for many years now, and although it is relatively easy to learn, there are always some tips and tricks that you don’t know about, and new stuff to be learnt all the time. I wanted to take a moment to give you some tips and tricks that I wish I knew when I first started using CSS.

Resets & Browser Inconsistencies

It’s not big secret that not all browsers are created equal. Internet Explorer may show something completely different than Mozilla Firefox. Mozilla Firefox may show something completely different to Apple Safari.

We also don’t know what the default margin, padding, font-size, etc. are for these browsers. To handle these differences, many CSS developers like to level the playing field by creating a CSS Reset. In the early stages, we would have just used a global reset, which would look like the following:

* { margin: 0; padding: 0; }

It soon became clear that resetting only the margin & padding wasn’t really enough. Developers started to created a CSS Reset.  Eric Meyer created a widely accepted and comprehensive set of reset rules.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

/* remember to define focus styles! */

:focus {

outline: 0;

}

body {

line-height: 1;

color: black;

background: white;

}

ol, ul {

list-style: none;

}

/* tables still need ‘cellspacing=”0″‘ in the markup */

table {

border-collapse: separate;

border-spacing: 0;

}

caption, th, td {

text-align: left;

font-weight: normal;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: “”;

}

blockquote, q {

quotes: “” “”;

}

This has become the most popular CSS reset available today. It is also important to note that some elements have been deliberately excluded from the list, including Input, Button and HR.

User ‘Overflow: Hidden’ to clear floats

I always used to use a clearing div to clear any floating divs I was using. This would always look like the following:

.clear { clear:both; }
<div>
<div></div>
<div></div>
<div></div>
</div>

Although this does work perfectly fine, it can make your code look messy. Instead you can use overflow: hidden on your container div tag. So you could use the following:

#contain { overflow: hidden; }
<div>
<div></div>
<div></div>
</div>

Grouping elements together

One of the rules of keeping good coding is to keep your code simple, clean and easy to read. This technique helps with readability as well as performance. In the early days, I used to do two or three elements that are doing the same thing, until I found out you can group these elements together.

So instead of writing:

h1 { color: #444; }
h2{ color: #444; }

You can group these elements like so:

h1, h2 { color:#444; }

Use CSS Shorthand

Using CSS Shorthand has two beneficial aspects to it, the first one being less code. The second is improving the performance. So instead of writing the following:

body {
font-family: verdana;
font-size: .7em;
line-height: 1.4em;
margin-bottom: 10px;
margin-top: 10px;
}

You can write the same thing with less lines and less coding:

body {
font: normal .7em/1.4em verdana,;
margin: 10px 0;
}

Box Model – Margin, Padding & Borders

The box model is the basis for all layouts. If you use CSS, you need to take the box model into account. It governs the dimensions & spacing of the elements on a page.

All box models have five spacing properties: width, height, padding, margin and border. Width and height are tricky attributes, as they require a bit of calculation. When measuring an element’s width, designers must consider the entire box.

Using the example above, the box has a total width of 260px. The margin, padding, and border are 30px each (remember, that’s 30px on top, 30 on bottom, 30 right, and 30 left). So, in this example, the margin takes up 60 pixels of the box’s width. Likewise, the border and padding consume 60px each. All together, the margin, border, and padding amount to 180 pixels of the box’s total width.

We know that the box’s total width is 260px, but in CSS the width attribute refers to the content area on the inside of the box. So, for this example, we have to subtract 180 pixels (for margin, border, and padding) from 260 (total box width), leaving us with a content area of 80px. Therefore, our CSS looks like this:

div {
margin:30px;
border:30px solid yellow;
padding:30px;
width:80px;
height:80px;
}

Conditional Comments

IE is one of the worst browsers to develop CSS for, while most browsers show the same thing about 80% of the time, IE will not. Therefore you will be doing a lot of IE Hacks to make sure your website shows the same in all browsers.

This can take a lot of CSS to accomplish, making your main style sheet larger than it really needs to be. So the easiest way to accomplish this is to use the HTML conditional comments to detect IE browsers and display the CSS.:

<!–[if IE]>
Target All versions of IE
<![endif]–>

Using conditional comments to target IE and cut out your hacks will slim down your main style sheet, and help load the page quicker in browsers that don’t need the correction code.

That’s it

That’s it for now. I am always learning new stuff, and with CSS3 making its way through, there will more than likely be another tutorial on the way.

Lately I’ve been doing some design for a printer cartridge site, and one of the things I realised is how boring printer cartridges are. With a site that sells clothes for example it’s not too hard to make it look sexy, but with printer cartridges it’s close to impossible.

So I decided to try to make an image that made printer cartridges look just a bit more exiting, and the result was this:

Ok it’s still a printer cartridge, nothing amazing but it does make it a bit more appealing to the eye and this technique would probably work with any product be it toilet role or filing cabinets. So here is how I did it.

Starting out

First I started out with the background image of the pyramids, you can use pretty much any image as long as it has space for your boring product, but the image I used can be found here.  As well as the pyramid image I used a couple of images of random rocks to create the rubble around the base of the cartridge you can find some good quality images on sxc.hu for this, try to look for images that colours match the pyramid image, but we will adjust this later anyway.

The image of the cartridge I took myself, but you can use whatever you want for this.

Preparing the images
I started by editing the cartridge image, removing the white background is pretty easy but I am using cs5 which makes it a bit easier.

Select the item you are using, either with the new quick selection tool, magic wand or manually with the lasso tool. Then go to select > refine edge and smooth out your selection trying to make the edges as neat as possible. Here’s the options I used to get it to look right:

Once you think you’ve got it right click ok and it will change the selection you previously made. Invert the selection (select >inverse) and hit delete on your keyboard. This should get rid of most if not all of your background. You should end up with something similar to the image below.

Next you need to tidy the image up a bit, get rid of any background left over with the eraser and smooth out any edges.

Now you want to open up your pyramid image within Photoshop. Copy your cartridge (or other item) and paste it in the pyramid image, scale it to whatever size you like and rotate it. From here onwards you have as much freedom as you like, so here’s what I’ve got so far.

Next we want to edit the cartridges colours so that they match the deserts bright and exotic colours. Select the cartridge layer and go to image>adjustments>color balance and an adjustment window will pop up, if you are using the pyramid image you will want to bring up the yellow and possibly a bit of red. After doing this go to image>adjustment>Hue/Saturation and bring down the saturation to about -20 and click ok.

Something else I realised I needed to do was adjust the lighting on the cartridge, the light source in the pyramid image is coming from the left and the cartridge had a light source from above/front. All I did to make the cartridge look right was select the part of the cartridge that should have been darker and create a new layer and fill the selection with black.

Then change the new layers blend mode to soft light, hopefully you should end up with a cartridge that looks a bit more like it is in the background image.

For the next step we want to ‘bury’ the cartridge, so you will need to merge the cartridge layer with the black filled layer, to do this select both layers in the layers panel right click and select merge layers. Name this merged layer ‘cartridge’ and then add a layer mask (layer>layer mask>reveal all).

By using a layer mask you can hide parts of a layer without erasing or deleting them. Just make sure you have the layer mask selected and use a black paintbrush to hide the bottom section of the cartridge, try to make it as rough and natural as you can, although we will be adding rubble round the base of the cartridge soon. You should now have something looking like this hopefully:

Now we need to add the rubble round the base of the cartridge, this will help the cartridge blend in a bit more and look like it’s in the picture. All I did for this stage was grab a couple of images of rubble and copy and paste separate rocks/stones until I thought it looked right, the secret behind this was getting rocks that were roughly the same color as the desert. Try to create something similar to what I’ve done below.

Once you think your rubble is looking right we need to add a shadow. As you can see if you are using the same pyramid image as I am, the guy with the camels is casting some quite big shadows; we need to do the same with the cartridge, so here’s how.

Make a selection of your cartridge layer (ctrl click on the layer) and then create a new blank layer and fill the selection with black. Deselect, and then you want to distort the layer (edit>transform>distort) so that it matches the angle of the camel shadows.

You may also want to warp the layer so that it doesn’t look so straight and fake. Once it roughly matches you then need to lower the opacity of the layer until again it matches that of the shadow, I went down to 30% to get it right. Then we want to blur the edges, go to Filter>Blur>Gaussian Blur and set the radius to about 2.5 pixels. Finally make a selection of the cartridge layer again (ctrl click on the layer in the layers panel) click on the shadow layer and hit the delete. This will get rid of any of the shadow that overlaps the cartridge, and should leave you with something similar to this:

That’s the image almost finished, you could leave it like it is if you wanted, but next we will add some effects.

Merge all the layers apart from the background layer, to do this select them in the layers panel, right click and select merge layers. Now with the merged layer selected go to image>adjustments>hue/saturation and lower the saturation to around -20 and click ok. With the same layer selected go to image>adjustments>exposure and apply the following settings:

You should end up with something similar to this:

Now duplicate the layer and add a lens blur (filter>blur>lens blur) with the following settings:

Apply the lens blur and add a layer mask to this layer (layer>layer mask>reveal all),set your foreground color to black and then use your paintbrush tool (I used 1000px size with 0% hardness) to make the parts of the image clearer as if the camera is focusing on the object. You should get something like this:

Now we can move onto the final step. Create a new layer and fill it with black, reduce the layer opacity to 30% and add a layer mask. Do the same as you did with the lens blur layer and use a brush to hide some of the layer; again you want it to look like the cartridge is the centre of attention.

If everything went to plan then you should have ended up with an image similar to the one below.

Hope you enjoyed the tutorial and have learnt something useful!

1. WpRecipes.com

Wprecipes.com has a huge collection of wordpress tips and is updated frequently. It gives a lot of advice to help you customize and hack your existing theme to its full potential.

2.Themeshaper.com

Themeshaper.com is a great resource for everything about WordPress Themes. They have a great collection of themes to download, and offer great advice on crating your own WordPress theme.

3.Net.tutsplus.com

With the Tutsplus Network, they have a section dedicated to WordPress Tutorials. As always, Envato and the Tutplus.com network always offer innovative and unique tutorials that will make it easy to make your WordPress blog that much better.

4.Themeplayground.com

Themeplayground also offers a great collection of articles that help you design your own WordPress themes, and also offer some wordpress themes.

5.Problogdesign.com

Problogdesign is your destination for the best tips on writing the best articles for your blog, and optimizing your blog with SEO implementations. They have a whole category dedicated to WordPress articles.

6.Hongkiat.com

Hongkiat offers a lot of WordPress tutorial articles,  and showcases many amazing wordpress themes to download.

7.Lorelle.wordpress.com

Lorelle.wordpress.com has an archives of thousands of insightful blogging tips on WordPress. Although not updated frequently, this is still great source of information on WordPress tutorials.

8.Wp-tutorials.org

Wp-tutorials.org, as implied by the name is an rss aggregator on the latest wordpress tutorials and tips from various blogs.

9.Themelab.com

Themelab is a great wordpress design blog, that offers its premium wordpress themes, and also has a tutorial section that will definitely be informational and helpful to readers.

10.WordPress.tv

This is WordPress’ official site, which offers wordpress tutorials in a video format, for those who like viewing than reading info.

11.Wpdesigner.com

Wpdesigner.com is a great resource for those who want to design their own WordPress theme. Here is an example of one of their most helpful posts for me when I wanted to experience designing my own WordPress theme.

12.iThemes.com

iThemes.com offers a variety of interesting wordpress themes you might find of interest. They have a Tutorial Section I was really interested in here.

13.Webdesignerwall.com

Webdesignwall.com is primarily a blog about webdesign, but they also have a useful area about WordPress.

14.Speckyboy.com

Speckyboy is a design magazine that has a section dedicated to WordPress also. Some of the tutorials are very useful in finding a great wordpress theme.

15.DigWp.com

Digwp is an active blog dedicated to wordpress, and created by Chris Coyier and Jeff Starr really give some great tips on customizing your blog.

16.Bloggingpro.com

Bloggingpro is your site to find useful articles on blogging effectively, with tips to help communicate your message more effectively.

17.Instantshift.com

Instanshift is another huge and active blog that has a section with great articles on WordPress.

18.Smashingmagazine.com

SmashingMagazine is one of my favorite place to find quality themes , and also checking out their Smashing Netowrk on the latest WordPress articles they have to offer.

19.Noupe.com

Noupe shows us unique ways to take full advantage of the robust WordPress platform, with articles showing us how to fully utilize WordPress more as a CMS then a blogging platform.

20.Wpengineer.com

WpEngineer is a developer’s resource with WordPress Tutorials that help Theme Develops and coders to implement more features into their themes. This is a whole blog dedicated to WordPress, not just a section, so you can be sure to find articles that will help you on everything for adding a metabox, to optimizing your coding.

That is it for today, and I hope you found that these WordPress tutorial blogs were helpful to you, by finding a new theme, finding a way to hack  your own, or finally taking that extra step to develop your first WordPress plugin or Theme.

You can find a lot of tutorials for creating business card but some of them are quite old and don’t look attractive. Here I have collected 10 best looking business card design tutorials. They are very detailed and high quality. You will learn useful design techniques and gain some experience in graphic design.

How To Create A Sweet Bokeh Business Card In Photoshop

In this Photoshop tutorial you will learn how to create a double-sided business card that features Bokeh and abstract effects.

Making a Print-Ready Business Card Using Only Photoshop

In this tutorial you will see how to design a simple business card in Photoshop and get it ready for print with crop marks and bleed.

Design a Print Ready Business Card for Designers

Follow this walkthrough in Adobe Photoshop, Adobe Illustrator and Adobe InDesign to create your own double sided business card design, resulting in a print-ready file to send to your favoured print firm.

Creating a Colorful Vibrant Business Card

This tutorial is really simple to follow to create yourself a really colorful and vibrant business card.

Making a Grungy Business Card

This tutorial will walk you through setting up a vertical grungy business card template, front to back and ready to print.

Design Slick Print Ready Business Card Using Photoshop

This tutorial will show you how to design your own double sided business card in Photoshop and get it ready for print.

Create a Slick Business Card Design with Stunning Typography

This graphic design tutorial will show you a way to create a standard two-sided business card design in Adobe Photoshop that you can take to your printer.

How To Create Print Ready Standard Size Business Cards

In this tutorial you will learn how to create print ready standard size business cards with Photoshop. If you follow these guidelines you’ll soon be able to create your own business cards.

How to Design an Abstract Business Card in Photoshop

In this tutorial you will learn how to design an abstract business card using a combination of Adobe Illustrator and Photoshop.

Business Card Design Project Walkthrough

Let’s look at process for creating the final concept of this business card, resulting in the finished printed product.

Stay tuned for future freebies and useful design stuff. You can follow WebDesignFan on Twitter and subscribe to the RSS feed here.

In photography, bokeh is the blur, or the aesthetic quality of the blur, in out-of-focus areas of an image, or “the way the lens renders out-of-focus points of light“. – Wikipedia.

In this article you will find inspirational showcase of beautiful and very colorful websites with bokeh effect. Also you’ll be able to learn different bokeh effect techniques by checking listed useful and detailed tutorials. For the conclusion you will find a lot of great bokeh resources.

Showcase of Bokeh Effect in Web Design

Wonderful bokeh effect looks very impressive in web design projects. Colorful and abstract bokeh effect gives beautiful, mystery and memorable look for any web project.

In this showcase you will find over 20 beautiful examples of bokeh effect in web design. Some of the featured designs are for sale, so if you like this effect you can buy a website template or even a wordpress theme.

Hybrid WordPress Theme ($32)

Mintozine WordPress Theme (Free)

Envato

Theme Bokeh ($14)

Lisa Maya

404 error theme ($8)

Traffik

Dark ‘n Clean WordPress Theme ($27)

Unuidesign

Javascript Showcase ($10)

Light is Light

Make Photoshop Faster

Onvo Media

Moi Magazine WordPress Theme (Free)

Webexpedition18

Sebcreation

Bitwork WordPress Theme ($27)

Klar

IconDock

72 thinking

Pristilo WordPress Theme (Free)

Newism

Designed by Dave

Tutorials on Creating Bokeh Effect

Here I’ve collected some useful tutorials on creating bokeh effect in Photoshop, Pixelmator and of course with your camera. Most of tutorials demonstrate how to create basic bokeh effect.

Awesome digital bokeh effect in Photoshop

In this Photoshop tutorial you will learn how to create a digital bokeh effect. The process is very easy and you will see how to use the super powerful Brush Engine, one of the coolest things in Photoshop.

Create a Bokeh inspired Background

In this Tutorial we’ll create a really neat background using simulated focus, learn how to simulate depth in Photoshop, and learn a little bit about the Bokeh design Style so popular in many of today’s Photoshop creations.

Awesome Bokeh Effect Tutorial

In this tutorial you will see how to create custom bokeh effect in Photoshop. This tutorial will also teach you how to make your own brush.

Light Bubbles Effect Photoshop Tutorial

This tutorial explains how to create a bokeh underwater light bubbles effect using Photoshop. This will include blending colours using hue and saturation and creating a really cool custom brush.

Sleek Icon Design

In this tutorial we’re going to be creating a colorful image icon from scratch, the icon features a colorful design in a shiny metal like border the icon also used a bokeh effect.

How to Create a Simple Bokeh Effect

This tutorial shows you how to create beautiful bokeh effect in Photoshop.

Create A Perfect Bokeh Effect

This well explained tutorial will help you to create a nice bokeh effect in Photoshop.

DSLR Bokeh Tutorial

Another great tutorial teaching you how to create bokeh effect, this time it’s tutorial for DSLR camera.

The Best 6 Ways To Create Your Own Bokeh

This guide provides a simple technique to shape the bokeh of the unfocused elements in your picture.

Colorful Bokeh Effect in Pixelmator

This tutorial will teach you how to easily create a bokeh effect in Pixelmator.

Pure CSS3 bokeh effect with some jQuery help

Author of this tutorial wants to add another addition to the bokeh “hype”, by creating a pure CSS3 bokeh effect. Learn how to create bokeh effect with CSS3.

Design a Sleek Bokeh Styled Portfolio

Learn how to create and integrate the popular bokeh effect into a sleek, professional website design.

Bokeh Effect Resources

Here you will find a lot of useful resources like textures, backgrounds, photoshop actions and even business cards with bokeh effect. Some of the listed resources are paid, but they are highest quality, unique and worth money.

Bokeh flame card ($6)

This template is a bokeh illustration with fresh colors and gradients. All text layers are editable so you can input your own text.

Bokeh Effect – Deep Sea ($3)

This pack contain 1 Theme with 5 color schemes. Blue Deep Sea (By default), Tropical Blue Sea, Turquoise Sea, Brown Sea and Brown Sea.

Elegant Bokeh Business Card ($5)

Bokeh Business Card – simple & stylish. Easy to modify. This PSD layered files are print ready, CMYK , 300dpi. All text layers are full type and can be easy edited.

Bokeh Photoshop Action ($7)

Unique, custom and never seen before action that throughout smart & studied steps, automatically creates the so beloved BOKEH effect on any photography, any image and any scene.

Circle Of Bokeh ($3)

Fully Layered, Named & Grouped with .PSD File & .JPG Of The Background/Wallpaper. Perfect for all uses! Backgrounds, Wallpapers, Websites, Banners, Headers, Signatures, Badges etc..

Bokeh Effect ($4)

This pack contain 1 Theme with 8 color schemes. Blue (By default), Turquoise , Green, Purple, Gold, Silver, Cooper and Orange.

Blue fiber optic abstract background ($3)

Light on! Backgrounds pack ($4)

Ready to use and changes you can turn off any glow and lines / make a different color by “hue and saturation” tool or add your gradient.

5 Colored Grungy Bokeh Textures (Free)

Free pack with 5 various bokeh textures. Free for personal and commercial use, with no attribution required.

Pass your 350-030 exam in easy going way with world class online training by test-king experts. Get all the required knowledge in single package and pass your 642-901 as well as 70-642 on first attempt guaranteed.