• 회원가입
  • 로그인
  • 구글아이디로 로그인
웹디자인언어 CSSLv 1 : 손님

[image] CSS - filter 속성 - 이미지필터효과 (= filter속성 = 필터속성) ※ 흑백이미지만들기 ※ 이미지에 그림자효과 주기

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 25,807  
목차
  1. filter 예제 - 흑백효과
  2. filter 정의
  3. filter 구문
  4. filter 예제 - blur() 이미지 흐림
  5. filter 예제 - blur() 배경이미지 흐림
  6. filter 예제 - brightness() 밝기효과
  7. filter 예제 - contrast() 대비효과
  8. filter 예제 - drop-shadow() 그림자효과
  9. filter 예제 - grayscale() 흑백효과
  10. filter 예제 - hue-rotate() 색조회전효과
  11. filter 예제 - invert() 색반전효과
  12. filter 예제 - opacity() 불투명도효과
  13. filter 예제 - saturate() 채도효과
  14. filter 예제 - sepia() 따뜻한흑백효과
  15. filter 예제 - 여러 효과 동시 적용
  16. filter 예제 - 각 효과 차이

 

filter 예제 - 흑백효과 

 

<style>

img {filter: grayscale(100%);}

</style>


<img src="https://source.unsplash.com/random" alt="random" width="300" height="300"> 

 

결과보기 

 

filter 정의

 

요소 (보통 <img>)에 대한 시각 효과 (예: 흐림/채도 등) 정의. 

 

 

1.

  • 기본값: none
  • 상속여부: X
  • 애니효과: O
  • CSS버전: CSS3
  • JS구문 : object .style.filter = "grayscale (100 %)";

 

2.

IE13 이상 주요 최신 브라우저 지원.

※ 일부 구형 브라우저:  -webkit- 접두어 필요.

 

[참고] 

  • 이전 버전의 IEr (4.0-8.0)는 더 이상 사용되지 않는 비표준 "filter"속성 지원했음.
  • 이것은 IE8 이하의 지원이 필요할 때 opacity (불투명도)에 주로 사용되었음.

 

 

 

filter 구문

 

selector {filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit ; }

 

[속성값]

 

none

효과 지정 안 함. (기본값)

 

blur (px)
이미지에 흐림 효과 적용.

  • 값이 클수록 더 흐려짐. 값 지정 안 하면 0 사용.

 

brightness(%)

이미지의 밝기 조정.

  • 0 % : 이미지를 완전히 검정색으로 만듦.
  • 100 % (1) : 원본 이미지. (기본값)
  • 100 % 초과 : 더 밝은 이미지.

 

contrast(%)

이미지의 대비 조정.

  • 0 % : 이미지를 완전히 검정색으로 만듦.
  • 100 % (1) : 원본 이미지. (기본값)
  • 100 % 초과 : 대비를 더 높여 결과를 제공.

 

drop-shadow (h-shadow v-shadow blur spread color)

이미지에 그림자 효과 적용.

  • h-shadow - 필수. 가로 그림자의 픽셀값 (첫번째값). / 음수값은 그림자를 이미지 왼쪽에 배치.
  • v-shadow - 필수. 수직 그림자의 픽셀값 (두번째값). / 음수 값은 그림자를 이미지 위쪽에 배치.
  • blur - 선택. 흐림정도 픽셀값 (세번째값). / 지정값이 클수록 더 흐려짐. (그림자가 커지고 밝아짐). / 음수값 비허용. / 값을 지정하지 않으면 0 사용. (그림자의 가장자리가 뾰족).
  • spread - 선택. 번짐정도 픽셀값 (네번째값). / 양수값은 그림자가 확장되고 커지게하고 음수 값은 그림자가 축소. / 지정 안 하면 0 됨. (즉, 그림자 크기는 요소와 동일). / 참고 : Chrome, Safari, Opera, 기타 브라우저는이 네 번째값 지원 안 함. 추가하면 렌더링 안 됨.
  • color - 선택. 그림자 색상. 지정 안 하면 색상이 브라우저에 따라 다름. (종종 검은 색). / [예제] blur효과가 10px인 가로・세로 8px 빨간색 그림자  filter: drop-shadow (8px 8px 10px red);  / 팁 :이 필터는 box-shadow 속성과 유사.

 

grayscale(%)

이미지를 회색조로 변환. (흑백이미지 만듦.)

  • 0% (0): 원본이미지. (기본값)
  • 100% : 완전 회색이미지. (흑백이미지에 사용).
  • 참고 : 음수값 비허용.

 

hue-rotate(deg)

이미지에 색조 회전 적용.

  • 이 값은 이미지 샘플이 조정될 색상 원 주위의 각도 수를 정의. 
  • 0deg : 원본이미지. (기본값)
  • 참고 : 최대값은 360deg.

 

invert (%)

이미지의 샘플을 반전시킴.

  • 0 % (0) : 원본이미지. (기본값)
  • 100 % : 이미지를 완전히 반전시킴.
  • 참고 : 음수값 비허용.

 

opacity(%)

이미지의 불투명도 수준. 

  • 0 % : 완전 투명.
  • 100 % (1) : 완전 불투명 (=원본 이미지). (기본값)
  • 참고 : 음수값 비허용.
  • 팁 :이 필터는 opacity 속성과 유사.

 

saturate(%)

이미지 포화.

  • 0 % (0) : 이미지의 채도를 완전히 불포화.
  • 100 % : 원본 이미지. (기본값)
  • 100 % 넘는 값은 과포화 결과 제공.
  • 참고 : 음수값 비허용.

 

sepia (%)

이미지를 세피아로 변환.

  • 0 % (0) : 원본 이미지. (기본값)
  • 100 % : 이미지를 완전히 세피아로 만듦.
  • 참고 : 음수값 비허용.

 

url ()

SVG 필터를 지정하는 XML 파일의 위치를 취하며, 특정 필터 요소에 대한 앵커를 포함 가능.

  • filter: url (svg-url # element-id)

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소의 속성값 상속.

 

 

filter 예제 - blur() 이미지 흐림

 

<style>

img {filter: blur(5px);}

</style>


<img src="https://source.unsplash.com/random" alt="random" width="300" height="300"> 

 

결과보기 

 

filter 예제 - blur() 배경이미지 흐림

 

<style>

img.bg {

  width: 100%;

  height: 100%;

  position: absolute;

  left: 0px;

  top: 0px;

  z-index: -1;

  filter: blur(35px);

}


img.hz {

  border-radius: 50%;

  display: block;

  margin: 0 auto;

  height: auto;

  max-width: 60%;

}

</style>


<img src="https://source.unsplash.com/random" alt="random" width="300" height="300" class="bg">

<img src="https://source.unsplash.com/random" alt="random" width="300" height="300" class="hz"> 

 

결과보기 

 

filter 예제 - brightness() 밝기효과

 

<style>

img {filter: brightness(200%);}

</style>


<img src="https://source.unsplash.com/random" alt="random" width="300" height="300"> 

 

결과보기

 

filter 예제 - contrast() 대비효과

 

<style>

img {filter: contrast(200%);}

</style>


<img src="https://source.unsplash.com/random" alt="random" width="300" height="300"> 

 

결과보기 

 

filter 예제 - drop-shadow() 그림자효과

 

<style>

img {filter: drop-shadow(8px 8px 10px gray);}

</style>


<img src="https://source.unsplash.com/random" alt="random" width="300" height="300"> 

 

결과보기 

cf. box-shadow 속성 - 요소 주위에 그림자효과(음영효과) 주기

 

filter 예제 - grayscale() 흑백효과

 

<style>

img {filter: grayscale(50%);}

</style>


<img src="https://source.unsplash.com/random" alt="random" width="300" height="300"> 

 

결과보기 

 

filter 예제 - hue-rotate() 색조회전효과

 

<style>

img {filter: hue-rotate(90deg);}

</style>


<img src="https://source.unsplash.com/random" alt="random" width="300" height="300"> 

 

결과보기 

 

filter 예제 - invert() 색반전효과

 

<style>

img {filter: invert(100%);}

</style>


<img src="https://source.unsplash.com/random" alt="random" width="300" height="300"> 

 

결과보기 

 

filter 예제 - opacity() 불투명도효과

 

<style>

img {filter: opacity(30%);}

</style>


<img src="https://source.unsplash.com/random" alt="random" width="300" height="300"> 

 

결과보기 

 

filter 예제 - saturate() 채도효과

 

<style>

img {filter: saturate(800%);}

</style>


<img src="https://source.unsplash.com/random" alt="random" width="300" height="300"> 

 

결과보기 

 

filter 예제 - sepia() 따뜻한흑백효과

 

<style>

img {filter: sepia(100%);}

</style>


<img src="https://source.unsplash.com/random" alt="random" width="300" height="300"> 

 

결과보기 

 

filter 예제 - 여러 효과 동시 적용

 

<style>

img {filter: contrast(200%) brightness(150%);}

</style>


<img src="https://source.unsplash.com/random" alt="random" width="300" height="300"> 

 

결과보기 

 

filter 예제 - 각 효과 차이

 

<style>

img {

  width: 33%;

  height: auto;

  float: left;

  width:300px;

  height:auto;

}

.blur {filter: blur(4px);}

.brightness {filter: brightness(0.30);}

.contrast {filter: contrast(180%);}

.grayscale {filter: grayscale(100%);}

.huerotate {filter: hue-rotate(180deg);}

.invert {filter: invert(100%);}

.opacity {filter: opacity(50%);}

.saturate {filter: saturate(7);}

.sepia {filter: sepia(100%);}

.shadow {filter: drop-shadow(8px 8px 10px green);}

</style>


<img src="https://images.unsplash.com/photo-1544065911-6fa67cf58978" alt="girl">

<img class="blur" src="https://images.unsplash.com/photo-1544065911-6fa67cf58978" alt="girl">

<img class="brightness" src="https://images.unsplash.com/photo-1544065911-6fa67cf58978" alt="girl">

<img class="contrast" src="https://images.unsplash.com/photo-1544065911-6fa67cf58978" alt="girl">

<img class="grayscale" src="https://images.unsplash.com/photo-1544065911-6fa67cf58978" alt="girl">

<img class="huerotate" src="https://images.unsplash.com/photo-1544065911-6fa67cf58978" alt="girl">

<img class="invert" src="https://images.unsplash.com/photo-1544065911-6fa67cf58978" alt="girl">

<img class="opacity" src="https://images.unsplash.com/photo-1544065911-6fa67cf58978" alt="girl">

<img class="saturate" src="https://images.unsplash.com/photo-1544065911-6fa67cf58978" alt="girl">

<img class="sepia" src="https://images.unsplash.com/photo-1544065911-6fa67cf58978" alt="girl">

<img class="shadow" src="https://images.unsplash.com/photo-1544065911-6fa67cf58978" alt="girl"> 

 

결과보기 
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

CSS 관련글

코딩동강 관련글

HTML 관련글

JavaScript 관련글

JQuery 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글

Bootstrap 4 관련글
분류 제목
text CSS - writing-mode 속성 - 텍스트 방향 가로/세로 제어. (= 글쓰기 방향 = 쓰기 모드 제…
css CSS - pointer-events 속성 - 마우스이벤트에 대한 반응 여부 (= pointer-events…
css CSS - hanging-punctuation 속성 - 문장부호 위치 지정 (= hanging-punctua…
css CSS - 자식요소 앞에 순번 붙이기 (= 번호 매기기 = 색인번호 추가 = 요소 카운팅)
selector CSS - :indeterminate 선택자 - 불확정요소 선택 (= :indeterminate선택자 = 인…
css CSS - 구글 로그인 포커스 애니 효과 (Google Logn Foucs Animation Effect) …
selector CSS - :placeholder-shown 선택자 - 플레이스홀더 텍스트 표시 중인 요소 선택 (= :pl…
css CSS - 이미지 세로 나열 (= 수직 정렬) 방법/경우/원인/이유
selector CSS - ::-webkit-scrollbar - 스크롤바 선택자 (= 스크롤바 모양 디자인 커스텀 = Cu…
box CSS - block-size 속성 - 블락 방향으로 요소 크기 지정 (= block-size속성 = 블락…
box CSS - inline-size 속성 - 인라인방향으로 요소 크기 지정 (= inline-size속성 = 인…
text CSS - overflow-wrap 속성 - 줄바꿈 위해 단어 쪼개기 (= overflow-wrap속성 = …
background CSS - Multi Background 구문 - 한번에 여러 배경 속성값 사용
selector CSS - ::placeholder 선택자 - 플레이스홀더 선택자
css CSS - 인스타그램(instagram) 배경색 효과
css CSS - currentcolor 키워드 - 현재 글자색 속성값을 그대로 사용 (= 커런트컬러 속성값)
image CSS - object-fit 속성 - 컨테이너에 맞게 '이미지/비디오' 크기 조정 방법 지정 (= obje…
image CSS - object-position 속성 - <img>/<video>가 "자체 콘텐츠 상자" 내부의 x/…
css CSS - 코드펜 스타트 코딩 버튼 테두리 효과 (Codepen Start Coding Button Bord…
css CSS - translate 속성 - 2D/3D 상 요소 위치 좌표 변경 지정 (= translate속성 =…
16/25
목록
오늘: 17,595 | 어제: 22,354 | 최대: 31,885 | 전체: 8,487,586
  • 채팅방
  • 필독
1. 채팅창 헤드에서 접속자 확인 2. 닉네임 클릭해 1:1 채팅 가능 3. 닉네임 클릭해 귓속말 가능 4. 닉네임 클릭해 호출하기 가능 5. 우하단 클릭해 환경 설정 가능 6. 의뢰글 작성 후 의뢰 상담 가능 7. 질문글 작성 후 질문 상담 가능 8. 채팅방에 개인정보 입력 금지 9. 채팅방에 광고 욕설 비방 금지
  • (견적/의뢰/질문/등업) 상담은 게시판 이용해 주세요.
  • 인터넷 임시파일 제거 시 속도 ↑ (Ctrl + Shift + Del)

공지사항

최신글

최신댓글

사이트명:홈짱닷컴, 연락처:
Copyright ⓒ https://homzzang.com. All rights reserved.
찾아주셔서 감사합니다. Since 2012