- Theory
- Theory
- Comments
Muffin’s Royal Frame
Now let’s practice creating frames “with cats.” Or more precisely, with one particular cat by applying different frames to his portraits.
Take the image of the actual image border as the first frame. Take the small areas in the corners of the image to serve as the corners of the frame:
We will also try to slice up the original image by filling in the space between the borders of the frame. Since the image in the middle has a transparent area, Muffin will be visible through it.
And at the end, add a small amount of padding to the graphic frame.
- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muffin’s Royal Frame</title>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="portrait"></div>
</body>
</html>
CSS
.portrait {
box-sizing: border-box;
margin: 20px auto;
padding: 40px;
width: 400px;
height: 400px;
border: 40px solid rgba(0, 0, 0, 0.4);
background:
url("img/glasses.svg") no-repeat 75px 125px,
url("img/muffin.jpg") no-repeat center #ffffff;
background-clip: padding-box;
background-origin: border-box;
background-size:
150px,
cover;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Set the background image of the
img/frame.pngframe for the portrait, - assign the value
100for theborder-image-sliceproperty, - then assign the value
100 fill, - and then assign the value
10pxtoborder-image-outset.
Comments