The box shadow property allows web designers to design multiple drop shadow(outer or inner) for any box element ,using values for color,size and offset etc. In this tutorial we are going to explain how we can use the box shadow property for drop shadow effect. The box shadow property can be assigned through comma separation in order to specify horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow. Color value and inset(to create an inner shadow) are optional. Box Shadow Compatibility The number in the below browser's image shows the first browser version, that supports the property...

The HTML <hr> element represents a Horizontal-rule and it is used for page break via line. It creates horizontal line, which makes someone to understand that there is an end of the page or a sentence break. We can also design the hr (horizontal-rule) tag to create attractive user-interface. In this tutorial, we are going to design different and styling hr tag, using images and text. It's simple and easy to use where each style code is different from other style. You can also refer live demo or download the Script file. Extract the downloaded files, save it and run index.html on browser Below are the different...

The @import is a rule allowing you to import one style sheet into another.When you are working on a complex website and stuck to managed many stylesheet, then @import is very helpful .The @import rule is another way of loading a CSS file. In this tutorial we are going to explain,How we can use @import  for importing one style sheet into another. Loading a CSS file using @import you can do this by two ways.The simplest way is load CSS file within the header of your document, like so: @import with in header Here we are importing style.css file in index.html header section.  ...

A search box frequently used by websites to make your website user friendly. By the search box user can search the content. Adding stylish search box on your website.This will help searching data content and also make a website appear professional. In this tutorial we are going to explain how you can make stylish search box using only HTML and CSS. Here we are demonstrate three types of stylish search box with code and demo as well. You can also refer our live demo or download the Script file. Extract the downloaded files, save it and run index.html on browser If you...

ProgressBar is a graphical  presentation  which shows some progress. It shows a bar representing the completing of the task. Normally the ProgresBar do not display the amount of completion in numbers. If we want, we can display it in the Text or as graphical format. In this tutorial we are going to explain how we can make a simple and stylish progress bar using jQuery and HTML/css. Here we are explaining five types of progress. Circular Progress Bar Steps Progress Bar Linear Progress Bar Ball Progress Bar Loader Progress Bar  You can also refer our live demo or download the Script...

In this tutorial I am give you brief explanation about CSS Background Gradient property used for background to display smooth transition between two or more colors which was not possible earlier, as earlier we use to put image or other alternative approach for such effects. Gradient is nothing but a color that fades into another. Types Of Gradients: 1.  Linear Gradients You can create a linear gradient by defining an axis. It can go from left-to-right, top-to-bottom or at any angle your choice. There is one thing you need to keep in mind i.e. define at-least two color stops. Color stops are...

In this tutorial I am going to give an overview on: Background-image, a css property that sets one or more background images for an element like div, paragraph etc., which by default gets placed at the top-left corner of that element, and can be repeated vertically and horizontally or both by using Background-repeat property.  Through this tutorial you will know different variations in order to place your background image.  You can set one or more images in the background as: [css]background-image: url("image1.jpg"), url("image2.jpg");[/css] Syntax For Background-image: [css]background-image: url|none|initial|inherit;[/css] Where: [css] url:   Url of the image. To set more than one image, place the urls separated by a comma...

CSS float is a property that forces any element to float (right, left, none, inherit) inside its parent body with the rest of the element to wrap around it. This property can be used to place an image or an element inside its container and other inline elements will wrap around it. For eg. : Images in newspaper and articles are placed in certain position with rest of the content wrapped around it. One should keep in mind that this can only be applied to float the element horizontally (i.e. right or left ) not vertically. Syntax : [css]float: left | right |...

The CSS Border property allows you to customize the borders around an HTML elements. It is a shorthand property to set individual border property values in a single place. You can set the thickness or width, color and style of each border. There are mainly three border properties: The border-style :- Specifies whether a border should be solid, dashed line, double line, or one of the other possible values The border-color :- Specifies the color of a border The border-width :- Specifies the width of a border Apart from the above three one more property is: Border - Shorthand property...

Using CSS background-attachment property one can either fix the background image or can scroll it accordingly with the rest of the content.   For eg: If you have used an image in your background then normally the image will scroll with the page and its content , but if you have set this property to fixed then the image will stay in the same position. You can also refer the below shown syntax by using which you can set up this property in different ways.   Background-attachment Syntax [css] background-attachment: scroll;   /* It will scroll along with the element (default )*/ background-attachment: fixed;  ...

When we opt for Background opacity property of CSS for an HTML element generally what happen is it will not only change the opacity of image in background but also reflects the opacity changes in its child elements. The default initial value for opacity is 1(100% opaque). But this tutorial will guide you how to handle this property effectively. Watch the live demo or download code from the link given below   You can also refer the below opacity syntax which suits best for your requirements: Background Opacity Syntax [css]opacity: 1.0  /* The default opacity where image looks complete solid. */ opacity:...

This tutorial will help you to learn about the "background-size" property of CSS and how to set it in your HTML element. The CSS3 method is strongly preferred now a days, as it has given the flexibility to resize the background image and can be reused in different contexts. One can specify the size in pixels or percentages.   Background Size Syntax [css] Keywords syntax- background-size: cover /*Background image will cover both the coordinate of containing box.*/ background-size: contain /*Small size images will spread till the containing box covers completely.*/ One-value syntax. First value is width and height will automatically set...

This blog post explains and provide you different CSS Styles for checkbox and radio button . Here, are the following types, you just copy our code or download it to implement in your forms.

In this blog post we provide you 5 different form styles, created in HTML/CSS3. Just follow our codes or download it to use in your form styles.

In this blog post , we will tell you to style your HTML drop down field. We have created simple form with id="myform" and add drop down field into it.

Cascading Style Sheets level 3 allow us to design various HTML elements in elegant fashion, submit button is one of them. This blog helps you to design stylish button using CSS-3.

This code segment emphasize on creating input elements of form that consists of Icons. There is Email field, Name Field, Contact Name and Address fields so we have to put icon inside the form fields.

Learn designing responsive form for your website. Make user friendly forms on mobile, laptops and desktops at a time.