"CSS3"에 해당되는 글 - 4건
Post
0123
css만으로 만든 유명브랜드 로고 등 - 트위터,애플,윈도우,아디다스 등
http://www.ecsspert.com
우와.....라는 말밖엔.. ㅎ
익스플로러에서 링크 누르시면... 지못미.. -ㅅ-;;; ㅋㅋ
위 스샷은 크롬에서 찍은 겁니다~
나머지 모던브라우저들도 다 확인해보니 사파리≥크롬>오페라>파이어폭스 순으로 예쁘게 랜더링 되네요 ㅎ
Post
http://mashable.com/2010/06/04/awesome-css3-techniques/?utm_source=TweetMeme&utm_medium=widget&utm_campaign=retweetbutton&utm_test=erwerwer
CSS3를 이용해서 구현할 수 있는 7가지의 놀라운 기술들이랍니다~
그러나 현실의 나에겐 그림의 떡 ㅋㅋ
사이트로 링크타고 가시면 글 중간중간에 해당 테크닉들에 대한 상세설명 및 예제페이지로 링크가 되어있어요~
버튼이나 라운드박스 같은건 정말 원츄 기능들이네요~ ㅋ IE에서만 지원이 된다면 실무에서도 바로 쓰고 정말 좋을텐데.. ㅜㅅㅜ
클라이언트들이 거의 전부 익스를 기준으로 하기 땜에 css3를 사용한다고 해도 결국은 IE용으로 따로 만들어줘야 하고..
오히려 일만 늘어나는.... ㅋ 쩝..
Post
http://www.css3generator.com/
정말 편하고 쉽게, CSS3 소스를 만들 수 있는 온라인 툴이랍니다~ ㅎㅎ
그렇지만!! 아무리 편하고 좋다고 해도~~ 만들어진 소스를 혼자서도 직접 작성할줄 알아야 하겠죠~? ^ㅅ^
어쨌든 정말 편한것 같네요 +ㅅ+ ㅋㅋ
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 공부하시는 분들 참고하시길 ^ㅅ^