STEP 1:

Open a new document with a4 paper dimensions and change the artboard to landscape mode.

STEP 2:

Draw a big circle and fill it with RADIAL gradient, color varying from white to light grey(c=0 m=0 y=0 k=below 15).

Step 3:

Draw two guide lines as shown for reference purpose.

Step 4:

Draw an ellipse as shown and fill it with red color and place it in the middle of the top most guide line as shown. You  can fill it with any dark color as you wish as we are going to change the color in next few steps.

*draw the ellipse such that its edges cuts the circle.

*take a copy of the ellipse as we would use the copy to make the curvature of the fish bowl.

Step 5:

Now select both the red ellipse and circle together by holding the SHIFT key and clicking on the circle and ellipse. Open the path finder(CNTRL+ SHIFT + F9) command box and the select MINUS FRONT.

Step 6:

Now you can see that the ellipse has disappeared and circle looks like it is cut in parts. But both the parts of the circle are grouped. To UNGROUP it use the keyboard shortcut  CTRL+SHIFT+G . Now you can select the parts of the circle individually. Now select the upper part as shown and delete it.

This is the resultant shape is shown below.

*take a copy of this shape too as we are going to need in the future steps.

**you should already have a copy of ellipse too.

Step 7:

Make another ellipse and place it on the new  shape created in such way that the ellipse is divided equally by the second guide line we drew in step 2. The color of the ellipse is of your choice because we are going to edit it later.

*draw the ellipse such that its edges cuts the circle.

*take a copy of the ellipse as we would use the copy to make the curvature of the of water inside the fish pot.

Step 8:

Repeat step 5 and step 6. You get a new shape as shown below.  Fill the shape with blue color.

Step 9:

Select the blue shape and the go to OBJECT->PATH->OFFSET PATH.

STEP 10:

Enter the settings in the dialog box as shown.

Notice that the blue shape contracts by few points. The purpose of doing this is to position the water inside the fish bowl and give the bowl some thickness.

Step 11:

Now when we move our selection tool over the blue shape we can see two object paths. Now select the outermost line of the path and not the path obtained after the OFFSET PATH COMMAND. Then delete it.

As result we have successfully shrinked the blue shape by few points.

Remember we are already having a copy of a two ellipse a small one that was placed on the top guide line and a bigger ellipse that was placed on the next guide line. And we also have a copy of the grey to partially cut circle.

Step 12:

Now make a copy of the blue shape.

Step 13:

Change the opacity value of the ORIGINAL BLUE SHAPE to 60% and set the transparency to HARD LIGHT.

Now take the COPY OF THE BLUE SHAPE and add gradient mesh in the places as shown below.

Step 14:

Now using the direct selection tool select the individual mesh points and fill it white and light blue color as shown

The final result will be like this

Step 15:

Now change the opacity value to 60% and set the transparency to HARD LIGHT.

This is the final ouput of blue shape and its copy.

Step 16:

Now change the stacking order of the shape to which we added gradient mesh effect by right clicking the shape and bringing it to the front.

Now place this object over the original blue shape.

Step 17:

You will get a result as shown below.

Step 18:

Now place the shape obtained from the previous step over the grey- white circle obtained from STEP 6. Add a stroke to that circle . choose a stroke thickness between 0.50 to 1. Choose the stroke color to be a bit dark grey.

Step 19:

Take the ellipse that was filled with yellow color and then fill it with blue color and then change the opacity value to 53%.

Now take three copies of the new ellipse. In one ellipse create a gradient mesh as shown below.

Enter the following details in the gradient mesh dialog box.

Change the opacity value to 45% with transparency mode set to SOFT LIGHT.

Step 20:

Now with the remaining two copies of the ellipse we have to make a curved shape. Place one ellipse over the other and then move one ellipse through a certain distance as shown.

Now select both the ellipse by holding shift and then use the MINUS FRONT option in the PATH FINDER dialog box. You can open PATH FINDER dialog box by using the keyboard shortcut CNTRL+SHIFT+F9

As a result you will get a curved shape . make a copy of it and change its position. Now you would be having two curved shapes like the one shown below. Change the opacity to the shapes to 15%.

Step 21:

Now place curved shapes, the gradient mesh added ellipse and the original ellipse on above the other. Position it such that the curved shapes come over the original ellipse and above it the gradient mesh added ellipse should come.

The resultant shape would be as shown below.

Use the selection to select the entire shape as obtained above and then GROUP it by using the keyboard shortcut  CTRL+G

Step 22:

Now place the above shape in the result obtained from step 18.

Step 23:

I hope that you remember the red ellipse which we made a copy of. Now change the color of the red ellipse to a one similar to the fish bowl’s grey-white color. You can easily do this by just selecting the fish bowl in a area which does not have that blue water color and then you can see that when we select the fish bowl the foreground color has changed to the gradient that we used on it. Now click that foreground color (i.e. the grey- white gradient) and just drag it to the red ellipse without releasing the mouse button, release the mouse button once you have reached the red ellipse.

And now you can see that the color of ellipse has changed to the fish bowl color. Now add a stroke to the ellipse.

Step 24:

Now that  we have created our fish bowl lets add some contents to the fish bowl, like sand and plants. Draw as shape as shown below with foreground color value as #EFE5D8 and the stroke color value as#C2B59B.

Please take a care to see that the bottom of the shape matches with curvature of the fish bowl.You can even adjust the curvature of the shape at the bottom to match the fish bowl curvature with direct selection tool.

Draw an irregular shape with brush tool then fill it with a radial gradient with color variation ranging from orange to dark brown. And a suitable brown stroke to it.  Then make many copies of this shape and scatter around the shape that we have created in previous step. The resultant will be

I have added some light black shadow effect in some places by drawing a circle filled with black color and then applying the Gaussian blur effect on it and then reducing its opacity to a lower value. You can also try this if u want.

Step 25:

Now lets create some plants.

Make a curved shape using pen tool and then fill it with a gradient varying from light green to dark green.

With the help of pen tool create many leaves of different shape as you wish and then place then on the sand as shown.

Now select this entire object and then group it using the keyboard shortcut CTRL+G.

STEP 26:

Now place the result of the previous step correctly on the fish bowl.

Now it looks like the sand and the plant is not within the water . to make it look like it is within the water we have to change the stacking order of it. Select the object (remember we have grouped the sand and the leaves together, so they can be selected as an entire object) and the press CTRL+ [  THREE TIMES.

Now you would have the object inside the water.

So we have now completed our fish bowl. Then its upto your creativity to add things you want into your fish bowl. I have added some fishes into the fish bowl and created a backround to the scene.

I hope you enjoyed this tutorial. Meet you soon with some other new work.

Parallelogram

Demo

CSS

.parallelogram-shape {
    width: 160px;
    height: 80px;
    background: #dd8863;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    transform: skew(20deg);
    margin: 20px;
}

HTML

<div class="parallelogram-shape"></div>

Heart Shape

Demo

CSS

.heart-shape {
    position: relative;
    width: 100px;
    height: 90px;
    margin:10px 0px;
}
.heart-shape:before,
.heart-shape:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #fd2d8a;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
.heart-shape:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

HTML

<div class="heart-shape"></div>

Octagon

Demo

CSS

.octagon-shape {
    width: 100px;
    height: 100px;
    background: #cd1d63;
    margin: 10px 0 0 40px;
}
.octagon-shape:before {
    content: "";
    position: absolute;
    border-bottom: 30px solid #cd1d63;
    border-left: 30px solid #fff;
    border-right: 30px solid #fff;
    width: 40px;
    height: 0;
}
.octagon-shape:after {
    content: "";
    position: absolute;
    border-top: 30px solid #cd1d63;
    border-left: 30px solid #fff;
    border-right: 30px solid #fff;
    width: 40px;
    margin: 70px 0 0 0;
    height: 0;
}

HTML

<div class="octagon-shape"></div>

Twelve Point Star

Demo

CSS

.star-twelve {
    height: 100px;
    width: 100px;
    background: #de00c7;
    position: relative;
    margin: 30px 0 30px 30px;
}
.star-twelve:before {
    content: "";
    position: absolute;
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
    height: 100px;
    width: 100px;
    background: #de00c7;
}
.star-twelve:after {
    content: "";
    position: absolute;
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
    height: 100px;
    width: 100px;
    background: #de00c7;
}

HTML

<div class="star-twelve"></div>

Try and have fun.

Six Point Star

Demo

CSS

.star-six {
    position: relative;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 80px solid #35afe3;
    margin: 0 0 30px 0;
}
.star-six:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 80px solid #35afe3;
    margin: 30px 0 0 -50px;
}

HTML

<div class="star-six"></div>

Try and have fun.

It is also very easy to change the behavior of the enlarged image like you can set it to appear only when you click on thumbnail – using onClick attribute, but IE6 does not support this as usual. This CSS gallery works well in all major browsers like Firefox, IE6+, Opera 8+, Chrome etc.

So, it’s time to copy paste the following CSS and HTML Code and enjoy the true features of CSS image gallery.

Image Gallery with Hover Effect

CSS

.imagegallery { position: relative }
.small {
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
    font-size: 1.5em;
}
	.small img {
	    border: 1px solid white;
	    margin: 0;
	}
.small:hover { background-color: transparent }
.small span {
    position: absolute;
    background-color: #ededed;
    padding: 5px;
    left: -1000px;
    border: 1px solid #d7d7d7;
    visibility: hidden;
    color: black;
    text-decoration: none;
}
	.small span img {
	    border-width: 0;
	    padding: 2px;
	}
.small:hover span {
    visibility: visible;
    top: 0;
    left: 230px;
    z-index: 50;
}

HTML

<div class="imagegallery">
	<a class="small" href="#"><img src="images/yoga_small.jpg" width="100px" height="60px" border="0"/><span><img src="images/yoga.jpg"/><br/>Yoga session</span></a>
	<a class="small" href="#"><img src="images/gym_small.jpg" width="100px" height="60px" border="0"/><span><img src="images/gym.jpg"/><br/>Fitness training</span></a>
	<br/>
	<a class="small" href="#"><img src="images/bilberry_small.jpg" width="100px" height="60px" border="0"/><span><img src="images/bilberry.jpg"/><br/>Bilberry fruit</span></a>
	<a class="small" href="#"><img src="images/flower_small.jpg" width="100px" height="60px" border="0"/><span><img src="images/flower.jpg"/><br/>Beautiful flower</span></a>
	<br/>
	<a class="small" href="#"><img src="images/inter_small.jpg" width="100px" height="60px" border="0"/><span><img src="images/inter.jpg"/><br/>Safe intercourse</span></a>
	<a class="small" href="#"><img src="images/maitake_small.jpg" width="100px" height="60px" border="0"/><span><img src="images/maitake.jpg"/><br/>Maitake mushroom</span></a>
	<br/>
	<a class="small" href="#">Horse Chestnut<span><img src="images/hc.jpg"/><br/>Tasty chestnuts</span></a>
	<br/>
	<a class="small" href="#">Emotional<span><img src="images/emotional.jpg"/><br/>Emotional Sobriety</span></a>
</div>

Paste the below lines of code in your theme’s functions.php file.

function shift_admin_bar() {
    echo '
    <style type="text/css">
    body {
    margin-top: -28px;
    padding-bottom: 28px;
    }
    body.admin-bar #wphead {
       padding-top: 0;
    }
    body.admin-bar #footer {
       padding-bottom: 28px;
    }
    #wpadminbar {
        top: auto !important;
        bottom: 0;
    }
    #wpadminbar .quicklinks .menupop ul {
        bottom: 28px;
    }
    </style>';
}
add_action( 'admin_head', 'shift_admin_bar' ); // for backend
add_action( 'wp_head', 'shift_admin_bar' ); // for frontend

If you don’t want to edit any files, then make use of Stick Admin Bar To Bottom plugin.

Paste the below snippet in your theme’s functions.php file.

function add_tiny_buttons($buttons) {
 $buttons[] = 'hr'; // Insert horizontal ruler
 $buttons[] = 'del'; // Deletion element control
 $buttons[] = 'sub'; // Subscript
 $buttons[] = 'sup'; // Superscript
 $buttons[] = 'fontselect'; // Font family
 $buttons[] = 'fontsizeselect'; // Font size
 $buttons[] = 'cleanup'; // Cleanup messy code
 $buttons[] = 'styleselect'; // Styles
 return $buttons;
}
add_filter("mce_buttons_3", "add_tiny_buttons");

You can try adding more.

Paste the below code in your theme’s functions.php file.

add_filter('login_errors', create_function('$a', "return null;"));

Set it up.