HTML Code:
<!doctype html><!-- Document type declaration -->
<html><!-- Opening HTML tag -->
<head><!-- Head section containing metadata -->
<title>HTML CSS Exercise - create linear, radial, repeating linear and repeating radial gradients with CSS3</title><!-- Title of the HTML document -->
<style type="text/css"> /* Opening style tag for CSS with type attribute */
.container{ /* Style for container class */
text-align:center; /* Align text to the center */
padding:20px 0; /* Padding of 20px on top and bottom, 0 on left and right */
width:960px; /* Width of the container */
margin: 0 auto; /* Centering the container horizontally */
}
.container div{ /* Style for div elements inside container class */
width:200px; /* Width of the div */
height:150px; /* Height of the div */
display:inline-block; /* Display as inline block */
margin:2px; /* Margin around the div */
color:#ec8007; /* Text color */
vertical-align: top; /* Align elements to the top */
line-height: 230px; /* Set line height to vertically center text */
font-size: 20px; /* Font size of the text */
}
.linear{ /* Style for elements with class linear */
background:linear-gradient(to bottom, #4b6c9c , #5ac4ed); /* Linear gradient background from top to bottom */
}
.radial{ /* Style for elements with class radial */
background:radial-gradient(#4b6c9c,#5ac4ed); /* Radial gradient background */
}
.repeating-linear{ /* Style for elements with class repeating-linear */
background:repeating-linear-gradient(-45deg, #4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px); /* Repeating linear gradient */
}
.repeating-radial{ /* Style for elements with class repeating-radial */
background:repeating-radial-gradient(#4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px); /* Repeating radial gradient */
}
</style><!-- Closing style tag -->
</head><!-- Closing head tag -->
<body><!-- Body section of the HTML document -->
<div class="container"><!-- Container div -->
<div class="linear">Linear</div><!-- Linear gradient div -->
<div class="radial">Radial</div><!-- Radial gradient div -->
<div class="repeating-linear">Repeating Linear</div><!-- Repeating linear gradient div -->
<div class="repeating-radial">Repeating Radial</div><!-- Repeating radial gradient div -->
</div><!-- Closing container div -->
</body><!-- Closing body tag -->
</html><!-- Closing HTML tag -->
Explanation:
Live Demo:
See the Pen create-gradient-with-css-answer by w3resource (@w3resource) on CodePen.
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4