CSS3[씨에스에스삼]으로 div(글상자)의 모서리를 둥글게 만들어 보세요.
저도 방금 알아냈어요. (...)
드디어 시작된 스킨 뜯어보기 코너. 그런데 처음부터 난데없이 CSS3인 이유는...
블루큐브 스킨을 보시면 전체적으로 둥글둥글하다고 느끼실 겁니다. 그 둥근 테두리를 전부 이미지로만 처리해야 하는 애로사항이 있었는데, CSS3의 사용법 중 div(글상자)의 모서리를 둥글게 만드는 것이 있다는 것을 뒤늦게 깨닫고 말았습니다.
...-ㅅ-;; 많이 늦긴 하지만 CSS3을 사용하는 스킨이 되었다는 말입니다.
예를 들어 이런 부분이 있다고 하면
이렇게 세 부분으로 나누어져서, 각각 부분을 글상자로 만든 다음
윗부분과 아랫부분은 테두리를 둥글게 그려놓은 배경이미지로 채워넣고,
가운데 부분은 흰색 배경으로 채워 넣는 것이었습니다.
.commentReplyTop {
width:603px; height:6px;
margin-top:12px;
background:url(images/commentReplyTop.png) center center no-repeat;
}
.commentReplyBottom {
width:603px; height:6px;
margin-bottom:12px;
background:url(images/commentReplyBottom.png) center center no-repeat;
}
.commentList p {
background-color:#FFF;
padding:5px 12px 5px 12px;
margin:0;
}
<div class="commentReplyTop">
</div>
<p>[샵샵_rp_rep_desc_샵샵]</p>
<div class="commentReplyBottom">
</div>
이렇게 난잡하기 짝이 없던 코드가
.commentList p {
background-color:#FFF;
padding:12px;
margin:12px 8px 12px 0;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}
<p>[샵샵_rp_rep_desc_샵샵]</p>
무려 이렇게 간단하게 바뀌어버렸습니다. 오오 이런...
결과는 위의 사진과 거의 동일하게 나오겠죠?(귀찮아서 사진 안올리려는 수작)
색깔이 좀 달라진건 신경쓰지 말아주시고, 결과물이 아주 약간 더 깔끔하다는 것을 확인할 수 있습니다.
코드를 보시면 감이 확 오실 겁니다. 넵. 크롬, 사파리, 파이어폭스에서만 보입니다.
사용법은 이렇습니다.
-webkit-border-radius:(수치)px;
-moz-border-radius:(수치)px;
위의 두 줄을 CSS파일의 원하는 부분에 부담없이 넣어주시면 됩니다. 픽셀 말고 다른 단위는 되나 확인을 안해봤네요.
div 뿐만 아니라 img(이미지)에도 먹히더군요. 예뻐 죽겠네요. -ㅂ-
신기술과 친하게 지내는것은 언제나 좋은것 같습니다. 어허허
위의 글상자 모서리 둥글게 다듬어주는것뿐만 아니라 텍스트 그림자에 글상자 그림자, 그라이언트까지 아주 지옥같은 집이 천국의 러브하우스로 변하는중.
이것들을 굉장히 다양한 방법으로 혼합해서 사용하면 무한한 응용이 가능하더군요.
근데 이제부터 IE나 오페라에서는 제 스킨이 매우 각지게 나오겠군요? 완전 다른 스킨마냥...
FLATBERRY_Mixberry_1.8.7z
TISTORY_ANDROMEDA_v1.0_fix.zip
2011.12.15 17:43 신고
오옷 정말로 멋진듯! 퇴근하자마자 이식해 보아야 겠어여 ~^^
2011.12.16 13:22 신고
공부좀 많이 해야될것 같네요 ^_^;;
혹시 일본에서 사시나용 ~~
2012.12.29 15:29 신고
감사합니다. 블로그 초보자인데 덕택에 가벼운 마음으로 시작할 수 있을것 같습니다 ㅠㅠ
2013.03.27 15:08 신고
한가지 질문이 있는데 본문 가로 사이즈를 늘릴수는 없을까요?
2013.06.02 08:45 신고
글보관함어떻게하면 님처럼변경할 수 있나요
알려주세요
2013.06.29 17:21
정말 감사해요 스킨들이 너무이뻐요! 자주 방문할꼐요~ 감사합니다 도바토님 ^-^ 링크추가하고 가요~