CSS3 Sliding Form

Hello folks, I am back with another interesting post to share with you guys. Today I will be sharing something about some new techniques introduced in Forms. Now days there has been lot many different kind of forms, some of them are Contact Forms, Feedback Forms, Payment Forms etc. Feedback form has becoming a necessary part of daily needs websites. Using feedback forms, we can provide some feedback to the owner of the website, so that he/she can make changes as per his convince and users requirements. These feedback forms can be added in different ways to our website. I am sharing a sliding feedback form with you. In my demo file, the feedback with slide from left once you hover over a certain section of the page. This form is created using some wire-frame and scripts. To create this form I have used Normalize.css with some custom styling. To make it look more dynamic I have used Modernizr.js.

     

Advertisements

Communication Links

Communication is one of the most important part of life. Now we can communicate with some one or even with the developer while accessing his/her website. Just by clicking a simple button we can easily make a call or send SMS. This button is actually a link which is created using a-tag with some added styling using CSS. The code to this button is quite simple and easy. In the href attribute we have to add tel:[number]. While accessing the website or application on mobile, if we click the button it will automatically open the dialer, using which we can make the call quite easily.

     

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

     

SuperSized Carousel

Supersized Plugin also provides a feature for creating a slider. It is also one of the popular effects to provide a dynamic background to our webpage. This carousel effect is now day mostly used with websites. This plugin allows the designer to create less text & more pictorial website(websites that contain less text).

<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />
		/*jQuery CDN & Easing Plugin*/
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.min.js"></script>
		/*Supersized Plugins*/
		<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
		<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>

    

SuperSized

Supersized Plugin Effect is one of the popular effects to provide a dynamic background to our webpage. This effect works perfectly with all the latest browsers. This plugin can be used in any page by adding some links to css file and JavaScript file in Head section.

<link rel="stylesheet" href="supersized.core.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="supersized.core.3.2.1.min.js"></script>

    

Watt Ease

Watt Ease is a new analytics and insights service providing company. Its Corporate Office is in San Francisco (USA). The company was started in early 2012. It provide complete info to its customers regarding power saving. They are providing helping utilities to better engage their residential and small and medium business customers. They asked us to create small but colorful mail for their power saving campaigns.

Watt Alerts

Watt Alerts

    

Evolis Branding

Logo

Evolis is one of the popular brand in Australia. The brand actually started with a single product. Now the brand is distributing multiple product all over the world. During last Christmas, The company started a new discount offer on their products, through E-Advertisment, The E-Advertisment page was created by me for the website and their personal blog. The advertisment provides complete info about discounts on differnt products.