본문 바로가기

광고

Design

Reference

Tutorial

웹 표준 사이트 만들기
반응형 웹 사이트 만들기

CSS

NEWS

SITE

Coding


광고

Code View

[Text] 귀엽게 움직임을 주는 멋있는 타이포 그래픽 CSS 움직임이 귀여운 타이포 효과 CSS입니다.움직임의 핵심은 @keyframes float { 0%,100%{ transform:none; } 33%{ transform:translateY(-1px) rotate(-2deg); } 66%{ transform:translateY(1px) rotate(2deg); }}여기에 있네요^^ 얼릉 HTML5가 대중화되는 날이 왔으면 좋겠네요^^ [미리보기] See the Pen Happy Text by Bennett Feely (@bennettfeely) on CodePen.
[Design] 헤리포터를 귀엽게 만든 CSS 디자인입니다. 헤리포터를 귀엽게 만든 CSS 디자인입니다. [미리보기] 소스를 보면 별거없네요~그냥 노가다입니다.^^열정만 있으면 만들 수 있습니다. See the Pen Harry Potter by Richard Vyslouzil (@remeritus) on CodePen.
[Text] 살며시 움직이는 타이포그래픽 애니메이션 만들기 살며시 움직이는 타이포그래픽 애니메이션 만들기 [미리보기] See the Pen RATTLETHESEBONES by ZCKVNS (@ZCKVNS) on CodePen.
[Text] 백그라운드에 모션을 줘서 움직임을 표현한 타이포입니다. 백그라운드에 움직임 키프레임을 만들어서움직임을 주는 타이포 모션입니다. [미리보기] See the Pen Cool title effect by Ricardo Soto (@flacu) on CodePen.
[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..
[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..
[Hover] Transitions and 3D Transforms을 이용한 마우스 오버 효과 CSS3의 transition과 transform을 이용한 플립 박스 효과입니다.앞면과 뒤면의 핵심 기술은 요거네요^^.panel .front {height: inherit;position: absolute;top: 0;z-index: 900;text-align: center;-webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg);-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;-webkit-t..