CSS3 썸네일형 리스트형 [plugin] animate.css 와 더불어 편리하게 사용가능한 wow.js animate.css 와 함께 스크롤 애니메이션을 줄 수 있고, 지연시간을 두고 멋진 애니메이션 효과를 낼 수 있도록 도와주는 wow.js를 소개합니다~ 인터렉티브한 사이트나 모바일에서 간편하게 구현 가능하기 때문에 적절히 활용하면 좋을 것 같습니다. 사이트 주소: http://mynameismatthieu.com/WOW/index.html 더보기 CSS3 애니메이션을 편하게 적용할 수 있도록 도와주는 Animate.css CSS3 애니메이션 모듈화 파일을 제공해 주는 사이트입니다. 애니메이션 적용을 위해 매번 css파일을 복잡하게 건들지 않고 클래스만 삽입시켜 간단하게 애니메이션 효과를 볼 수 있다는 장점이 있겠습니다. http://daneden.github.io/animate.css/ 더보기 ie9 이하에서 css3 transition 사용하기 css3 transition은 ie10이상의 환경에서만 구동되도록 되어있습니다. ie9이하에서 사용할 수 없을까 하는 생각으로 검색해보니 역시나 jquery 를 활용한 방법이 있었네요~ 사이트 주소는 아래와 같습니다. http://louisremi.github.io/jquery.transition.js/test/index.html http://playground.benbarnett.net/jquery-animate-enhanced/ 더보기 background 에서 이미지를 두개 이상 사용할 때 css를 이용하여 백그라운드에 이미지를 두개 이상 구현해야 할 경우가 있습니다. 아래의 이미지처럼 풀과 하늘이 있는 전경 이미지와 양 이미지를 넣고자 한다면요~ http://caniuse.com/#feat=multibackgrounds 하지만 ie8이하에서는 보이질 않습니다... ie9부터 지원을 합니다... http://caniuse.com/#feat=multibackgrounds 더보기 box-sizing ??? 이전부터 해오던 스타일도 있고, 크로스브라우징 때문에 사용하지 못했던 css가 바로 box-sizing 입니다. 보통 width값을 정해놓아도 padding이나 border값에 의해 너비값이 변경되는 구조였다면, box-sizing을 지정하면 padding과 border의 영향을 받지 않고 너비를 고정시킬 수 있습니다. 해당 css는 IE8 이상부터 지원됩니다. 1 2 3 4 5 6 7 8 designsharp.tistory.com designsharp.tistory.com 1 2 3* {padding:0;margin:0} .cnt {width:400px;padding:30px;margin:20px;background:#f5f5f5;border:1px solid #d1d1d1} .cnt1 {padding.. 더보기 [CSS3] css를 활용한 기본 애니메이션 더보기 [css3] :first-of-type :first-of-type = :nth-of-type(1) :first-child 와 :first-of-type 의 해석차이를 도통 이해할 수 없다. first-of-type은 부모중 첫번째 요소?? first-child는 부모의 첫번째 자식인 모든 요소를 말하는데... 흠... css3와 css2의 차이로만 일단 알아놔야겠다.. 더보기 이전 1 다음
