Creating 3d transformations for your 2d images is nothing but projection at various anges (transformation) is amazingly simple with photoshop.

To use a 3d transform filter, you can use 3d transform tool or other third party plugins like shown below.

Just import an ...]]> I have often wondered how to create 3D images of simple graphic images or photos that i have seen in many blogs and websites. Even examples of source code or screeshots of themes look amazing with 3d transformations.

Creating 3d transformations for your 2d images is nothing but projection at various anges (transformation) is amazingly simple with photoshop.

To use a 3d transform filter, you can use 3d transform tool or other third party plugins like shown below.

3D Transform tool

Just import an image in your photoshop,

Go to Filter > 3d Transform .

If you dont find the option of 3d transform, you can find the filter plugin in your adobe suite dvd in extras. Just place it on /plugins/filter folder inside photoshop.

If you dont like the 3d transform tool difficult to work with, you can use the below 3rd party plugins,

Perspective Transformations

I very much liked this plugin and it is so easy to use. You can download here. It is free to download.

Projection Plugin

3d effects and perspective corner views can be achieved with this plugin. It is free to download as well. You can visit this page

I am documenting here a rare open source icon sets which are free for any usage. I believe that these icon graphics could be very useful for your website development.

License: Free

License: Creative Commons Attribution 3.0 License

License: GPL

Normally if you float: left all the text would wrap around image. But to remove the text flowing around image you have to specify float: none so that the image would stand alone and text would flow belo.

img { float: none; padding: 5px; }

Try it! as float: left and clear: both didnt work ...]]> i have often seen images inside wordpress posts floating and text content would wrap around it. It wont be a nice sight seeing images stacked either to left or right.

Normally if you float: left all the text would wrap around image. But to remove the text flowing around image you have to specify float: none so that the image would stand alone and text would flow belo.

img {
float: none;
padding: 5px;
}

Try it! as float: left and clear: both didnt work for me.

Being a beginner in CSS coding, i have always struggled to design round corner menu boxes in CSS. At last i found a very simple way to to accomplish this with minimum lines of code in CSS. In this tutorial i am going to show you how to design a round corner menu box with header. You will need photoshop to slice images and a CSS editor.

Objectives

To ...]]> How to design a rounded corner menu boxes in CSS?

Being a beginner in CSS coding, i have always struggled to design round corner
menu boxes in CSS. At last i found a very simple way to to accomplish this with
minimum lines of code in CSS. In this tutorial i am going to show you how to
design a round corner menu box with header. You will need photoshop to slice
images and a CSS editor.

Objectives

To design a expandable (in height) round corner box with a fixed width of 150px
with minimum lines of code. I mean one div, one h3 and one p block elements.
It should be light weight and fast loading (without using large size images).

Concept

First design the cornered menu box in imageready and make sure you have the
exact width. I am assuming that the box has fixed width of 150px with liquid
height. As the content expands, width will be constant and the box will expand
in height with respect to content.

The box will have 4 elements

div – will be main container
h3 – will be menu title header
p – will contain the content

Here is the main concept

1. Assign #roundbox the middle slice (middle.gif) and will
   repeat it along y. repeat-y
2. Assign h3 tag (top.gif) slice and it will be no-repeat.
   Its background position is top left
3. Assign p element the (bottom.gif) and it will be no-repeat.
   Its background position is bottom left.

Slicing

Design the menu box in photoshop and divide into 3 slices as shown below.

HTML code

Carefully observe the html code and how the div is placed as container for
all the block elements.

     <div id="roundbox">
      <h3>Menu Header</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod  tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p>
     </div>

CSS Code

Carefully observe the CSS code and the important to note is the position of
background images.

#roundbox {
    float: left;
    width:150px;
    font-family: Arial, helvetica, sans-serif;
    font-size: 11px;
    background-image: url(mid.gif);
    background-position: bottom left;
    background-repeat: repeat-y;
    margin: 10px 5px;

}

#roundbox h3 {
  background-image: url(top.gif);
    background-repeat: no-repeat;
    background-position: top left;
    margin:0;
    color: #fff;
    text-align:center;
    padding: 5px;

}

#roundbox p {
   background-image: url(bottom.gif);
   background-repeat:no-repeat;
   background-position: bottom left;
   margin:0;
   padding: 5px;
}

Leave me a feedback if you find this tutorial useful.

- Container - Header -Top Navigation Menu - Left Navigation Menu - Right Navigation menu - Content Part - Footer

All elegantly stacked one by one with divs and with css stylesheet. This is a very basic skeleton. The most important css code ...]]> CSS as we go deeper and deeper it gets harder and harder to understand, especially margins, padding and floats could be confusing at times as well. I am going to post here the tutorial to make a very simple CSS website layout (skeleton) with

- Container
- Header
-Top Navigation Menu
- Left Navigation Menu
- Right Navigation menu
- Content Part
- Footer

All elegantly stacked one by one with divs and with css stylesheet. This is a very basic skeleton. The most important css code are highlighted in the picture. The basic concept is shown below.

Code Flow
Notice carefully the div stacked. A container holds all those header, content, and menus.

<div id=container>
      <div id="header">
        <h2>Header</h2>
      </div>
    <div id="topnav-container">
        <ul id="topnav">
        <li> <a href="#">Home</a> </li>
        <li> <a href="#">Categories</a> </li>
        <li> <a href="#">Services</a> </li>
        <li> <a href="#">About us</a> </li>
        <li> <a href="#">Contact us</a> </li>
        </ul>
    </div>
     <div id="leftnav">
      This is a left navigation bar.
      This is a left navigation bar
      This is a left navigation bar
     </div>
     <div id="rightnav">
      This is a right navigation bar
     </div>
     <div id="content">
         <p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam
</p>
     </div>
     <div id="footer">
        <h2>Footer</h2>
     </div>
   </div>

CSS Code

The CSS code is shown below for the above skeleton.

#container {
    margin: 10px auto;
    width: 95%;
    border: 1px solid gray;
}
#header {
    padding: 3px;
    border-bottom: 1px solid gray;
}
#topnav-container {
border-bottom: 1px solid gray;
padding: 4px 0;
background: #e0e0e0;
}

#topnav {
margin:0;
padding: 0;
}

#topnav li  {
    display: inline;
   list-style: none;

}
#topnav li a {

    text-decoration: none;
    padding: 0px 5px;
    color: #333;

}

#leftnav {
    float: left;
    width:150px;
    padding: 5px;
    margin:0;

}
#rightnav {
    width: 150px;
    float:right;
    padding: 5px;
    margin:0;

}
#content
{
    margin: 0 180px 0 180px;
    padding: 1em;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    font-family:  "Times New Roman",sans-serif ,arial, helvetica;
    font-size: 1.0em;
    line-height: 1.6em;

}
#footer {
    clear:both;
    padding: 0 3px;
    border-top: 1px solid gray;

}

Download source code:3colcsstut.zip