본문 바로가기

광고

Design

Reference

Tutorial

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

CSS

NEWS

SITE

Coding


광고

CSS3

[Design] 헤리포터를 귀엽게 만든 CSS 디자인입니다. 헤리포터를 귀엽게 만든 CSS 디자인입니다.[미리보기]소스를 보면 별거없네요~그냥 노가다입니다.^^열정만 있으면 만들 수 있습니다. See the Pen Harry Potter by Richard Vyslouzil (@remeritus) on CodePen.
[Animation] 여러개의 원형구조를 이용한 360도 모션 만들기 여러개의 원형구조를 이용해순차적으로 모션의 차이를 줘서 움직임을 모현한 애니메이션입니다..thing:nth-child(1) { width: 2.08333em; height: 2.08333em; -moz-box-shadow: inset 0 0 0 17px rgba(255, 166, 77, 0.8); -webkit-box-shadow: inset 0 0 0 17px rgba(255, 166, 77, 0.8); box-shadow: inset 0 0 0 17px rgba(255, 166, 77, 0.8); animation: spin 10s 0.2s infinite alternate;}.thing:nth-child(2) { width: 4.16667em; height: 4.16667em; -moz-box-sh..
[Hover] 정신없고 요란하게 움직이는 마우스 오버 효과입니다. 그냥 웃기네요^^ ㅋㅋㅋ정말 요란하게 움직이는 마우스 오버 효과입니다.^^이렇게 요란하게 움직임을 줄려면 노가다 필요합니다.@keyframes shake-base { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(-0.5px, 1.5px) rotate(0.5deg); } 4% { transform: translate(1.5px, -2.5px) rotate(-1.5deg); } 6% { transform: translate(1.5px, -0.5px) rotate(-1.5deg); } 8% { transform: translate(1.5px, -2.5px) rotate(0.5deg); } 10% { transform..
[Animaition] 다양한 기번으로 돌리면 이런 모양으로 나오네요^ 캡쳐 이미지로는 알 수 없지만미리보기를 통해 보세요~멋진 스핀 애니메이션입니다. keyframe은 다음과 같이 설정하면 됩니다.@keyframes spin 0% transform: rotate( 0deg ) scale(1) border-radius: 50% 50% transform: rotate(720deg) scale(.7) border-radius: 100% 100% transform: rotate( 1440deg ) scale(1) border-radius: 100% @keyframes spin-child1 0% transform: rotate( 0deg ) scale(1) 50% transform: rotate(700deg) scale(.7) 100% border-radius: 50% transf..
[Images] 이미지를 스티커처럼 만들어주는 Sticker.js & CSS3 CSS3를 이용한 스티커기능입니다.이미지를 스티커처럼 만들어줍니다.마우스 방향에 따라 접는 모양이 나타나네요^^[미리보기]MIT License
[Hover] 마우스 오버하면 펼쳐지는 메모지 CSS3 만들기 이 소스의 핵심은#Awesome:hover h4{ opacity: 0; transition: opacity 50ms linear 300ms;}#Awesome:hover .front .circle{ margin-top: -90px; background-color: #e2d439; background-position: 0 100px;}마우스 오버시 transition을 어떻게 주는가에 있겠죠^^생각보다 어렵지 않아서 소스보시면 도움이 될거예요~ See the Pen Pure CSS Peeling Sticky by patrickkunka (@patrickkunka) on CodePen.
[Design] radius를 이용해서 정말 귀여운 벌을 만들었네요 | canvas를 이용해 만든 벌인줄 알았는데~대부분을 radius를 통해 만든 귀여운 벌입니다.물론 tranform을 통해 방향과 위치를 설정했습니다.한번 따라하면서 만들고 싶네요~[미리보기] See the Pen Bee Mine by Jon Ambas (@jonshungry) on CodePen.
[Loading] 물결모양의 파도 같은 로딩 애니메이션 CSS3 처음보면 물결모양 같은 모양이 신기한데요~비밀은 간단합니다.@-webkit-keyframes move { 0% {left: 0;} 50% {left: 100%; -webkit-transform: rotate(450deg); width: 150px; height: 150px;} 75% {left: 100%; -webkit-transform: rotate(450deg); width: 150px; height: 150px;} 100 {right: 100%;}} 모양을 둥근 형태로 만들고 회전을 주면서반만 보여주면 이런 효과가 나네요^^[미리보기] See the Pen Loader css3 by Mathieu Richard (@MathieuRichard) on CodePen.