안녕하세요. ^-^
오늘은 그라데이션 박스를 잘 보이게 하기 위해
테두리를 넣을건데요.
쨍한 흰색보다는 투명도를 줘서 만들어 보겠습니다.
[ html ]은 전과 동일합니다.
하지만 기억 안 나실지도 모르니 [ 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 |
[ css ]도 빠르게 올려드립니다.
[ css ]도 크게 변한 것을 없습니다.
한 가지를 추가했습니다.
border에 투명도를 주면 조금 이상해질 수 있어요.
그래서 많은 검색 끝에 찾아냈답니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:url(cat.jpg) no-repeat center center;
background-size:cover;
}
.box{
width:200px;
height:200px;
margin:40px auto;
background:linear-gradient( #6D5AFB 0%, #E9183F 100%);
text-align:center;
border-radius:10px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}
.box p{
line-height:200px;
color:#ffffff;
}
|
cs |
box-shadow를 활용하는 방법입니다.
먼저 border에 투명도를 줘서 어떻게 보이는지
확인해 볼게요. [ css ]는
border:1px solid rgba(255,255,255,0.3) 입니다.
느낌을 아실까요?
테두리가 뭔가 색이 덜 들어간 느낌이랄까 정리가 안되고
오히려 자글자글한 느낌이랄까.
테두리에 투명도를 주기가 애매한 부분이 있더라고요.
이번에는 box-shadow를 줘볼게요.
[ css ]는
box-shadow:0 0 0 1px rgba(255,255,255,0.3) inset 입니다.
여기서의 핵심은 inset입니다.
실행하면 이런 느낌입니다.
box- shadow는 기본적으로 외부에 그림자기 생깁니다.
공중에 떠 있는 듯한 느낌을 주죠.
그런데 inset키워드를 넣어주면 그림자가
안으로 생기게 됩니다.
움푹 들어간 느낌을 주게 되죠.
거기에 1px만 주게 되면 안으로 그림자가 생기는데
1px만큼 주게 돼요. 마치 border처럼요.
아까 border에 투명도를 준 것보다
훨씬 깔끔해졌죠?
그리고 왜인지는 모르겠지만 뭔가 보튼 같은 느낌도 듭니다.
튀어나온듯한 느낌도 들고요.
여러분들에게 눈곱만큼의 도움이라도
되었으면 좋겠습니다.
오늘도 건강하고 행복한 하루 보내세요.
'코딩 어린이의 노트' 카테고리의 다른 글
| jquery 반응형 resize만들기 (2) | 2023.02.18 |
|---|---|
| 클립보드를 이용한 내용 복사 (2) | 2023.02.17 |
| 원형 그라데이션 배경색을 만들어 보자 (0) | 2023.02.11 |
| 그라데이션 배경색 만들기 (0) | 2023.02.10 |
| 배경 이미지를 흐릿하게 만들어 보자 (0) | 2023.02.06 |