위와 같이 이미지 없이 순수 HTML/CSS 로 리본형식의 헤더를 만들어 보겠습니다.
먼저 HTML 코드 입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>DJ Defense</title>
</head>
<body>
<div class="aside">
<h1>Welcome Menu</h1>
<div class="ribbon">DJ Defense</div>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
<div class="ribbon">By Composite</div>
<ul>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Menu 7</a></li>
<li><a href="#">Menu 8</a></li>
<li><a href="#">Menu 9</a></li>
<li><a href="#">Menu 0</a></li>
</ul>
</div>
</body>
</html>
위 소스 중 DIV 태그는 하나 밖에 없습니다.
DIV 태그가 한개만 사용 되었지만 CSS 를 이용하여 구현이 가능 합니다.
CSS2 표준에 재정이 되어 있는 가상 컨텐츠 영역인 :before 와 :after 가 있습니다.
이 영역이 있으면 가상까지 합해 총 3개의 요소로 갖고 놀 수 있습니다.
여기서 :before 는 그림자를, :after 는 리본 입체 역할을 담당했습니다.
먼저 소스를 보여드리겠습니다.
.aside{background-color:#ccc;margin-left:2em;font:bold 1.5em verdana;width:480px;float:right;}
.ribbon{
background:darkred;color:white;
:relative;z-index:0;margin-left:-1em;margin-top:1em;
padding-left:1em;
text-transform:uppercase;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.ribbon:after{
display:block;z-index:-2;
border-top:0;
border-bottom:.75em solid transparent;
border-left:1em solid transparent;
border-right:1em solid darkred;
content:'';:absolute;margin-left:-2em;
}
.ribbon:before{
display:block;content:' ';:absolute;z-index:-1;
width:100%;
-webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, .75);
-moz-box-shadow: 0px 5px 5px rgba(50, 50, 50, .75);
box-shadow: 0px 5px 5px rgba(50, 50, 50, .75);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-left:-1em;
}
먼저 리본 헤더의 기본 스타일은 겹치는 부분을 제외한 기본적인 스타일을 입히시면 됩니다.
이때 중요한 거는 리본이 앞으로 나와서 겹쳐야 하기 때문에
왼쪽 여백을 오히려 바깥으로 나가게끔 하는 것이 포인트!
그런 다음에 안쪽 여백을 통해 다시 돌려주면은 원래대로 돌아간 것처럼 실행할 수 있습니다.
중요한 거는 상대 위치로 지정하고 z-index를 지정해야 합니다.
그래야 하위 가상 요소의 표시 순서를 잡을 수 있습니다.
그리고 리본 겹치는 부분입니다. 리본 겹치는 부분은 after 로 줬습니다.
왼쪽 위에서 아래로 대각선으로 쭈욱 이어지는 삼각형 만들기의 비법은 바로 테두리 에 있습니다.
테두리로 삼각형 만드는 비법에 자세한 설명은 링크를 참조하시면 되겠습니다. firejune 님이 가장 잘 설명해 주셨더군요.
http://firejune.com/1533
리본 삼각형을 잡도록 위쪽 테두리를 없애고,
옆테두리에 100%를 부여할 경우 아래 테두리를 75% 정도로 크기를 부여했습니다.
그리고 왼쪽 및 아래쪽 테두리를 투명 표시 해서 오른쪽 테두리를 표시하게 하면
리본에 나오는 삼각형 만들기는 끝입니다.
그리고 절대 위치를 지정해서 표시 순서를 잡습니다.
위치는 지정하실 필요 없고 여백 조정을 통하여 상대 위치를 지정해 주면 됩니다.
여기서는 부모 여백의 2배 값으로 설정했습니다.
즉, 부모의 밖으로 빼낸 마진의 절대값+안쪽 여백값이 되겠습니다.
중요한 것은, content 속성을 부여해야 합니다. 또한 비어 있어야 합니다.
그래야 테두리가 표시되기 때문입니다.
마지막으로 그림자 부분입니다. 그림자는 CSS3 box-shadow 속성을 사용했습니다.
그리고 절대 위치로 잡은 뒤 여백은 부모와 똑같이 겹치도록 한 다음 표시 순서를 뒤로 잡습니다.
표시 순서는 부모>before>after 순으로 잡도록 설정해 주시면 되겠습니다.
이제 중요한 것은 content 속성을 부여해야 하는데, 빈 문자를 줘야 합니다. 스페이스바 공백은 안먹힙니다.
그래서 한글 ㄱ->한자->1번 문자를 통하여 공백을 표시했습니다.
도 안먹히니 조금 슬프지만 이렇게라도 했습니다.
안그러면 그림자 표시가 안됩니다.
이렇게 하시면 완성입니다.
출처 http://phpschool.com/link/tipntech/76137
//저작권 : 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 Unported 라이선스
http://jsbin.com/usawah/2
|
