Draggable & Droppable Items

We can drag and drop the selected file and then by clicking upload button, we can upload the file. Hence, this uploading process is quite easier for the users. Now days, this uploading process is used more.

Drag & Drop

Drag & Drop

The dragging & dropping of file is carried out using Draggable & Droppable API used in HTML5. To make any file draggable & droppable we can also use some Javascript function or may be some jquery API. The file today I am uploading is created using HTML5, CSS3, Mootools. Mootools is a compact Javascript Framework.

     

Advertisements

Fixed and Boxed Layout

1. Fixed Layout.
2. Fluid Layout.

Many Designers prefer Fixed layout over any other layout because using this layout is easier and its quite easy to make web pages using Fixed layout. A fixed layout webpage is wrapped into fixed width. The width is fixed for all the browsers, hence there is no issue related to width. Also there in no need to define max-width and min-width using Link Tag attributes. But using Fixed layout, there is a need of Horizontal scroll bar while using small resolution devices and browsers. With this major issue, it is now days less in use. Hence now days Designers prefer Fluid layout over this Fixed Layout while designing Web pages.

Layouts

Layouts

     

Fishy Icon Set

In this post, I will discuss something about Zooming Icons. This is also one of the latest technique discovered in recent days. Here I will discuss something were when we hover over any icon or image, then image/icon will zoom itself. This is known as Zooming In. And if we roll out our mouse from that particular image/icon, it will come back to its original state. This is known as Zooming Out. This zooming technique is carried out using very simple CSS. In CSS, we will add a zoom property to any specific image/icon using its selector. Using Pseudo selectors called :hover , we will add zoom property on it. Thus which will cause the effect to appear.

Normal State

Fishy Menu – Normal State