Blend Efect

Background-blend-mode

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
.img1 > div {width: 50%; float: left; transition: all 0.3s ease;}
.img1 > div img {display: block; width: 100%;}
.original {background:  #a18cd1 url(img/blend1.jpg); min-height: 400px;
    background-size: cover;}
.original span {background: rgba(0,0,0,.8); color: #fff; 
display: inline-block; margin: 10px;  padding: 5px 10px; border-radius: 5px; 
}
.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
.m-multiply > div {mix-blend-mode :multiply;  }
.m-screen > div {mix-blend-mode :screen;  }
.m-overlay > div {mix-blend-mode :overlay;  }
.m-darken > div {mix-blend-mode :darken;  }
.m-lighten > div {mix-blend-mode :lighten;  }
.m-color-dodge > div {mix-blend-mode :color-dodge;  }
.m-color-burn > div {mix-blend-mode :color-burn;  }
.m-hard-light > div {mix-blend-mode :hard-light;  }
.m-soft-light > div {mix-blend-mode :soft-light;  }
.m-difference > div {mix-blend-mode :difference;  }
.m-exclusion > div {mix-blend-mode :exclusion;  }
.m-hue > div {mix-blend-mode :hue;  }
.m-saturation > div {mix-blend-mode :saturation;  }
.m-color > div {mix-blend-mode :color;  }
.m-luminosity > div {mix-blend-mode :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

.img > div {width: 20%; float: left; transition: all 0.3s ease;}
.img > div img { width: 100%; }
.img > div:hover { filter: none; }
.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(20%);}
.contrast3 {filter: contrast(30%);}
.contrast4 {filter: contrast(40%);}
.contrast5 {filter: contrast(50%);}

Filter : grayscale

.grayscale1 {filter: grayscale(100%);}
.grayscale2 {filter: grayscale(80%);}
.grayscale3 {filter: grayscale(60%);}
.grayscale4 {filter: grayscale(40%);}
.grayscale5 {filter: grayscale(20%);}

Filter : hue-rotate

.hue-rotate1 {filter: hue-rotate(10deg);}
.hue-rotate2 {filter: hue-rotate(30deg);}
.hue-rotate3 {filter: hue-rotate(60deg);}
.hue-rotate4 {filter: hue-rotate(90deg);}
.hue-rotate5 {filter: hue-rotate(120deg);}

Filter : invert

.invert1 {filter: invert(100%);}
.invert2 {filter: invert(80%);}
.invert3 {filter: invert(60%);}
.invert4 {filter: invert(40%);}
.invert5 {filter: invert(20%);}

Filter : opacity

.opacity1 {filter: opacity(10%);}
.opacity2 {filter: opacity(30%);}
.opacity3 {filter: opacity(60%);}
.opacity4 {filter: opacity(80%);}
.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%);}
.saturate6 {filter: saturate(10%);}
.saturate7 {filter: saturate(30%);}
.saturate8 {filter: saturate(60%);}
.saturate9 {filter: saturate(80%);}
.saturate10 {filter: saturate(100%);}

Filter : sepia

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