HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cool box</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<body>
<p>This is a cool box</p>
</body>
</body>
</html>
CSS
html {
font-family: sans-serif;
}
/* Your CSS below here */
p {
/* sizing and position */
width: 200px;
margin: 10px auto;
line-height: 8;
/* text */
font-size: 1.1rem;
/* Since the default font-size is 16px,
I guessed that the correct size would be 1.1rem. */
text-align: center;
color: white;
text-shadow: 1px 1px 1px black;
/* border */
border-radius: 0.6rem;
border: 1px solid rgb(141, 18, 18);
/* background */
background-color: red;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 30%,
rgba(0, 0, 0, 0));
/* other effects */
box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .5),
inset -2px -2px 2px rgba(0, 0, 0, .5),
2px 2px 5px black;
}
도움 받은 곳
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
https://discourse.mozilla.org/t/a-cool-looking-box-assessment/24685/2
깨달은 것
1. linear-gradinet의 값으로 사이드 키워드의 순서는 중요하지 않다. (MDN)
2.
background-color: red;
background: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 30%,
rgba(0, 0, 0, 0));-> css를 이렇게 작성하였을 때, 배경색으로 설정한 red가 안 나왔다. 그 이유가 backgroudn-color의 값을 후에 선언된 background가 재정의했기 때문이었다.
'CSS > MDN 평가' 카테고리의 다른 글
| Fundamental layout comprehension (0) | 2022.11.18 |
|---|---|
| Typesetting a community school homepage (0) | 2022.11.13 |
| Creating fancy letterheaded paper (0) | 2022.11.09 |
| Fundamental CSS comprehension (0) | 2022.11.09 |