- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semi-Transparent Gradients</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="squares">
<div class="square square-top-left"></div>
<div class="square square-top-right"></div>
<div class="square square-bottom-left"></div>
<div class="square square-bottom-right"></div>
</div>
</body>
</html>
CSS
.square-top-left {
background-image: linear-gradient(
135deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%
);
}
.square-top-right {
/* Colors: white 30% opacity, transparent, white 30% opacity, transparent */
}
.square-bottom-right {
background-image: linear-gradient(
315deg,
rgba(255, 255, 255, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.4) 75%,
transparent 75%
);
}
.square-bottom-left {
/* Colors: white 50% opacity, transparent, white 50% opacity, transparent */
}
.squares {
margin: 70px auto;
width: 300px;
height: 300px;
background-color: #3498db;
}
.square {
float: left;
width: 50%;
height: 150px;
}
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
Add two gradients to the empty corner squares:
- Assign a gradient at an angle of
225°to the top right square. - Assign a gradient at an angle of
45°to the bottom left square. - Then change the background color of the
.squaresblock to#8e44ad.
The dimensions of the transitions are the same as the ones used for the first two squares. The colors are specified in the CSS code.
Comments