[ CSS3 ] gradient / filter

 

filter	이미지 필터 효과	mdn
gradient	그라디언트	mdn
object-fit	<img>나 <video> 요소 크기	mdn
mix-blend-mode		mdn

 

# gradient

mdn바로가기

선형 그라디언트
linear gradient : direction
background: linear-gradient(진행방향, 색상지정점 1, 색상지정점 2,...)
background: linear-gradient(방향, 시작색상, 종료색상)
value: to top , to left , to right , to bottom, to right bottom
backtgorund: linear-gradient(to right bottom, pink, yellow )
linear gradient : angle
background: linear-gradient(방향각도, 시작색상, 종료색상)
value: 45 deg
backtgorund: linear-gradient(45 deg, pink, yellow )
linear gradient : color-stop
backtgorund: linear-gradient(to bottom, blue , pink 50%, yellow )
radial-gradient(모양 크기 at 위치, 시작색,..., 종료색)

 

모양 : ellipse (기본값) / circle
크기 : 그레이디언트 크기. (※ 가능한 값 종류)

closest-side (가장 가까운 사이드)
farthest-side (가장 먼 사이드)
closest-corner (가장 가까운 코너)
farthest-corner (가장 먼 코너) - 기본값

위치 : 그레이디언트 중심 위치 (※ 가능값 종류)

center :중앙. (기본값)
at X% Y% :

※ X는 왼쪽부터 시작
※ Y는 상단부터 시작


원형 모양
radial-gradient(circle, red, yellow, green);

가장 가까운 사이드
radial-gradient(closest-side at 60% 55%, blue, green, yellow, pink);

가장 먼 사이드
radial-gradient(farthest-side at 60% 55%, blue, green, yellow, pink);

가장 가까운 코너
radial-gradient(closest-corner at 60% 55%,blue,green,yellow,pink);

가장 먼 코너 (기본값)
radial-gradient(farthest-corner at 60% 55%,blue,green,yellow,pink);

반복
repeating-radial-gradient(red, yellow 10%, green 15%);

사이트1

사이트2

사이트3

사이트4

사이트5

 

# filter

mdn바로가기

 

none :기본값

 

blur(px) 이미지에 흐림 효과를 적용

값이 클수록 흐림이 더 많이 생성, 값을 작성하지 않으면 0으로 지정

 

brightness(%) 이미지 밝기를 조정

0%는 완전히 검게 처리, 100%는 기본값, 100%보다 크면 밝게 제공

 

contrast(%) 이미지의 대비를 조정

0%는 완전히 검게 처리, 100%는 기본값, 100% 보드 크면 더 많은 대비를 처리

 

drop-shadow(x y blur 색상) 이미지에 그림자 효과를 지정

x, y는 그림자의 위치를 지정, blur는 흐림 정도, 색상은 그림자색상처리

 

graysclae(%) 이미지를 회색조로 변환

0%가 기본값, 100%는 이미지를 완전 회색 처리, 음수는 없음

hue-rotate(deg) 이미지에 색조 회전을 적용

0 deg ~ 360 deg

 

invert(%) 이미지를 색상 반전

0%는 기본값원본, 100%는 이미지를 정말히 반전

 

opacity(%) 이미지의 투명도를 지정

0%~100%, 100%가 기본값

 

saturate(%) 이미지 채도 지정

0%는 이미지의 채도를 완전 없앰, 100%가 기본에 원본, 100%를 초과하면 채도높임

 

sepia(%) 이미지를 세피아톤으로 변환

0%~100%, 0%가 기본에 원본