Search

Tag Clouds


순수 CSS3로 만든 페이지 넘기기 효과

PDF

CSS를 예술의 경지까지 끌어올린 Román Cortés씨는 순수 CSS만으로 3D 패럴랙스 효과를 만들어 내고 콜라 캔과 찌그러진 콜라 캔을 입체적으로 매핑한 경험이 있습니다. 그는 이제 조금더 실용적인 곳에 CSS 테크닉을 적용하기 시작했습니다. 위 예제 역시 약간의 HTML과 CSS만을 이용하여 작성된 것이며 마우스 행동에 따른 책장을 넘기는 효과가 적용되어 있습니다. 마치 플래시로 구현한 듯한 애니메이션을 보여주며, 그라디언트와 쉐도를 적절히 이용하여 사실적으로 표현했습니다. 웹킷 기반의 크롬과 사파리 브라우저에서만 작동하며 iOS나 맥OS 위의 사파리에서는 transition 속성이 하드웨어 가속을 지원하기 때문에 매우 부드러운 애니메이션을 경험할 수 있습니다. iOS에서는 약간 뒤틀리긴 하지만요.

아... 요것이랑 비슷한 것을 자바스크립트로 구현하던 짱박아둔 예제가 있었는데 완전히 새 됐군요.

Comments

Trackback : http://firejune.com/trackback/1621

  1. writebug

    우오오 모바일 사파리에서도 잘 동작하는군요. 감동 감동 “@firejune: 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621”

    Posted by SHIM, Woo-Young at from Twitter for iPhone | reply

     
     
  2. aruesoft

    RT @firejune: 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621

    Posted by Park, Jae Young at from TweetDeck | reply

     
     
  3. hoon3253

    허거걱 이런건 정말 자바스크립트로 하는거 아니군요. [글보러가기]

    Posted by 샤루트 at from me2day

     
     
  4. virginbmw

    스터디 때문에 CSS 보고 있었는데 이건 뭐 신의 경지. 난 점점 경영학도에서 개발자가 되어 가는건가... RT @firejune: 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621

    Posted by Minjung Choi (최민정) at from Chromed Bird | reply

     
     
  5. iamsummerz

    OMG. 원본 링크는 http://bit.ly/9ZKOJU 예제는 http://bit.ly/cKkCnM RT @firejune: 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621

    Posted by summerz at from web | reply

     
     
  6. FRENDS_kr

    순수 CSS3로 만든 페이지 넘기기 효과 http://bit.ly/94smaX - @firejune

    Posted by FRENDS at from TweetDeck | reply

     
     
  7. avatar

    흐흐 근데 좀 부르르 떠는군요...

    Posted by boxersb at reply edit

     
     
  8. avatar

    iOS용 사파리에서는 바리리 떨더군요.

    Posted by 파이어준 at edit

     
     
  9. JunoTweet

    좀 덜덜 떠는것 빼고는 멋지네요. 점점 독특한 것들이 나오는듯~ RT @firejune: 순수 CSS3로 만든 페이지 넘기기 효과 http://bit.ly/bdgyeO

    Posted by Joonho Choi (최준호) at from Echofon | reply

     
     
  10. whitesuri

    오 CSS도 계속 발전하는군요.+ _+ [글보러가기]

    Posted by 서리 at from me2day

     
     
  11. silverms2

    우왕 재밌네요 ㅋㅋㅋㅋ

    Posted by 이툐 at from me2day

     
     
  12. whitesuri

    이툐 ㅇㅇ html5 3디에 이어서 신기한듯

    Posted by 서리 at from me2day

     
     
  13. EBvi

    RT @firejune: 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621

    Posted by EB at from Echofon | reply

     
     
  14. iamzzi

    RT @firejune: 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621

    Posted by iamzzi at from Twitter for iPhone | reply

     
     
  15. mudchobo

    RT @firejune: 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621

    Posted by 성종천(JongCheon Seong) at from web | reply

     
     
  16. aka0220

    RT @firejune: 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621

    Posted by E.J.Suh at from Twitter for iPhone | reply

     
     
  17. sub

    오 멋지다

    Posted by 섭리 at from me2day

     
     
  18. sch791129

    오…오….오…. [글보러가기]

    Posted by 파란만장미스터송 at from me2day

     
     
  19. weeky97

    페이지 안넘어가등데???

    Posted by 우iㅋi at from me2day

     
     
  20. sch791129

    우iㅋi 두개 다클릭해서 보세요

    Posted by 파란만장미스터송 at from me2day

     
     
  21. progh2

    Firejune Blog - 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621

    Posted by Gihun Ham at from Topsy | reply

     
     
  22. avatar

    캐스케이딩 스타일 시트 수준 3 사양 완료하고 세그먼트가 완료되기 때문에과 청크의 승인을 더 빨리 승인을 수 있습니다. 이것은 또한 브라우저와 사용자 에이전트 제조 업체는 사양 섹션을 지원하기 위해 부풀게하지만 최소한 자신의 코드를 유지만을 이해가 그 모듈을 지원함으로써 수 있습니다. 이것은 정말 좋은 기술입니다 ....

    Posted by data recovery at reply edit

     
     
  23. avatar

    동감입니다. 멋진 기술이죠!

    Posted by 파이어준 at edit

     
     
  24. JooStory

    RT @firejune: 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621

    Posted by Joo at from Twitter for iPhone | reply

     
     
  25. hothanaa

    우와~~~~~ !!!!!!! RT @firejune: 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621

    Posted by Hana Kim at from Osfoora | reply

     
     
  26. bookwormkr

    RT @firejune: 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621

    Posted by SangHeon Han at from web | reply

     
     
  27. ulubme1020

    @firejune 팔로우 했습니다^^ 너무 반갑습니다...css로 이렇게까지 가능하다니..내일 회사가면 당장 소스를 확인해봐야겠어요.

    Posted by ulubme at from Twitter for iPhone | reply

     
     
  28. firejune

    @ulubme1020 네 반가워요~

    Posted by firejune at from web | reply

     
     
  29. eyelove

    RT @firejune: 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621

    Posted by EyelOve at from Twitter for iPhone | reply

     
     
  30. sniff3r

    이북참고 RT @JunoTweet 좀 덜덜 떠는것 빼고는 멋지네요. 점점 독특한 것들이 나오는듯~ RT @firejune: 순수 CSS3로 만든 페이지 넘기기 효과 http://bit.ly/bdgyeO

    Posted by Jung-Shin Park at from TwitBird | reply

     
     
  31. twtfavorite

    RT @firejune 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621

    Posted by twtFavorite at from API | reply

     
     
  32. doododoodo

    RT 대단하네요 @firejune 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621

    Posted by doodoo at from web | reply

     
     
  33. beagledoil

    RT @twtfavorite: RT @firejune 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621

    Posted by Myung ju Choi at from Topsy | reply

     
     
  34. hemoptysisheart

    [순수 CSS3로 만든 페이지 넘기기 효과 - Firejune Blog http://2u.lc/QXZ ] 으음... 사파리 열기 귀찮은데... =_=)

    Posted by Hemoptysis Heart at from Topsy | reply

     
     
  35. parkhyungjoo

    정말 CSS3 란... 사람의 노력이란... http://firejune.com/1621 감탄사가 절로 나옵니다.

    Posted by parkhyungjoo at from Topsy | reply

     
     
  36. mywho88

    #mywho RT @parkhyungjoo: 정말 CSS3 란... 사람의 노력이란... http://firejune.com/1621 감탄사가 절로 나옵니다.

    Posted by Daniel Lynn at from Topsy | reply

     
     
  37. xhyjune

    RT @parkhyungjoo: 정말 CSS3 란... 사람의 노력이란... http://firejune.com/1621 감탄사가 절로 나옵니다.

    Posted by June, HAM at from Topsy | reply

     
     
  38. gless2

    RT @firejune 순수 CSS3로 만든 페이지 넘기기 효과 http://firejune.com/1621
    오~~~이거 완전 멋지다!!!

    Posted by mi yeon lim at from web | reply

     
     
  39. avatar

    captcha