Vertically Responsive Design : Keeping Things Above The Fold

Responsive Design

In last couple of years you must have seen countless examples of responsive designs. Most of the websites are either already responsive or are planing for a responsive re-design. As we see more and more devies, this trend is likely to continue in near future as well. Pete Cashmore from Mashable has already declared 2013 as the year of Responsive Designs.

Developers mostly uses Fluid Grid, or Media queries to make the website adaptive. The basic technique is to viewport width and render content according to that.

Read More …

Sexy Tooltip using CSS3 (no images)

CSS is Awesome, but “CSS3” is Awesomely Awesome.

With CSS3 we can make our pages even more beautiful without using additional images and extra markup.

In this post I have tried to make tooltips using CSS3. This is just a sample implementation for tooltip, you can have even better variants.

Read More …

How to Create a Simple Slideshow using Mootools / JQuery

slide_show_icon When we want to show lots of content in limited screen space, Slideshows comes to rescue. Making use of slideshows is the optimal way to present large amount of information. In this post i’ll walk you through the process of making a very simple(minimilistic) slideshow using Mootools / Jquery.

 

You must have seen various types of slideshows around the web. Creating such slideshow is also very simple. With little smart code one can make it very quickly.

As it is said “A picture is worth a thousand words”, similarly I believe a demo is worth a thousand words.

Read More …

Another Beautiful Thumbnail Hover Effect : Using Mootools

Some days back I wrote a post regarding “Beautiful Thumbnail Hover Effect“. On getting such a good response about the javascript effect I am again presenting a different thumbnail presentation.

This implementation is little different.  To know more about this effect lets see the demo first.

View Demo

If you have seen the demo then you might be wondering how this image is splitting in middle. Actually to get this effect I have used two instances of the same image.

Read More …

Make Your Links (Hyperlinks) Even More Sexier

HyperLinkYou would have often seen various attempts to make hyperlink more beautiful. One of my personal favorite is to have little icons beside links to let you know where they link to.
Different icons for external links, pdfs, images, etc. etc. You can find the tutorial for such link over here.

In this post i’ll tell you a technique using which you can make your links even more sexier.

Check out the demo first : View Demo

The Implementation of this effect is given in the following sections.

Read More …

Beautiful and Simple Buttons with CSS

I have always been fond of CSS wonders. Although We all have seen lots of buttons using CSS, using JS, but today I am bringing you a fresh implementation of buttons.

The real beauty of these buttons are in its background images. In this tutorial I have also included the photoshop(psd) file used in creation of these buttons, so feel free to come up with your own imagination.

Read More …

Beautiful Thumbnail Hover Effect : Using Mootools

Thumbnail Effect Thumbnails of photos is very common part of any website. We have seen a lot of innovation and beautiful representation of thumbnails. Recently I came across a beautiful hover effect on thumbnails. Without saying much first see what is this effect.

View Demo

Thumbnail Effect

The Implementation of this effect is given in the following sections.

The HTML

I think the code here is self explanatory.

The CSS

The CSS for the effect is a bit lengthy, as lots of hidden elements are involved.

Read More …