To create a modal box with CSS and JavaScript, the code is as follows −Example Live Demo    body {       font-family: Arial, Helvetica, sans-serif;    }    .modal {       text-align: center;       display: none;       position: fixed;       z-index: 1;       padding-top: 100px;       left: 0;       top: 0;       width: 100%;       height: 100%;       background-color: rgba(0, 0, 0, 0.4);    }    .modalContent {       font-size: 20px;     ... Read More

The property opacity is the modern solution and works for Firefox, Safari, opera, and every version of chrome. The -moz-opacity property is the opacity property for Firefox while the –khtml-opacity property is for safari. The filter property is to give opacity like effect. Using all these values together as a fallback for modern opacity allows us to use opacity in all browsers. Set the images We will check the cross-browser opacity for the images. The second image above will get opaque on all browsers − Opacity for the 2nd image The opacity for the second image ... Read More

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