Post
http://css3please.com/
CSS3 예제소스가 잔~뜩 있어욧 >ㅅ<
아래 이미지는 위 사이트에서 제공하는 예제 중 둥근모서리박스 소스를 가지고 샘플로 만들어본 화면이예요~
(테스트용으로 사용한 브라우저는 모두 2010.05.28 기준 최신버전입니다. IE9는 아직 구하지 못한 관계로 패스 ^^;)
사용한 소스는 아래와 같습니다~
테두리가 solid인 디자인이라면 정말 유용하게 쓰이겠네요~ ^ㅅ^ dashed는 브라우저마다 약간 부자연스러워 보이기도 해서;;
아무튼 CSS3가 샘플소스로 제공이 돼서 정말 도움이 될만한 사이트인것 같아요~~
CSS3 공부하시는 분들 참고하시길 ^ㅅ^
CSS3 예제소스가 잔~뜩 있어욧 >ㅅ<
아래 이미지는 위 사이트에서 제공하는 예제 중 둥근모서리박스 소스를 가지고 샘플로 만들어본 화면이예요~
(테스트용으로 사용한 브라우저는 모두 2010.05.28 기준 최신버전입니다. IE9는 아직 구하지 못한 관계로 패스 ^^;)
사용한 소스는 아래와 같습니다~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title>CSS3 test</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style type="text/css">
.box {width:50%; padding:20px; background-color:yellowgreen;}
.box_round {
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title>CSS3 test</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style type="text/css">
.box {width:50%; padding:20px; background-color:yellowgreen;}
.box_round {
border:3px dashed gray;
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
border-radius: 12px; /* Opera 10.5, IE 9 */
}
</style>
</head>
<body>
</style>
</head>
<body>
<div class="box box_round">
This element will receive inline changes as you edit the CSS rules on the left. Enjoy
</div>
</body>
</html>
</html>
테두리가 solid인 디자인이라면 정말 유용하게 쓰이겠네요~ ^ㅅ^ dashed는 브라우저마다 약간 부자연스러워 보이기도 해서;;
아무튼 CSS3가 샘플소스로 제공이 돼서 정말 도움이 될만한 사이트인것 같아요~~
CSS3 공부하시는 분들 참고하시길 ^ㅅ^