본문 바로가기

CSS Reference +

Design Reference +

Design Mockup +

Design UI Kits +

NEWS

SITE


광고

[Text] 백그라운드에 모션을 줘서 움직임을 표현한 타이포입니다. 백그라운드에 움직임 키프레임을 만들어서움직임을 주는 타이포 모션입니다. [미리보기] See the Pen Cool title effect by Ricardo Soto (@flacu) on CodePen.
[Scroll] 스크롤을 통한 다양한 효과를 내는 제이쿼리 skrollr.js 스크롤을 통한 애니메이션을 보는 듯한 느낌의사이트들은 이런 소스를 사용하네요^^데모와 실제로 만들어진 사이트를 보면이 제이쿼리 소스가 좋은 걸 알 수 있을 거예요^^ [미리보기][다운받기] 이 제이쿼리 소스보다 더 멋진건이 스크롤 제이쿼리 소스를 통해 만들어진 사이트입니다. http://www.fontwalk.de/http://www.kia.co.uk/http://www.cabletv.com/the-walking-dead
[Scroll] 스크롤을 하면 수평으로 움직이는 패러럴즈 사이트 제이쿼리 스크롤을 하면 수평으로 움직이는 패러럴즈 사이트 제이쿼리입니다.요런 사이트가 요즘에 많죠^^이 패럴러즈 제이쿼리를 이용하면 쉽게 만들수 있겠네요^^ [미리보기][다운받기] MIT Lincese
[Scroll] 스크롤에 따른 여러가지 모션을 주는 제이쿼리 어도비 뮤즈에서의 스크롤 효과를제이쿼리를 통해 구현할 수 있는 제이쿼리 소스입니다. [다운받기]
[Design] CSS3를 통해 간단하게 만들수 있는 카메라 아이콘 심플하고 간단한 카메라 앱 디자인입니다.연습삼아 만들기 좋은 소스입니다. .camera-body { position: relative; height: 11em; width: 11em; background: #EEF7FD; margin: auto; border-top-left-radius: 12%; border-top-right-radius: 12%; border-bottom-left-radius: 12%; border-bottom-right-radius: 12%; box-shadow: 0 0.55em 0.78571em rgba(0, 0, 0, 0.2);}.camera-body:before, .camera-body:after { content: ''; position: absolute;}.camera-bo..
[Color] 컬러색을 쉽게 뽑을 수 있는 Color Picker 제이쿼리 요런 도구를 제이쿼리 플러그인을 통해서 쉽게 쓸 수가 있군요^^관심있는 분들은 확인해보세요~ [다운받기] MIT and GPL licenses.
[Background] 영화 Gravity를 주제로한 포스터 애니 배경 CSS 디자인 작업을 하지 않고이렇게 CSS로 만들었습니다.대단히 잘 만들었네요^^ 소스를 보시면 알겠지만 배경의 별들은 다 그림자 효과를 통해 만들었습니다.소스만 봐도 정성이 보이네요^^ [미리보기] See the Pen Gravity Animated Poster by saransh (@saransh) on CodePen.
[Text] CSS3를 이용한 서커스 느낌의 타이포 디자인 텍스트 요걸 CSS로 어떻게 할까요?특히 가운데 부분을 어떻게 할지 궁금하네요^^그림자를 안쪽으로 주면 되는군요^^ .picadilly { position: relative; font-family: "Source Sans Pro"; color: #fff; font-weight: 100 !important; font-size: 150px; -webkit-text-stroke: 7px #FD3A58; letter-spacing: 15px; -webkit-filter: drop-shadow(9px 11px 0 #98B5CC); width: 1000px; text-align: center; line-height: 1.2; margin: 4rem auto; z-index: 2;} [미리보기] See the Pen PIC..