Checkboxes & Radio Buttons

Radio Buttons and Check boxes are one of the most common type given to Input tags. These are mostly used in forms and other form related areas. Actually Radio buttons are graphical icons representing one of the set of items. Out of this set of items only one item can be selected at once.

Checkbox_1

Checkbox 1

On the other hand, Checkbox as shown in figure above are defined as a graphical control element, which allows users to make binary selections. This exactly means a choice between one of two possible mutually exclusive options. Checkboxes are often shown on the screen as a square box as shown in above image. These checkboxes are used to make multiple selections.

     

Advertisements

CSS Based Tool Tip

Hello Folks!! I am back with another interesting post for you. I hope you find my previous post helpful to you. Today I will be sharing something interesting about Tool tips. As you all have seen on website these days, there are lot many tool tips available with different styles. Actually a Tool Tip is a message which appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user interface. This message may consist of some text, image, hyperlink or may be some audio, video files.

A basic tool tip consist mainly of three parts: some text, a different color background with borders and a pointer pointing towards some text on the webpage to which this tool tip is linked. Before CSS3 was introduced, tool tips were designed and induced using some scripting in web pages. Since CSS3 can in existance, it has became quite easy to design a tool tip. Today I am sharing some very basic tool tips created using CSS3 and HTML only. Their is no use of JavaScript. To see more check out the demo file attached with this post.

     

Horizontal Forms

Hello Folks! Today I am gonna post something really interesting and unique. This time I will be posting another type of form. This will be Login form. Login forms are really common type of form, but the form I am gonna share will be unique in layout from other forms. Normally, we see vertically aligned form which are have a basic design. The design we use is horizontally aligned. We have also used some scripting to create this basic form structure and other animation.

Horizontal Form

Horizontal Form

     

Interactive Form with Sliding

Hello folks! Today I am gonna share about Interactive Forms with you. This form is created by me and It can be used in different fields for various purpose. As an example I made this form for Hospital info feeder. This is an Attendant Registration form which can be used to store Attendant info for all those who are coming to meet patient admitted in hospital. This is a highly interactive and simple form. This form is created using HTML, CSS, Jquery and some additional scripting through javascript. In styling, I have used some vendor prefixes for browsers like Chrome, Firefox, Opera, Safari etc. I also used some CSS3 Attributes. This form is backward compliant. It means that this form works on all old as well as latest browsers including IE8.

     

CSS content and attr

CSS is becoming more powerful but on the other hand it also allows designers and developers to do some little things quite easily. Earlier, these things where used to be done by using some kind of scripts. In CSS3, their have been various features like transition, transform etc. under highlights, but one feature that came up as an underdog is generated content/ text.

Basic content Usage

The basic content property allows the designer or developer to dynamically set the content by using a pseudo element. Note that the position of this content remains relative.

     

Select Menu With Custom Dropdown

I have made something really interesting using which we can design stylish select bar without using any scripts and by only using CSS. Using some styling properties and attributes we can quite easily create a perfect select bar which will work perfectly on all the latest browsers.

Select BAR

Select Bar

Here in the above figure you can check out that the color of dropdown is different than color of text area in the select bar. This is all done using CSS Styling. The outline given to the complete select bar is of same color as the dropdown background. To give it more of a fresh feeling we have made it its edges round by using border-radius properties.

     

Star Rating (Using Script)

Star Rating is one of the most easy and simple way to rate any object present on your website. It can be used in Blog, Online Shop, Website, Portfolio. Its is a voting control which enable rating elements of content in your site by its readers. It’s a super-effective way of getting instant feedback from your readers. Whether it’s a blog post, web page, image or what ever piece/element of your website that you want to be rated by your readers. The demo file I am adding today is a cross browser compliant.

Star Rating

Star Rating