페이스북 새 디자인의 CSS에서 알게된 것들

- 안쪽 그림자 처리위해 Avatar에 SVG 사용
- Margin대신 스페이서 div
- 이미지에 CSS필터
- box-shadow 대신 그림자 이미지(2x14 px)
- 많은 CSS 변수 사용
- 멀티라인 줄수 제한을 위해 Line Clamp 사용
- :hover 대신 .hover-div 사용
- 주요색으로 동적인 그라디언트 배경생성
- 다중 박스 쉐도우

[sduck4]

요새 디자인쪽도 공부 많이 하시나봐요. GeekNews 디자인이 점점 개선되내요.
오늘은 폰트가 바뀐 것 같아요.

[xguru]

공부까지는 아니지만.. ㅎㅎ
웹폰트는 가능하면 안쓸려고 하다가 윈도우 환경에서 한글폰트가 넘 안이뻐서 끝내 굴복하고 Noto Sans 로 갈아탔습니다.

[xguru]

왜 이렇게 했을까 싶은 것도 있지만, 이것 저것 참고하기 좋네요.
Line Clamp 는 함 적용해봐야 할 듯.

[xguru]

이미지 처리를 위해서 특정 줄수만 보여야 할게 있었는데 Line Clamp 딱이네요. 맘에 듭니다.
그냥은 동작 안하고 overflow: hidden 이랑 붙어야 합니다.
display: -webkit-box;
-webkit-line-clamp: 3;
overflow: hidden;