티스토리 뷰
normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity
Porperty | Description |
---|---|
normal | 배경색의 기본 값을 정의합니다. |
multiply | 더 어두운 색으로 변경됩니다. |
screen | 더 밝은 색으로 변경됩니다. |
overlay | 원래 색상의 농도와 밝기를 변경합니다. |
darken | 어두운 색으로 변경됩니다. |
lighten | 밝은 색으로 변경됩니다. |
color-dodge | 기본 색상을 밝게 합니다. |
saturation | 채도의 변화로 색상이 변경됩니다. |
color | 색을 통해 색상을 변경합니다. |
luminosity | 밝기를 통해 색상을 변경합니다. |
blend-mode
original
multiply
screen
darken
lighten
color-dodge
saturation
color
luminosity
.original {background: #ff25ed url(img/blend.jpg); min-height: 400px; background-size: cover;}
.original span {background : rgba(0,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;}
.original:hover {background-blend-mode: normal;}
Mix-blend-mode
original
multiply
screen
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) | 이미지의 블러 효과를 설정합니다. |
brightness(%) | 이미지의 밝고 어두움 정도를 설정합니다. |
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
.brihgtness1 {filter: brihgtness(10%);}
.brihgtness2 {filter: brihgtness(20%);}
.brihgtness3 {filter: brihgtness(30%);}
.brihgtness4 {filter: brihgtness(40%);}
.brihgtness5 {filter: brihgtness(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
.hue1 {filter: hue-rotate(10deg);}
.hue2 {filter: hue-rotate(30deg);}
.hue3 {filter: hue-rotate(60deg);}
.hue4 {filter: hue-rotate(90deg);}
.hue5 {filter: hue-rotate(120deg);}
filter : invert
.invert1 {filter: invert(10%);}
.invert2 {filter: invert(30%);}
.invert3 {filter: invert(60%);}
.invert4 {filter: invert(80%);}
.invert5 {filter: invert(100%);}
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%);}
filter : sepia
.sepia1 {filter: sepia(10%);}
.sepia2 {filter: sepia(30%);}
.sepia3 {filter: sepia(60%);}
.sepia4 {filter: sepia(90%);}
.sepia5 {filter: sepia(120%);}
Blend effect sample
See the Pen Blend Effect by sohinggu (@sohinggu) on CodePen.
댓글
© 2018 webstoryboy