5분만에 CSS로 큐베 만들어보기

2012/01/10 16:21 / Web

우선 기본적인 HTML 틀을 만들어줍시다. 독타입은 간단하게 흙탕물5로.

<!DOCTYPE html>

<html>

<head>
</head>

<body>

<div class="container">

<div class="eye left">
<div class="pupil"></div>
<div class="highlight"></div>
</div>
<div class="eye right">
<div class="pupil"></div>
<div class="highlight"></div>
</div>

<div class="mouth left"></div>
<div class="mouth right"></div>
</div>

</body>

</html>

eye는 공통요소로 pupil과 highlight이라는div를 넣어주고 left하고 right만 구분해줍시다. 그 밑에는 mouth를, 마찬가지로 left, right.

body		{ background: #fff; }
.container	{ width: 800px; height: 600px; display: block; margin: 100px auto; background: none; position: relative;}
.container div	{ position: absolute; }
.eye		{ width: 90px; height: 90px; top: 250px; 
				border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; 
				border: 2px solid #333; 
				background: #bb2967}
.left		{ left: 185px; }				
.right		{ right: 185px; }
.pupil		{ width: 50px; height: 50px; left: 20px; top: 20px; 
				border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px;
				background: #780026}				
.highlight	{ width: 25px; height: 25px; right: 15px; top: 15px; 
				border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px;
				background: #fff}	

.mouth		{ width: 40px; height: 10px; bottom: 140px; margin: 0 173px;
				border-bottom-left-radius: 35px 20px;
				border-bottom-right-radius: 35px 20px;			
				-moz-border-radius-bottomleft: 35px 20px;
				-moz-border-radius-bottomright: 35px 20px;
				-webkit-border-bottom-left-radius: 35px 20px;
				-webkit-border-bottom-right-radius: 35px 20px;
				border: 1px solid #333; border-bottom: 2px solid #333; border-top: none; }


그리고 적당히 CSS를 발라주면

사용자 삽입 이미지




아 잉여하다........

--English--

responses

9 comments

  • 쿠나 2012/01/10 16:37

    Edit Reply

    으앜ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ HTML 아트에 맛들이시다닠ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
    • zvuc 2012/01/10 16:40

      Edit

      하도 잉여해서 잠깐 시간내서 해봤습니다 ㅋㅋ
  • TuNE 2012/01/10 19:27

    Edit Reply

    헠ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 대단하십니다..
    • zvuc 2012/01/12 16:05

      Edit

      뭐 대단할것 까진 없습니다 ㅋㅋ
  • 디토 2012/01/11 09:26

    Edit Reply

    올ㅋㅋㅋㅋㅋㅋㅋ
    • zvuc 2012/01/12 16:05

      Edit

      참 쉽죠잉? ㅋㅋ
  • 세르엘 2012/01/14 15:28

    Edit Reply

    계약머겅 한 번 더머겅!!!(???)

    그러나 저러나 쩌네요 ㅋㅋㅋㅋㅋㅋㅋㅋ
    • zvuc 2012/01/20 00:10

      Edit

      우리의 귀여운 개객기 계약자 큐베입니다
  • 장문유희 2014/01/25 12:21

    Edit Reply

    이거 퍼가도 될까요???

Submit