filter overview

다양한 필터효과
효과 함수 인자 예시
흐리게 blur (번짐길이) blur(2px)
밝기 brightness (밝기율%) brightness(40%)
대조 contrast (대조율%) contrast(200%)
그림자 drop-hadow (그림자거리x, y, 번짐크기, 색) drop-shadow(5px 5px 5px #444)
회색비 grayscale (회색조%) grayscale(50%)
색 회전 hue-rotate (회전각deg) hue-rotate(90deg)
반전 invert (반전율%) invert(100%)
투명도 opacity (투명률%) opacity(25%)
채도 saturate (채도%) saturate(30%)
갈색조 sepia (반영율%) sepia(60%)

box-shadow

그림자 효과
번호 이름 특징
1 기본 가장 기본적인 그림자
2 작은 그림자 그림자 크기, 번짐을 줄이고, 방향을 아래 방향 특성만 부여
3 후광효과 그림자 크기를 키우고, 은근한 색 사용. 방향은 없음
4 포스트잇 before로 객체를 추가 생성, 살짝 회전시켜서 좌하단만 노출, 실제로 포스트잇이 들리진 않고, 착시
5 음각 그림자에 inset 옵션
6 양각 실제로 음각(inset), border-radius를 적절히 조절
7 버튼 inset그림자 내림
8 떠있는 그림자 before로 객체 생성, 생성된 객체는 투명, 객체 그림자 생성 및 이동
9 invisible 객체는 투명, 그림자만 채색해서, 뭔가 있는 것 같은 효과

다중 그림자

shadowing은 여러번에 걸쳐서 수행할 수 있습니다.

test 1 
#test1 {
  background-color: #444;
  box-shadow: 5px 5px 15px 0px #f008, -5px -5px 10px #0ff8;
}

여러개의 shadow는 좀 더 자연스러운 연출을 가능하게 합니다. 아래 사이트에서 디테일한 shadowing을 코드를 자동작성 할 수 있습니다.

그림자 효과를 자동 생성해주는 툴 : https://shadows.brumm.af/

border

border를 이용한 디자인
순번 변경사항
1 가로0 세로0 상자를 그리고, border(테두리)의 크기를 100px으로 설정
2 왼쪽과 아랫쪽의 테두리 크기는 0으로 수정
3 오른쪽의 테두리는 투명으로 변경
4 filter: drop-shadow을 이용해 출력내용에 대한 그림자만 생성
5 4에서: border-radius: 100px 100px 0 0;
6 4에서: border-radius: 100px 0 0 0;
7 6에서: 본래 도형의 길이(width:70)를 늘림. 현재 도형은 하단 평평한 부분에 위치
8 7에서: 본래 도형의 높이(height:30)을 늘림
9 8에서: border-right를 삭제, 8과 9에서 차이나는 부분이 border-right
10 9에서: 우상단 모서리도 radius를 지정함.

둥근 모서리도 4방향을 각각 지정 할 수 있습니다.

이동, 회전

이동, 회전 함수
함수명 내용
translateX
translateY
translateZ		 X, Y, Z방향의 이동(Z는 동작하지 않는다)
rotateX
rotateY
rotateZ		 X, Y, Z방향의 회전
수평선(X축) 이동:
수직선(Y축) 이동:
뚫고 나오는 선(Z축) 이동:
Z-index로만 이동가능
수평선(X축) 회전:
수직선(Y축) 회전:
뚫고 나오는 선(Z축) 회전:

색상

그라데이션은 background 또는 background-image에 아래 함수를 이용해 적용할 색과 방향을 지정하면 됩니다.

linear-gradient(방향(각도), 색1, 색2, ... );
repeating-linear-gradient(방향(각도), 색1 길이, 색2길이, ... );