Tag Clouds



CSS3로 할 수 있는 것들 - CSS3 Click Chart

PDF
css3-click-chart.png

라운디드 코너, 그림자, 그라디언트, 등의 다채롭고 흥미로운 그래픽 효과를 부여할 수 있는 CSS3는 마법과도 같습니다. Impressive Webs의 Louis Lazaris씨는 CSS3를 이용하여 가능한 예시를 일목요연하게 조회하고 쉽게 응용할 수 있도록 CSS3 Click Chart를 만들었습니다. box-sizing, border-radius, shadows, RGBA colors, multiple columns, HSLA colors, gradients, multiple backgrounds 총 8개 파트로 구성되어 있으며 "?"버튼을 클릭하여 예제에 사용된 코드와 설명을 조회할 수 있습니다. 지속해서 업데이트해 나갈 예정이라고 하네요. 그라디언트 속성도 상당히 임팩트 있는걸요?

#gradient {
  background: -webkit-gradient(linear, left top, left bottom, from(#4a6378), to(#ccc), color-stop(0.5, #fff), color-stop(0.5, #6d94b4));
  background: -moz-linear-gradient(right, #340000, #B78330 70%, #FEFDA1);
}


Comments

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

  1. css3watcher

    RT @firejune: CSS3 도우미 - CSS3 Click Chart http://firejune.com/1550

    Posted by css3watcher at from Topsy | reply

     
     
  2. avatar

    CSS3 border-radius & DD_roundies (for IE)
    CSS3의 border-radius 속성은 코너를 둥글게 해주는 아주 유용한 속성이지만아직 정식(?)으로 지원하는 브라우저는 없는 것 같고, (있나...-_-)FF는 -moz-border-radiusChrome과 Safari는 -webkit-border-..

    Tracked from  April Breeze is blowing... at

     
     
  3. kjk7034

    좋은 자료 감사합니다~^^ [글보러가기]

    Posted by Wise at from me2day

     
     
  4. firejune

    별말씀을요

    Posted by 파이어준 at from me2day

     
     
  5. smartbosslee

    CSS3로 할 수 있는 것들 - CSS3 Click Chart http://bit.ly/cVV5Xq 포토샵의 도움을 덜 받을 수 있겠군요 http://ff.im/-fGXa5

    Posted by 이현석 Hyunseok Lee at from Topsy | reply

     
     
  6. avatar

    조금 어려워 보이네요~ 그라디언트는 좀 연구해봐야할듯.

    Posted by ㅇㅅㅇ at reply edit

     
     
  7. avatar

    브라우저마다 사용방법이 따로 놀고 있네요. 통일이 필요해 보입니다.

    Posted by 파이어준 at edit

     
     
  8. gwangpa

    CSS로 할 수 있는것들 : http://firejune.com/1550

    Posted by DaeHyun Kim at from Topsy | reply

     
     
  9. _hnjung

    @firejune RT CSS3로 할 수 있는 것들 - CSS3 Click Chart http://firejune.com/1550

    Posted by Hana Jung at from Topsy | reply

     
     
  10. avatar

    captcha