반응형

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

+ Recent posts

티스토리툴바