728x90
반응형
안녕하세요. ^-^
전에는 선형그라데이션을 만들어 보았습니다.
오늘은 원형 그라데이션을 만들어 보겠습니다.
오늘도 아주 간단합니다.
간단한 [ html ]을 보실까요?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<p>그라데이션 배경을 만들어 봐요!!</p>
</div>
</body>
</html>
|
cs |
짠 저번이랑 [ html ]은 동일합니다.
[ css ]도 거의 동일합니다.
핵심이 되는 background만 조금 달라요.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:url(cat.jpg) no-repeat center center;
background-size:cover;
}
.box{
width:500px;
height:200px;
margin:40px auto;
background:radial-gradient(circle, #6D5AFB 0%, #E9183F 100%);
text-align:center;
border-radius:10px;
}
.box p{
line-height:200px;
color:#ffffff;
}
|
cs |
[ css ]가 조금 다르죠?
background가 전에는 linear-gradient 였는데
오늘은 radial-gradient 입니다.
내용도 비슷하면서도 몇 가지가 다릅니다.
(circle, #6D5AFB 0%, #E9183F 100%) 이 내용도
색깔이 들어가는 부분은 같지만 앞에 circle이 다르죠?
728x90
선형 그라데이션은 각도가 들어가는데
원형은 타원인지 원형인지를 명시해 줘야 합니다.
circle 일 때 이렇게 표현이 됩니다.
타원이면 어떻게 나올까요?
이렇게 나와요~~
기본값은 ellipse이기 때문에 앞에 내용을 안 쓰면
기본적으로 직사각형인지 정사각형인지에 따라
다르게 표현이 됩니다.
직사각형일 때는 ellipse로 표현이 되고
정사각형일 때는 circle로 표현이 됩니다.
사각형에 맞춰서 표현이 되네요~
하나하나 쌓여가는 모습을 보니
마음이 든든하네요.
부족하나마 여러분들께 도움이 되었으면 좋겠습니다.
오늘도 즐거운 하루 행복한 하루 보내세요.
728x90
반응형
'코딩 어린이의 노트' 카테고리의 다른 글
| 클립보드를 이용한 내용 복사 (2) | 2023.02.17 |
|---|---|
| 그라데이션 박스에 투명 테두리 넣어주기 (0) | 2023.02.12 |
| 그라데이션 배경색 만들기 (0) | 2023.02.10 |
| 배경 이미지를 흐릿하게 만들어 보자 (0) | 2023.02.06 |
| 배경이미지의 채도를 조절해요 (0) | 2023.02.01 |