CSS: Blend-Effect 에 대해서 알아봅시다!

Blend-Effect

 

normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity

Porperty	Description
normal	배경색의 기본 값을 정의합니다.
multiply	더 어두운 색으로 변경됩니다.
screen	더 밝은 색으로 변경됩니다.
overlay	원래 색상의 농도와 밝기를 변경합니다.
darken	어두운 색으로 변경됩니다.
lighten	밝은 색으로 변경됩니다.
color-dodge	기본 색상을 밝게 합니다.
saturation	채도의 변화로 색상이 변경됩니다.
color	색을 통해 색상을 변경합니다.
luminosity	밝기를/ 통해 색상을 변경합니다.

original

multiply

screen

overlay

darken

lighten

color-dodge

saturation

color

luminosity

    .original.multiply {background-blend-mode: multiply;}     .original.screen {background-blend-mode: screen;}     .original.overlay {background-blend-mode: overlay;}     .original.darken {background-blend-mode: darken;}     .original.lighten {background-blend-mode: lighten;}     .original.color-dodge {background-blend-mode: color-dodge;}     .original.saturation {background-blend-mode: saturation;}     .original.color {background-blend-mode: color;}     .original.luminosity {background-blend-mode: luminosity;} 

mix-blend-mode

original

 

 

multiply

 

 

screen

 

 

overlay

 

 

darken

 

 

lighten

 

 

color-dodge

 

 

color-burn

 

 

hard-light

 

 

soft-light

 

 

difference

 

 

exclusion

 

 

hue

 

 

saturation

 

 

color

 

 

luminosity

 

 

filter

filter : none | blur() | brihgtness() | contrast | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

Porperty	Description
none	이미지의 아무런 효과를 주지 않습니다.
blur(px)	이미지의 블러 효과를 설정합니다.
brihgtness(%)	이미지의 밝고 어두움 정도를 설정합니다.
contrast(%)	이미지의 대비를 설정합니다.
drop-shadow()	이미지의 그림자를 설정합니다.
grayscale(%)	이미지의 그레이스케일을 설정합니다.
hue-ratate(deg)	이미지의 색조를 설정합니다.
invert(%)	이미지의 반전색상을 설정합니다.
opacity(%)	이미지의 투명도를 설정합니다.
saturate(%)	이미지의 채도를 설정합니다.
sepia(%)	이미지의 세피아 효과를 설정합니다.
url()	이미지의 경로를 설정합니다.

filter : blur

    .blur1 {filter: blur(1px);}     .blur2 {filter: blur(3px);}     .blur3 {filter: blur(5px);}     .blur4 {filter: blur(7px);}     .blur5 {filter: blur(10px);} 

filter : brightness

    .bright1 {filter: brightness(10%);}     .bright2 {filter: brightness(20%);}     .bright3 {filter: brightness(30%);}     .bright4 {filter: brightness(40%);}     .bright5 {filter: brightness(50%);} 

filter : contrast

    .contrast1 {filter: contrast(10%);}     .contrast2 {filter: contrast(30%);}     .contrast3 {filter: contrast(50%);}     .contrast4 {filter: contrast(70%);}     .contrast5 {filter: contrast(90%);} 

filter : grayscale

    .grayscale1 {filter: grayscale(100%);}     .grayscale2 {filter: grayscale(75%);}     .grayscale3 {filter: grayscale(50%);}     .grayscale4 {filter: grayscale(30%);}     .grayscale5 {filter: grayscale(10%);} 

filter : hue-rotate

    .hue1 {filter: hue-rotate(10deg);}     .hue2 {filter: hue-rotate(60deg);}     .hue3 {filter: hue-rotate(120deg);}     .hue4 {filter: hue-rotate(200deg);}     .hue5 {filter: hue-rotate(360deg);} 

filter : invert

    .invert1 {filter: invert(10%);}     .invert2 {filter: invert(25%);}     .invert3 {filter: invert(55%);}     .invert4 {filter: invert(75%);}     .invert5 {filter: invert(100%);} 

filter : opacity

    .opacity1 {filter: opacity(10%);}     .opacity2 {filter: opacity(25%);}     .opacity3 {filter: opacity(50%);}     .opacity4 {filter: opacity(75%);}     .opacity5 {filter: opacity(100%);} 

filter : saturate

    .saturate1 {filter: saturate(10%);}     .saturate2 {filter: saturate(50%);}     .saturate3 {filter: saturate(100%);}     .saturate4 {filter: saturate(200%);}     .saturate5 {filter: saturate(400%);} 

filter : sepia

    .sepia1 {filter: sepia(10%);}     .sepia2 {filter: sepia(30%);}     .sepia3 {filter: sepia(60%);}     .sepia4 {filter: sepia(90%);}ss     .sepia5 {filter: sepia(120%);}