1. box-shadow / background / filter

box-shadow

요소의 테두리를 감싸는 그림자 효과를 낼 수 있음.

 

box-shadow : x, y, blur, spread, color, initial / inset / inherit

 

- inset = 요소 안쪽에 그림자를 생성한다. 포지션값이 음수이면 right/bottom부터 시작한다.

 

box-shadow: inset 10px 10px 5px gold;

포지션값이 양수일때

box-shadow: inset -10px -10px 5px gold;

포지션값이 음수일때

- 멀티 shadow

box-shadow: 3px 3px red, -1em 0 .4em olive;

여러개의 box-shadow를 선언가능

 

Multi-background

하나의 선택자에 여러개의 background를 지정 할 수있다.

.multi-bg-example {
    width: 100%;
    height: 400px;
    background-image: 
    	url(https://mdn.mozillademos.org/files/11305/firefox.png), /* 로고 */
        url(https://mdn.mozillademos.org/files/11307/bubbles.png), /* 거품 */
        linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); /* 그라데이션 */
    background-repeat: no-repeat,
        no-repeat,
        no-repeat;
    background-position: bottom right,
        left,
        right;
}

Multi-background로 3가지 배경을 적용한 모습

위와같이 background-image에 여러개의 bg를 지정해주면 코드순서대로 위에서부터 배경이 깔린다. (마지막 배경이 제일 아래 깔림)

 

background-blend-mode

두개이상의 background를 레이어처럼 혼합

div {
  width: 250px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
  background-color: green;
}

.multiply {
  background-blend-mode: multiply;
}

초록색 배경과 사진을 혼합 (오른쪽)

 

mix-blend-mode

article div:first-child {
  position: absolute;
  top: 10px;
  left: 0;
  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
  background-color: green;
}

article div:last-child {
  background-color: purple;
  position: absolute;
  bottom: -10px;
  right: 0;
  z-index: -1;
}

.multiply-mix {
  mix-blend-mode: multiply;
}

두개의 레이어와 이미지를 혼합

 

filter

요소에 그래픽 효과를 적용한다.

div{
	filter: blur(5px);
    filter: brightness(0.5);
    filter: contrast(200%);
    filter: grayscale(80%);
    filter: hue-rotate(90deg);
    filter: drop-shadow(16px 16px 20px red);
    filter: invert(100%);
    filter: opacity(50%);
    filter: sepia(60%);
    
    filter : contrast(150%) brightness(3%); /* 다중 선언 */
    
}

위는 포토샵의 필터와 동일한 기능이다. 

https://developer.mozilla.org/ko/docs/Web/CSS/filter