Different Dropdowns

DropDown1 Hello Folks! Today I will be sharing another important topic with you. This topic is regarding different kinds of dropdown. I believe you all have noticed importance of Dropdown in different websites these days especially in contact forms and other kind of forms. Basically Dropdown is simply a list which allows the user to choose one or multiple values from a list. When activated, it displays (drops down) a list of values, from which the user can select one or multiple values. To create a very simple Dropdown or Select list, we basically us HTML. Using Select and Option Tag, we can easily create a simplest Dropdown. Now we can style this Dropdown using CSS Styling. This Styling wont affect its working. Because Styling can be changed using some kind of scripting.

     

Advertisements

Downloading a File with different Name !!

Hello Folks! Today I am here to share a simple trick with you. Have you ever noticed that the file you are downloading is having a different file name which is different from the one mentioned in the code. If you haven’t done yet, you can do so by checking the HTML Code in your specific browser. These days it is common for the designer and developers to use a different name for the file to be downloaded. This is done basically to provide ease of access to the user. So that user can save the file to there local memory with a proper name.

     

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.

     

Colorful Scrollbar Within Window

A scrollbar is used to scroll down or scroll up any page. Using some easy HTML and CSS we can create our own styled scrollbar. These scrollbar can have curved edges, it can also be colorful. Depending on the conditions and requirement we can make different types of scrollbar. These will work perfectly for both x-axis and y-axis. The sample demo file is attached below.

Custom Scroll

Custom Scroll

     

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.