본문 바로가기

라운드박스3

CSS3 border-image 테두리 이미지 CSS3 border-image 테두리 이미지라운드 박스를 만들 수 있을 뿐만 아니라 이제는 이미지 까지 가능하다. 일단 필요한 것은 정사각형 이미지 이 이미지의 귀퉁이가 꾸며줄것이고 가운데는 각 변을 반복할 것이다. 이 그림 사이즈는 90px X 90px이다 html은 생략 h2엘리먼트에 아무글이나 쓰자. 그리고 CSS는 다음과 같다. 브라우저 마다 다르므로 모질라,웹킷속성도 지정했다. 좀더 참조할려면 여기 http://www.w3schools.com/cssref/css3_pr_border-image.asp h2{ width:200px; border-width:30px; -moz-border-image:url(../images/flower.jpg) 30 round; -webkit-border-image.. 2012. 3. 4.
CSS3 라운드박스 및 박스 속성 CSS3 라운드박스 및 박스 속성 CSS3 부터는 라운드박스는 지원된다. 이미 옛부터 이야기 되었지만 여전히 문제는 IE. IE는 IE9부터 지원된다.일단 박스 속성부터 둘러보자.여기서 말하는 박스는 CSS에서 우리가 정의한 가로 세로(ex: div{ width:100px; height:100px;} )를 말하는 것이아니라 계산되어 화면에 보여진 박스를 말하는 것이다 박스 속성, 콘텐츠,마진,패딩,보더 레이아웃을짤때 우리는 계산을 잘하고 만들어야 한다 가로는 콘텐츠너비+패딩+ 보더이다. 브라우저 플러그인 파이어버그(FireBug)를 설치하고 레이아웃을 보면 쉽게 확인할수 있다. 캡처한 그림과 같이 보더도 계산된다는것을 잊지말자. 아웃라인(outline)과 보더(border) 위와 같이 보더는 박스계산에 .. 2012. 3. 4.
CSS3 라운드박스 익스플로어 (IE6,7,8) 모두적용 CSS3 라운드박스 익스플로어 (IE6,7,8) 모두적용 CSS3적용에 여전히 문제점을 가지는 IE ......에 라운딩박스의 경우여러가지방법이있다. 그 중 괜찮은것 출처는 여기 http://www.htmlremix.com/css/css-level-3-styles-in-internet-explorer-6-onwards 데모는 여기서 바로 확인 가능 http://fetchak.com/ie-css3/ 다른 방법들에 비해 쉽다. ie-css3.htc 이 파일이필요 다운은 http://code.google.com/p/curved-corner/ 소스를 알아보자 CSS3 : border-radius border-radius 는 박스의 라운드를 가능하게 해준다. 아직 이 방법이 적용 되지 않는 브라우저가 많으며 별도.. 2010. 7. 7.