이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS 이미지나 폰트에 필터 적용하기
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 배경 색과 이미지 이 포스팅은 PC로 작성되었습니다. 모바일로 보시
gogogameboy.tistory.com
지난 포스트에서는 디자인과 밀접한 관련이 있는 필터 속성에 대해서 공부했습니다.
이번에 공부할 내용도 지난 포스트의 연장선 상에 있는 내용이라고 볼 수 있습니다.
background-blend-mode
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
background-blend-mode로 백그라운드의 컬러와 이미지를 섞을 수가 있습니다.
값에는 color, color-burn, color-dodge, darken, screen, difference, exclusion, hard-light, hue 등 다양하게 있습니다.
.blend:hover{
background-color:purple;
transition: background-color 0.3s;
}
위의 코드로 인해서 백드라운드 위에 마우스 커서를 올리면 0.3초에 걸쳐서 배경색이 퍼플로 변합니다.
다음 포스트
CSS 믹스 블렌드 모드
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 블렌드 모드 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 트랜스폼 (0) | 2021.01.11 |
|---|---|
| CSS 믹스 블렌드 모드 (0) | 2021.01.10 |
| CSS 이미지나 폰트에 필터 적용하기 (0) | 2021.01.09 |
| CSS 배경 색과 이미지 (0) | 2021.01.08 |
| CSS, float 속성을 이용해서 만드는 Holy Grail Layout (0) | 2021.01.08 |
댓글