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

To create a responsive navigation menu with a login form inside of it, the code is as follows −Example Live Demo Document    body {       margin: 0px;       margin-top: 10px;       padding: 0px;    }    nav {       width: 100%;       background-color: rgb(39, 39, 39);       overflow: auto;       height: auto;    }    .links {       display: inline-block;       text-align: center;       padding: 14px;       color: rgb(178, 137, 253);     ... Read More

On a web page, you may need to place an input field on a navigation menu. Such input field can be used as a search box for the users to search anything on the website. To place the search input field on the right, use the float CSS property and set it to the right value. Create a navigation menu The element is used to create a menu on a web page. The menu links are set using the element − Home Login Register Contact Us More Info ... Read More

Following is the code to create a full screen search box with CSS and JavaScript −Example Live Demo body {    font-family: Arial; } * {    box-sizing: border-box; } .showBtn {    background: #008b0c;    border: none;    color:white;    padding: 10px 15px;    font-size: 20px;    cursor: pointer;    opacity: 0.8; } .showBtn:hover {    opacity: 1; } .overlaySearch {    height: 100%;    width: 100%;    display: none;    position: fixed;    z-index: 1;    top: 0;    left: 0;    background-color: rgba(132, 150, 155, 0.747); } .searchBar {    position: relative;    top: ... Read More

A lot of websites these days have an animate search box on the home page itself. On placing the mouse cursor within the search box, the search box width increases to make it easier for users to search. Let us see how to create such animated search form with HTML and CSS. Create the search form Use the element and place the input type text in it. Do not forget to mention an apt placeholder for the users to understand the purpose of the textbox − Search: Style ... Read More

To clear an input field, first create an input filed. To clear, use the onfocus attribute. Let us see with two examples. Create an Input Field First, use the input type to create an input field in a form on a web page − Clear the Input Field on Focus To clear the input field, use the onfocus attribute. Clear an Input Field on Focus The following is the code to clear an input field on focus − Clearing an input field on focus example Click on the above field to clear its value Clear Input Fields Let us see an ... Read More