이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS 배경 색과 이미지
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, float 속성을 이용해서 만드는 Holy Grail Layout 이 포스팅은 PC로 작성
gogogameboy.tistory.com
최근 공부하고 있는 생활코딩의 CSS 강의를 보면, 점점 디자인을 중요시하는 웹페이지를 만드는 데에 있어서 필요한 CSS 속성들을 많이 배우고 있는 느낌입니다.
특히 지금부터 배울 내용은 정말 감각적인 홈페이지를 만들 때에 쓸만한 CSS 속성입니다.
CSS filter
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
img{ transition: all 1s; } 라는 소스 코드에 의해서 이미지에 마우스를 올려두면 1초에 걸쳐서 천천히 필터 효과가 나타나게 됩니다.
그리고 이미지에 마우스 커서를 올리면 어떤 필터 효과가 나타나게 할지는 img:hover{ } 선택자 안에 써놓으시면 됩니다.
그리고 필터 효과는 아직 모든 브라우저에서 지원을 하지는 않기 때문에 선택자 안에 -webkit-filter와 -o-filter를 넣어야 한다고 합니다. 2016년의 강의 영상이라 지금도 그런지는 정확히는 모르겠네요.
Can I use... Support tables for HTML5, CSS3, etc
CSS Filter Effects Method of applying filter effects using the `filter` property to elements, matching filters available in SVG. Filter functions include blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sepia and saturate.
caniuse.com
현재 필터를 사용할 수 있는 브라우저의 현황은 위의 링크를 통해서 확인하실 수 있습니다.
The Holly Fairy
위의 소스 코드에서 hover 기능을 제외하고 위와 같은 효과가 생겼습니다.
(위의 이미지에 hover까지 적용하려면 블로그의 CSS를 변경해야해서 여기까지만 했습니다.)
CSS Filter Playground
This comprehensive playground covers CSS filters in full detail with functions like sepia() and blur().
css-playground.com
filter | CSS-Tricks
CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter
css-tricks.com
CSS의 filter로 줄 수 있는 효과들은 위의 링크들을 통해서 확인하실 수 있습니다.
다음 포스트
CSS 블렌드 모드
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 이미지나 폰트에 필터 적용하기 이 포스팅은 PC로 작성되었습니다.
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 믹스 블렌드 모드 (0) | 2021.01.10 |
|---|---|
| CSS 블렌드 모드 (0) | 2021.01.10 |
| CSS 배경 색과 이미지 (0) | 2021.01.08 |
| CSS, float 속성을 이용해서 만드는 Holy Grail Layout (0) | 2021.01.08 |
| CSS, float (0) | 2021.01.07 |
댓글