CSS - filter ,blend,접두어 (브라우저별 사용)

2019. 3. 5. 09:08

filter 를 쓰기전에 이건 나온지 얼마안된 속성이라 CSS 속성 중에 접두어를 붙어야 되는 경우가 있습니다. 각 접두어의 의미를 알아 보겠습니다. 쓰는 방법은 속성 앞에 붙이면 됩니다.

l -webkit- : 구글 , 사파리 브라우저에 적용

l -moz- : 파이어폭스 브라우저에 적용

l -ms- :익스플로러에 적용 , 보통 생략합니다.

l -0- : 오페라 브라우저에 적용

◎ 브라우저별 css 접두어

▼ 내용아래 샘플은 그라데이션 속성을 브라우저별로 나눈것입니다.

접두사를 써야되는 대표적인 속성입니다. 참고로 webkit은 크롬과 사파리가 채용한 웹브라우저 엔진 이름입니다.

#grad1 {
    height: 200px;
     /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left, red , blue);
    /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(right, red, blue);
    /* For Firefox 3.6 to 15 */
    background: -moz-linear-gradient(right, red, blue);
    /* Standard */
    background: linear-gradient(to right, red , blue);
}

FILTER 속성

l grayscale : 회색화면으로변함 (자세한 내용은 아래 그림 참조)

◎ filter 예제

▼ Filter 기능은 위 그림과 같이 txt , img에 적용하여 위에 그림처럼 다양한 효과를 낼수있다. 마치 포토샾 디자인 , 또는 카메라 사진필터를 적용한것처럼 다양한 효과를 CSS 에서 적용할수있다.

또한 서로 다른 효과를 동시에 줄수도 있다.

        img{
            -webkit-filter: blur(2px);
            -o-filter: grayscale(100%);
            filter : brightness(30px) grayscale(100%);
        }

blend 속성 (blend : 합성,혼합)

l background-blend-mode : 배경화면들 끼리 섞여서 그림 표현

l mix-blend-mode : 블랜드를 주고싶은 엘리먼트와 그 엘리먼트의 배경과 합성하는것.

◎ background-blend-mode

▼ 서로 다른 배경화면끼리 섞어서 표현것을 말한다

    <style>
        .blend{
            background-color: rgba(255,0,0,0.5); /* 배경*/
            /* rgba(255,0,0,0.5) 색깔은 빨간색 0.5는 투명도를 뜻한다. 1은 : 불투명 0은 : 투명 */
            background-image:url('산.jpg'); /* 배경2 */
            background-blend-mode: darken; /* 다양한 방법으로 섞는다 */ 
           /* 배경 2개중 산 이미지와 50%의 투명도를가진 빨간색을 다양한 방법으로 섞어놧다*/
        }
    </style>

◎ mix-blend-mode

▼ 배경화면과 엘리먼트들을 섞는다. 아래사진의 x 랑 y 는 텍스트고 인물사진은 배경이다.

x 와 y 가 배경화면과 섞여서 이처럼 다양한 색감으로 표시가 된다.

<html>
<head>
    <style>
        body{
            background-image:url('사람.jpg'); /* 배경 */
        }
        .blend{
            color: red;
            mix-blend-mode: screen; /* 엘리먼트를 배경과 섞는다 */ 
        }
    </style>
</head>
<body>
    <div class="blend">
        X Y
    </div>
</body>
</html>

'디자인 > CSS' 카테고리의 다른 글

CSS - 카카오톡 클론 코딩 (프론트단만. BY nicollas) (0)	2019.03.05
CSS - Transition (0)	2019.03.05
CSS - Transform (1)	2019.03.05
CSS -background (0)	2019.03.05
CSS - FLOAT (0)	2019.03.05

아빠개발자의 노트

CSS - filter ,blend,접두어 (브라우저별 사용)

'디자인 > CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바