Neumorphic
https://www.instagram.com/p/B4uXgLoABAh/
Instagram의 UI Bucket님: “Wow! This was great indeed Follow @uibucket for daily design feed . Post credits: @alexunderhess.design
좋아요 13.2천개, 댓글 316개 - Instagram의 UI Bucket(@uibucket)님: "Wow! This was great indeed Follow @uibucket for daily design feed . Post credits:…"
www.instagram.com
1) X30 Y30 투명도10% 가우시안블러80 #3754AA
2) X-30 Y-30 투명도 100% 가우시안블러80 #FFF
3) 배경색과 SHAPE 색은 #F1F3F6
4) Inner Shadow 20px(size/blur) X4 Y4 투명도50% #FFF
5) 선추가는 입맛에 따라... 그냥 단색보단 선에도 그라디언트오버레이 주는게 좋은듯
v퍼블리싱은 이렇게
box shadow를 두번주는것이 관건
box-shadow:30px 30px 80px rgba(55,84,170,0.1), -30px -30px 80px rgba(255,255,255,.8);
이건 아예 소스 생성해주는 사이트
'CSS&JS > 👀Study and Copy' 카테고리의 다른 글
| 호환성보기 무시하기 (IE=edge) (0) | 2020.10.08 |
|---|---|
| 웹 접근성 자가진단 (0) | 2020.09.25 |
| cloneNode(true)를 했을 때와 그냥 appendChild만 했을 때 차이 (0) | 2020.01.28 |
| insertAdjacentHTML 과 appendChild (0) | 2020.01.28 |
| $(this).index(); 를 vanilla JS로 대체하기 (indexOf) (0) | 2020.01.28 |