반응형
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 페이스북>
반응형
'개발일지 > CSS' 카테고리의 다른 글
[CSS] 반응형 유튜브 플레이어 (responsive youtube player) (0) | 2016.11.21 |
---|---|
[CSS] Fancy progress bar (0) | 2016.10.31 |
[CSS] pure css - input range custom (1) | 2016.08.01 |
[CSS] 유튜브 Multiline Ellipsis 말줄임표 방법 (0) | 2016.07.24 |
[SCSS] html input type range style (0) | 2016.07.20 |