리본 서식 4-3D 리본

demun
퍼블리셔/기술
2012. 6. 1. 06:00

제가 서식형태로 리본에 대한 글을 몇번 썻습니다.
이전에 알고 쓴줄 알았는데.... 알고 보니 사용하지 않은것 같아 써봅니다.

이번에는 코드만으로 리본형태를 만드는 과정을 알아보겠습니다.
이 형태는 제가 이전에 만든 스킨에도 많이 적용되었던 디자인인데요. 어떤 형태인지 대략 이미지를 참고하시기 바랍니다.

여기서는 둥근 형태가 아닌 삼각형 형태를 만들어 보겠습니다.
원재는 3D 리본 만들기 입니다.
먼저 제작된 리본 형태는 아래와 같습니다.

html 코드는 아래와 같습니다.

<div id="container">

	<div class="bubble">
		<div class="rectangle"><h2>3D CSS Ribbon</h2></div>
		<div class="triangle-l"></div>
		<div class="triangle-r"></div>
		<div class="info">
			<p><a href="http://demun.tistory.com/2113/">3D 리본 만들기 바로가기</a></p>
		</div>
	</div>

</div>

다음 css 코드는 아래와 같습니다.

.bubble {
	clear: both;
	margin: 0px auto;
	width: 350px;
	background: #fff;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	position: relative; 
	z-index: 90; 
}
.rectangle {
	background: #7f9db9;
	height: 50px;
	width: 380px;
	position: relative;
	left:-15px;
	top: 30px;
	float: left;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	z-index: 100; 
}
.rectangle h2 {
	font-size: 30px;
	color: #fff;
	padding-top: 6px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	text-align: center;
}
.triangle-l {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: -30px;
	top: 65px;
	z-index: -1; 
}
.triangle-r {
	border-color: transparent transparent transparent #7d90a3;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: 350px;
	top: 35px;
	z-index: -1; 
}
.info { padding: 60px 25px 35px 25px; }
.info h2 { font-size: 20px; }
.info p { padding-top: 10px; font-size: 14px; line-height: 22px; }
.info p a { color: #c4591e; text-decoration: none; }
.info p a:hover { text-decoration: underline; }

info 부분은 별로 중요한것이 아니고 정작 중요한것은 .triangle-l 와 .triangle-r 입니다.
.rectangle 를 position:relative 로 만들어서 다른곳으로 도망가지 못하게 만들어놓고 이걸 기준으로 .triangle-l 와 .triangle-r 를 왼쪽 오른쪽 모서리로 만든것입니다.

완성된 모든 코드는 아래 파일에 있습니다.

ribbon.html

참고 링크

리본 서식 3 => http://demun.tistory.com/2066
리본 서식 1 => http://demun.tistory.com/2065
티스토리 리본 제목 서식 만들기 3 => http://demun.tistory.com/2067
티스토리 리본 제목 서식 만들기 2 => http://demun.tistory.com/2062
티스토리 리본 제목 서식 만들기 1 => http://demun.tistory.com/2061
리본서식1이 적용되지 않을때 사용법 => http://demun.tistory.com/2068

개 개

demun(대문블로그)

리본 서식 4-3D 리본

티스토리툴바