이미지없이 css로 입체적인 박스 만들기, 삼각형 만들기등 여러군데서 응용 한것을 볼수있습니다.
참고글 : http://naradesign.net/wp/2008/10/28/165/
그래서 비슷한 방법으로 재미삼아 만들어봤습니다.
미리보기 :
css.html테스트 브라우저 : IE6, IE7, Opera, Safari, FF
그닥 실용적이진 않지만, css로도 이런게 가능하구나! 라고 넘어가시면 될듯합니다.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.box {border-style:solid;}
.border {width:120px; height:100px; border-color:#eee #333 #555 #aaa; border-width:30px 30px 40px 30px; background:#000;}
.box_txt {width:105px; height:85px; margin:5px 0 0 5px; border-top:3px solid #666; border-right:3px solid #999; border-bottom:3px solid #999; border-left:3px solid #444; background:#999; color:#fff; font-family:Tahoma; font-size:10px; text-align:center;}
.color {color:#fff200; font-size:12px;}
</style>
</head>
<body>
<div class="box border">
<div class="box_txt">WWW.WEBMINI.NET <p class="color">웹미니</p></div>
</div>
</body>
</html>
댓글 없음:
댓글 쓰기