CSS Clock

This analog clock is quite simple to create and it can be used on a separate page as well as in a Modal Window.

CSSClock

CSSClock

Now the clock I have posted above is created using HTML5, CSS3, and very minimal scripting. This clock is responsive in nature. It means it can be easily used on Tablets as well as Mobile devices. The script I am using is created my me itself.One of the script is used for animation and other script is used for time. In HTML Markup, I have used div tags for displaying Numbers in clock. using different Id selector I have arranged second-hand, minute-hand, hour-hand.

     

Advertisements

jQuery Full Content

Hello Folks I am back with another post. Last time I posted something about Responsive Templates. Today I am going to discuss something about a very popular jquery plugin called Jquery Full Content. Now this plugin is a quite interesting plugin which can be used to create a full dynamic single page website. This plugin is used to create fully container with width and height of window. It will add a scrolling effect to the page . Once we click any link it will scroll to that location automatically. This location can be either vertical or horizontal. A sample to the image is shown below.

HomePage

HomePage

     

Responsive Template

Now days web designing is not a simple task as compared to earlier days. Earlier website were only created for either Desktops and Mobile Devices. With the introduction of Smartphones in the market and other platforms like Android, their comes Responsive Websites. Responsive Websites are defined as follows:

A responsive website changes its appearance and layout based on the size of the screen the website is displayed on.

Responsive sites can be designed to make the text on the page larger and easier to read on smaller screens. They can also be configured to make the buttons on the phone’s screen easier to press. More sophisticated ways of using responsive design on a mobile device include: formatting the website to hide or present entirely different information, radically changing the graphics and colors, or even reducing the site to emphasize just its most important piece.

     

Custom Maps

Sample_1

Sample_1

To start with coding we basically need Twitter Bootstrap responsive wire frame, jQuery, htmlshim file for early version of browsers. Starting with coding. Bootstrap is placed at the top of in the header section before any other style sheet. The layout for the document is arranged in such a way that sidebar is placed on the left hand side and main context section that is this Google Map is placed on the right side of the page. The dropdowns for color are obtained using Javascript. The link to all the other scripts are placed at the bottom of the Body tag. We also need a link to Google Map API. The version of API depends on the requirement of client or user.

     

Diapo

Carousels are also known as Image Sliders. These carousels can be made very easily by using some javascript. Now days there are many scripts available in the market which can used to create a carousel quite simply by just using HTML and CSS. Here i will share one of those plugins which can be used for creating CAROUSEL in such a way that, it can handle anything including text, image, video, buttons etc. A snapshot of this slider is given below.

Carousel

Carousel

     

Win 8 Button

Hello Folks! I know you guys are eagerly waiting for my next post. So here I am with my next post. You guys can see that i am working mostly with Buttons these days. Its because these days i am working mostly with Buttons..(Oops I made a POO POO…). So today am post something about Buttons, which exactly looks like Windows 8 Start-up Button. These buttons are created using different colors. A similar snapshot of Buttons is shown below.

Win8 Button

Windows 8 Buttons