본문 바로가기
Web design/HTML & CSS

mix-blend-mode : 요소를 겹치는 효과

by Skilly 2020. 5. 23.

 

 

 

이미지 등의 요소가 겹치는 경우 중첩된 상태를 표시하는 방법에 대해 알아보고자 한다.

 

포토샵에서 사용하는 블렌드 모드와 유사한데, 이 효과를 css에서도 사용할 수 있다. 

 

서로 다른 요소(ex.레이어)를 겹쳐서 색상에 대한 효과를 주고 싶을 때 믹스 블렌드 모드를 사용하면 좋겠다.

 

 

 

/* Keyword values */

mix-blend-mode: normal;

mix-blend-mode: multiply;

mix-blend-mode: screen;

mix-blend-mode: overlay;

mix-blend-mode: darken;

mix-blend-mode: lighten;

mix-blend-mode: color-dodge;

mix-blend-mode: color-burn;

mix-blend-mode: hard-light;

mix-blend-mode: soft-light;

mix-blend-mode: difference;

mix-blend-mode: exclusion;

mix-blend-mode: hue;

mix-blend-mode: saturation;

mix-blend-mode: color;

mix-blend-mode: luminosity;



/* Global values */

mix-blend-mode: initial;

mix-blend-mode: inherit;

mix-blend-mode: unset;

출처 Mozilla

 

 

 

 

mix-blend-mode의 사용 : 

 

 

HTML 코드 :

더보기

<body>

 <section class = "boxWrap1">

   <div class= "box1">
        <div class="inBox">
            <p>normal</p>
        </div>
    </div>

    <div class= "box2">
        <div class="inBox">
            <p>multiply</p>
        </div>
    </div>

    <div class= "box3">
        <div class="inBox">
            <p>screen</p>
        </div>
    </div>

    <div class= "box4">
       <div class="inBox">
            <p>overlay</p>
        </div>
    </div>

    <div class= "box5">
        <div class="inBox">
            <p>darken</p>
       </div>
    </div>      
 </section>

 <section class="boxWrap2">

    <div class= "box6">
     <div class="inBox">
            <p>lighten</p>
        </div>
    </div>

    <div class= "box7">
        <div class="inBox">
            <p>color-dodge</p>
        </div>
    </div>

    <div class= "box8">
        <div class="inBox">
            <p>color-burn</p>
        </div>
    </div>

    <div class= "box9">
        <div class="inBox">
            <p>hard-light</p>
        </div>
    </div>

    <div class= "box10">
        <div class="inBox">
            <p>soft-light</p>
        </div>
    </div>

    <div class= "box11">
        <div class="inBox">
            <p>difference</p>
        </div>
    </div>    
 </section>

</body>

 

CSS 코드 :

더보기

body {
    display: inline-block;
    width: 100%;
    background: url("2.jpg") no-repeat;
    display: flex;
}

p {
    text-align: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.boxWrap1{
    margin-left: 40px;
    flex-direction: column;
}

.boxWrap2{
    flex-direction: column;
}

.inBox {
    width: 150px;
    height: 100px;
    margin: 20px;
    position: relative;
    background-color: gray;
    border: 4px solid #000;
}

.box1 .inBox {
    --position: absolute;
    mix-blend-mode: normal;
    
}

.box2 .inBox {
    mix-blend-mode: multiply;
}

.box3 .inBox {
    mix-blend-mode: screen;
}

.box4 .inBox {
    mix-blend-mode: overlay;
}

.box5 .inBox {
    mix-blend-mode: darken;
}

.box6 .inBox {
    mix-blend-mode: lighten;
}

.box7 .inBox {
    mix-blend-mode: color-dodge;
}

.box8 .inBox {
    mix-blend-mode: color-burn;
}

.box9 .inBox {
    mix-blend-mode: hard-light;
}

.box10 .inBox {
    mix-blend-mode: soft-light;
}

.box11 .inBox {
    mix-blend-mode: difference;
}

 

 

 

 

Blend mode에 대한 자세한 설명 :

 

 

MDN web docs

 

mix-blend-mode

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

developer.mozilla.org

 

Adobe Photoshop

 

Blending modes in Adobe Photoshop

Adds the red, green and blue channel values of the blend color to the RGB values of the base color. If the resulting sum for a channel is 255 or greater, it receives a value of 255; if less than 255, a value of 0. Therefore, all blended pixels have red, gr

helpx.adobe.com

 

Wikipedia

 

Blend modes - Wikipedia

Blend modes (or mixing modes[1]) in digital image editing and computer graphics are used to determine how two layers are blended with each other. The default blend mode in most applications is simply to obscure the lower layer by covering it with whatever

en.wikipedia.org

 

 

 

 

반응형
저작자표시

'Web design > HTML & CSS' 카테고리의 다른 글

웹사이트에 웹폰트와 이모지 적용하기  (5) 2020.07.04
<input>의 유형  (0) 2020.06.10
자간, 행간, 어간 조절  (0) 2020.05.25
[크롬] 캐시 비활성화 설정 방법 & 캐시 비우는 방법  (0) 2020.05.06
CSS 선택자 규칙과 유형, 우선순위  (0) 2020.05.06

관련글

티스토리툴바