[CSS] Noise Effect

CSS Winner에서 한국인 지원자를 검색해보다가 SERIOUS를 알게 되었다.

http://www.csswinner.com/details/serious-study/10663

Interaction Study Lab인데 사이트가 무척 마음에 든다.

특히 인트로에 노이즈 효과가 시선을 확 당겼다.

See the Pen Pure css - Noise Effect by Hyejin Oh (@mmt-zinee) on CodePen.

clip과 content:attr()을 사용한 것이 주요 특징이라고 할 수 있다.

content는 가상선택자(:before/:after)를 사용할 때 content: ''으로 제일 많이 썼었는데 다양한 활용 방법이 있다는 걸 오늘 알았다.

참고

• https://css-tricks.com/clipping-masking-css/

• https://developer.mozilla.org/en-US/docs/Web/CSS/content

• https://developer.mozilla.org/ko/docs/Web/CSS/attr

▲ http://serious.or.kr/

▲ Muzli에 소개된 SERIOUS <출처. Serious 페이스북>