본문 바로가기

광고

Design

Reference

Tutorial

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

CSS

NEWS

SITE

Coding


광고

Code View/Font Effect

[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.
[Text] 살며시 움직이는 타이포그래픽 애니메이션 만들기 살며시 움직이는 타이포그래픽 애니메이션 만들기[미리보기] See the Pen RATTLETHESEBONES by ZCKVNS (@ZCKVNS) on CodePen.
[Text] 백그라운드에 모션을 줘서 움직임을 표현한 타이포입니다. 백그라운드에 움직임 키프레임을 만들어서움직임을 주는 타이포 모션입니다.[미리보기] See the Pen Cool title effect by Ricardo Soto (@flacu) 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 PICAD..
[Text] 마우스를 오버하면 정말 눈부십니다. 확인해보세요 미리보기 해보셨나요?정말 눈부십니다. 깜작 놀랐네요^^우선 키프레임을 만들어야 합니다.@-webkit-keyframes neon1 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177; }}요런식으로 만든다음..
[Text] 타이포에 여러가지 그림자 효과를 준 CSS3 텍스트 | 깔끔하고 괜찮죠^^그림자에 그림자효과에 그림자효과를 줘서만들어낸 CSS3 타이포효과입니다.살짝 웹스토리보이로 바꾸어 봤는데~ 괜찮네요^^[미리보기] See the Pen 257 by creme (@creme) on CodePen.
[Text] 윈도우 스타일과 비슷한 타이포 효과 CSS3입니다 윈도우 스타일과 비슷하네요^^ 그림자 효과가 멋있는 타이포 효과 입니다.그림자 효과는 노가다가 필요하네요~h1 { margin: 0; padding: .5em 1em; overflow: hidden; line-height: 1; text-transform: uppercase; font-size: 5em; font-weight: normal; letter-spacing: 0.3em; color: #14c882; text-shadow: 0px 0px #1e1824, 1px 1px #1e1824, 2px 2px #1e1824, 3px 3px #1e1824, 4px 4px #1e1824, 5px 5px #1e1824, 6px 6px #1e1824, 7px 7px #1e1824, 8px 8px #1e1824, 9..
[Text] CSS3의 transform: skew을 이용한 폰트 기울기 효과주기 간단하게 webstoryboy로 변경해봤습니다.정말 좋네요^^ 그림자도 신경써야 하는 섬세함까지 있습니다.transform: skew기능을 이용하면 되는데3D를 이용하기 때문에 transform-style:preserve-3d;를 설정해 주어야 합니다.#opened:hover span:after { -webkit-transform-style:preserve-3d; -webkit-transform: rotateY(75deg) translate3d(-10px,0,0); -webkit-transform-origin:0 100% ; -moz-transform-style:preserve-3d; -moz-transform: rotateY(75deg) translate3d(-10px,0,0); -moz-transfo..