WEB/CSS 썸네일형 리스트형 CSS3 Buttons [ css3 ] CSS3 Buttons css3 버튼 예제 입니다. 참조 : http://html5snippets.com/snippets/105-css3-gradient-buttons 25 Useful CSS3 Tools and Auto Generators 25 Useful CSS3 Tools and Auto Generators 모바일 쪽 코딩을 하다보니 버튼 및 팝업을 css3 를 많이 활용한다. 제너레이터가 있어 많이 편해요.아래는 최근 포스팅 된 css3 관련 사이트 들 입니다. 긁어 왔어요~ CSS3 GeneratorscssarrowpleaseCSS3 GeneratorCSS3 Generator CSS 3.0 MakerCSS3 SandboxCSS Layouts and GridsVariable Grid SystemCSS Layout GeneratorGridinator1 kb GridBlue PrinterCSS3 Gradient GeneratorsUltimate CSS Gradient GeneratorCSS3 Gradient GeneratorCSS3 Ge.. [ CSS3 ] display:-webkit-box [ CSS3 ] display:-webkit-box 특정레이어를 브라우저 가운데 정렬하는 방법이다. 기존에 [ position:absolute; left:50% top:50% ; margin: -xxx 0 0 -xxx ] 이 값으로 많이 처리 하였다. css3에는 이방법으로 가운데 정렬이 가능하다. 핵심은 .XXX {display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; } 이부분이다. 아래 테스트는 웹킷기반 브라우저( 크롬, 사파리, 맥스톤 등...) 에서만 보기가 가능합니다. 참조 : 개인 css 룰 1. 같은 레이아웃이라도 css 를 따로 해준다. - 나중에 유지보수를 위해 공통으로 쓸경우 특정 페이지가 변경됬을시 혼란이 가중 될수가 있다. 2. css 파일은 가능하면 하나만쓴다. 3. 핵 대신에 ie 주석문을 이용한다. 4. ie 조건문 참조 : http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/ Target ALL VERSIONS of IE Target everything EXCEPT IE Target IE 7 ONLY Target IE 6 ONLY Target IE 5 ONLY Target IE 5.5 ONLY Target IE 6 and LOWER Target IE 7 and LOWER Target IE 8 and LOWER Target IE 6 and HIGHER Target IE 7 and HIGHER Target IE 8 and HIGHER Universal IE 6 CSS IE-6 ONLY * html #div { height: 300px; } IE-7 ONLY *.. [ Open Case ] Dan Cederholm / CSS3 FOR WEB DESIGNERS / 정리 이제보니 제프리 젤드만 씨 가 .... 목차는 아래 정리하는 목적은 공부! 입니다 ㅎㅎ 챕터 1. USING CSS TODAY css 개념에 대해 설명합니다. 제프리 젤드만이 글 " To Hell With Bad Browsers " 나쁜 브라우저 ㅎㅎ( 글보기 ) 개인적으로 원서 보면서 하는것이라 올리지는 못하겠네요 죄송합니다. 소스위주로 ㅎㅎ border-radius Rounds the corners of an element with a specified radius value. Supported in Safari 3+, Chrome 3+, Firefox 1+, Opera 10.5+, and IE9 Beta. Example: .foo { border-radius: 10px; } text-sh.. CSS3 support for Internet Explorer 6, 7, and 8 참조 : http://fetchak.com/ie-css3/ 지원 가능한 CSS3 는 text-shadow , box-shadow , border-radius 이렇게 지원한다. 페이지 로딩시 ie에서는 눈에보인다. 이부분은 어쩔수 없는듯. 참조 사이트 링크에서 htc 파일을 다운로드 한뒤 아래 예시처럼 적용 클래스에 behavior 코드를 같이 넣어준다. ====================================================================================================================================== .box2 { background: transparent url(ashera.jpg); no-repeat top l.. 10 Useful CSS3 Tools for Your Next Web Development http://djdesignerlab.com/2011/02/03/10-useful-css3-tools-for-your-next-web-development/ 이전 1 2 다음
