Front End Technology Articles - Page 638 of 860

To add a color to the shadow, use the box-shadow property and set the color, with the height and width.You can try to run the following code to set the color to shadow:ExampleLive Demo                    h2 {             box-shadow: 10px 10px green;             height: 70px;             background-color: red;          }                     Heading Two       Above heading has shadow.    

Use the [attribute|=”value”] selector to select elements with the specified attribute starting with a specified value.You can try to run the following code to implement CSS [attribute|=”value”] Selector,ExampleLive Demo                    [lang| = en] {             border: 5px solid orange;             border-radius: 5px;          }                     Hello       Hei    

To create a fading effect with CSS, use the c You can try to run the following code for fading effect:ExampleLive Demo                    #demo {             height: 100px;                background: linear-gradient(to right, rgba(255,50,30,0), rgba(255,50,30,1));             }                           Linear Gradient       Fading Effect    

The input type button can be a submit button or reset button. With CSS, we can style any button on a web page.You can try to run the following code to style input type button:ExampleLive Demo                    input[type = submit], input[type = reset] {             background-color: orange;             border: none;             text-decoration: none;             color: white;             padding: 20px 20px;             margin: 20px 20px;             cursor: pointer;          }                     Fill the below form,                Subject                    Student                                        

To add background color to the form input, use the background-color property.You can try to run the following code to implement the background color property to formExampleLive Demo                    input[type=text] {             width: 100%;             padding: 10px 15px;             margin: 5px 0;             box-sizing: border-box;             background-color: gray;          }                     Fill the below form,                Subject                    Student                    

To style the options in , you can try to run the following code,ExampleLive Demo                    select {             width: 100%;             padding: 10px 15px;             border: 1px dashed blue;             border-radius: 4px;             background-color: orange;          }                     Learn,                             Java             Ruby             Oracle             Tableau                    

To set border to form inputs, use the CSS border property.You can try to run the following code to add borderExampleLive Demo                    input[type = text] {             width: 100%;             padding: 10px 15px;             margin: 5px 0;             box-sizing: border-box;             border: 3px inset orange;          }                     Fill the below form,                Subject                    Student                    

To style the input field of a form, you can try to run the following code. Style the :ExampleLive Demo                    input {             width: 100%;          }                     Fill the below form,                Subject                    Student                    

To add space inside a form’s text field, use the CSS padding property.You can try to run the following code to achieve this:ExampleLive Demo                    input[type = text] {             width: 100%;             padding: 10px 15px;             margin: 5px 0;             box-sizing: border-box;          }                     Fill the below form,                Subject                    Student                    

Use the [attribute = ”value”] selector to select elements with a specified attribute and value.You can try to run the following code to implement the CSS [attribute="value"] Selector. Here, we have considered the attribute as rel,ExampleLive Demo                    a[rel = nofollow] {             border: 3px solid blue;          }                     Uber's Business Model       Share          Market