안녕하세요 왕초보 코딩 탈출입니다. 이것저것 많이하긴했지만 시간이 없다는 핑계로 블로그에 올리지 못했네요 ㅠ
퍼블리셔는 아니지만 웹이 앱이건 디자인이 많이 발목을 잡아서 CSS를 공부하면서 올려볼까합니다.
배경이미지에 그라데이션을 주기위해서는 다음과 같이
linear-gradient() 함수를 사용해야합니다.
그라데이션에 대하여 아래 링크에서 더 많은 정보를 확인하세요
https://developer.mozilla.org/ko/docs/Web/CSS/linear-gradient
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color:#777;
}
.header {
height: 100vh;
background-image: linear-gradient(
to right bottom,
rgba(232, 232, 232, 0.3),
rgba(191, 191, 191, 0.3)),
url("../img/main.jpg");
background-size: cover;
background-position: top;
}
|
다음과 같이 linear-gradient() 를 사용하여 전체 배경 이미지에 그라데이션 효과를 주었습니다.
역시나 미적 감각은 없어서 ... 만들고 나니 이쁘진 않네요 ㅎㅎ
배경이미지를 좀더 이쁜걸로 바꿔봐야겠어요
번외로 이미지 모양을 조정하려면
https://bennettfeely.com/clippy/
Clippy — CSS clip-path maker
About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape
bennettfeely.com
소스확인
'웹 프론트엔드 > CSS-나의 홈페이지 만들기' 카테고리의 다른 글
| 3. 우측 상단 로고 넣기 화면 중앙에 텍스트 넣고 간단한 애니메이션 효과 (0) | 2020.04.02 |
|---|---|
| 2. CSS 폰트 설정 , 기본설정, 전체 배경 이미지 넣기 (0) | 2020.04.01 |
| 1. 프로젝트 개요 (0) | 2020.03.31 |