To create a full screen video background with CSS, the code is as follows −Example Live Demo    * {       box-sizing: border-box;    }    body {       margin: 0;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       font-size: 17px;    }    .backgroundVideo {       position: fixed;       right: 0;       bottom: 0;       min-width: 100%;       min-height: 100%;    }    .content {       position: fixed;       bottom: 0;     ... Read More

To show how to put an icon inside an input element in a form using CSS, use the Font Awesome. For adding the font awesome icons on a web page, include the CDN − Place Icons Inside an Input Element We have used the Font Awesome icons here for Username, Email and password − Icon for the Username For the Username, the following icon is included − ... Read More

To create a responsive table with CSS, the code is as follows −Example Live Demo    table {       border-collapse: collapse;       border-spacing: 0;       width: 100%;       border: 1px solid #ddd;    }    th, td {       text-align: center;       padding: 16px;       font-weight: bold;       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;       font-size: 18px;    }    th:first-child, td:first-child {       text-align: left;    }    tr:nth-child(even) {       background-color: #f2f2f2    } Comparison Table Example Features Basic Pro Free Yes No Customer Support No Yes Validity 1 Year Lifetime Warranty No 5 Years OutputThe above code will produce the following output −

To create a responsive table with CSS, the code is as follows −Example Live Demo    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    div{       overflow-x: auto;    }    table {       border-collapse: collapse;       border-spacing: 0;       width: 100%;       border: 1px solid rgb(0, 0, 0);    }    th, td {       text-align: left;       padding: 8px;    }    tr:nth-child(even){background-color: #f2f2f2} Responsive Table Example First Name Last Name marks marks marks marks marks marks marks marks marks marks JACK ROY 50 60 10 20 40 50 10 20 30 40 Evelyn Monroe 24 14 22 44 55 44 11 55 22 33 Joe Anderson 54 22 99 55 91 61 81 11 22 55 OutputThe above code will produce the following output −On resizing the window the scrollbar will appear as follows −

Use the RGBA() values for CSS transparency. Set the alpha channel parameter to specify the opacity for color − .transparent { background-color: rgba(0, 0, 255, 0.582); } RGBA color value includes the rgba(red, green, blue,  alpha). Here, the alpha is to be set for transparency i.e. − 0.0: fully transparent 1.0: fully opaque Transparency With RGBA The following is the code for implementing CSS transparency using RGBA. Here, we have set the alpha parameter to a value 0.582 for transparency − Example ... Read More

To set opacity to work in all modern web browsers like Firefox, Google Chrome, Opera, etc., use the opacity property and set under CSS class − transparent{ opacity: 0.3; } The following is the code to work with opacity in modern browsers − Change the Opacity Example In this example, we have changed the opacity of an image using the opacity property − body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; ... Read More

For Radial Gradients, set color stops. The default shape is Ellipse, but you can also set other shapes like circle. Set at least two color stops for Radial Gradients in CSS.Following is the code for creating radial gradients using CSS −Example Live Demo body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } #radial {    height: 200px;    width: 200px;    background-image: radial-gradient(       rgb(255, 0, 106),       rgb(2, 0, 128),       rgb(0, 255, 42)    ); } Radial Gradient Example OutputThe above code will produce the following output −

To create a table on a web page, we use the element. It allows us to set the table row using the element. Within that, the elements are used to place the data. A table can also be striped. Such striped tables have a different look for every alternative row. To set a property for evert alternative row, we will use the nth-child(even) property. Let us see how to create a zebra striped table with HTML and CSS. Create a table The element is used to create a table. We have set three columns for our ... Read More

On a registration page, you must have seen an input filed to set the password. On entering the password, the validation system suggests you how to construct a password. For example, a password should have at least a number, character, it should be minimum 8 characters. In this tutorial, we will see how to set the same password validation form on a web page. On typing to set the password the validation system will suggest the correct suggestions. Let us see how. Create a form The element is used to create a form on a web page. Two ... Read More

A select box allows you to create a dropdown for users to select a specific value from a list. These generally appear when let’s say you want to a user to select a degree from a list of degrees, favourite sports from a list of popular sports, etc. Let us see how to create custom select boxes with CSS and JavaScript. The color of the select box, the appearance, etc. can be easily changed. Let us see how − Create a container for the select box First, create a container div for the select boxes. Option value 0 is where ... Read More