- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Color Transitions in px</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flower">
<div class="leaf leaf-top-left"></div>
<div class="leaf leaf-top-right"></div>
<div class="leaf leaf-bottom-left"></div>
<div class="leaf leaf-bottom-right"></div>
</div>
</body>
</html>
CSS
.leaf-top-left {
background-image: linear-gradient(-45deg, #f00000 30px, #000000 30px, #000000 40px, #ff0000 40px, #ff0000 70px, #000000 70px);
}
.leaf-top-right {
/* colors: #00ff00, #000000, #00ff00, #000000 */
}
.leaf-bottom-right {
/* colors: #ffff00, #000000, #ffff00, #000000 */
}
.leaf-bottom-left {
/* colors: #ff00ff, #000000, #ff00ff, #000000 */
}
.leaf-top-left,
.leaf-bottom-right {
border-radius: 0 50%;
}
.leaf-top-right,
.leaf-bottom-left {
border-radius: 50% 0;
}
.leaf {
float: left;
width: 150px;
height: 150px;
background-color: #dfdfdf;
}
.flower {
margin: 70px auto;
width: 300px;
}
html,
body {
margin: 0;
padding: 0;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
Finish painting the flower using sharp gradients:
- Assign a gradient at an angle of
45°to the top right leaf. - Assign a gradient at an angle of
135°to the lower right leaf. - Assign a gradient at an angle of
225°to the lower left leaf.
The colors for the leaves are indicated in the comments in the CSS. The dimensions of the transitions are the same as the ones used for the first leaf.
Comments