나만의 CSS 박스와 버튼으로 포스트 꾸미기

css-box-machine2

스와 버튼을 포스팅이나 웹사이트에 적절히 사용하면 깔끔하고 세련된 느낌을 줄 수 있습니다. 이전에는 이미지를 주로 사용했지만 최근에는 CSS로 가능한 것들이 많은 것같네요. 하지만 CSS로 박스나 버튼을 만들기 위해서는 어느 정도 CSS/HTML에 대한 지식이 필요하기 때문에 이런 것들이 생소한 분들에게는 쉽지 않은 일이겠죠. 그래서 오늘은 자동으로 다양한 박스와 버튼을 만들어 코드를 생성해주는 툴에 대해 소개하겠습니다.

[divider top="0"]

CSS Box Machine

여기서는 다양한 박스가 미리 만들어져 있어서 원하는 박스를 골라 코드를 복사하여 사용하면 됩니다.

[button link="http://www.wordpressthemeshock.com/css-box-machine/" color="#ff6600" size="3" style="1" dark="0" radius="auto" target="blank"]바로 가기[/button]
[divider top="yes" text="↑"]

사용법

위의 화면에 있는 박스를 예제로 설명하겠습니다.
1. 위의 화면에서 CSS영역의 코드를 복사하여 테마의 style.css파일에 붙여넣기합니다.

.wrapper_body {
 position: absolute;
 padding: 20px 0;
 height: 100%;
 width: 100%;
 background: #eee;
 font-size: 11px;
 font-size: 11px;
 font-family: 'Open Sans', sans-serif;
 color: #4A4A4A ;
 text-align: center }
 .cbm_wrap {
 margin: 20px auto;
 width: 300px;
 min-height: 310px;
 background: white;
 padding: 10px;
 -webkit-border-radius:10px;
 -moz-border-radius:10px;
 border-radius:10px;
 -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
 -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
 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;
 }
 .ribbon-wrapper-green {
 width: 85px;
 height: 88px;
 overflow: hidden;
 position: absolute;
 top: -2px;
 right: -2px;
 }
 .ribbon-green {
 font-weight: bold;
 font-family: Sans-Serif;
 color: #333;
 font-size: 15px;
 text-align: center;
 text-shadow: white 0px 1px 0px;
 -ms-transform:rotate(45deg);
 -moz-transform:rotate(45deg);
 -webkit-transform:rotate(45deg);
 -o-transform:rotate(45deg);
 transform:rotate(45deg);
 position: relative;
 padding: 7px 0 ;
 left: -5px;
 top: 13px;
 width: 120px;
 background: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
 color:#6a6340;
 box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.3);
 }
 .ribbon-green:before, .ribbon-green:after {
 content: '';
 /* Colour of the triangle. To flip the effect, use border-bottom. */ border-top: 3px solid #6e8900;
 border-left: 3px solid transparent;
 border-right: 3px solid transparent;
 position:absolute;
 bottom: -3px;
 /* +1 to compensate for the border */ }
 .ribbon-green:before {
 left: 0px;
 }
 .ribbon-green:after {
 right: 0px;
 }
 .cbm_wrap img {
 width: 100%;
 margin-top: 15px;
 }
 .cbm_wrap p{
 margin-top: 15px !important;
 text-align: justify !important;
 }
 .cbm_wrap h1{
 font-size: 20px;
 font-weight: bold;
 margin-top: 5px;
 text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
 }
 .cbm_wrap a{
 text-decoration: none;
 color: #EAEAEA !important;
 }
 a{
 text-decoration: none;
 color: #4A4A4A !important;
 }
 a:hover{
 text-decoration: underline;
 color: #6B6B6B !important ;
 }

2. HTML영역의 코드는 복사하여 포스트나 페이지 에디터 창에 붙여넣기 하시면 됩니다.
아래에서 한글로 표시한 부분만 원하는 것을 넣으면 됩니다.

★★★

제목을 넣으세요

내용을 입력하세요.


사이트 이름을 넣으세요

3. 위의 코드를 적용하면 아래와 같이 박스가 표시됩니다.

4. 브라우져 테스트
위의 화면은 크롬에서 캡춰한 것입니다. 다른 브라우져에서는 별표뒤에 그라데이션 배경색이 안보이는데 이는 위의 CSS코드에서 그라데이션 배경색을 크롬에만 적용해서 그렇습니다.

위의 CSS코드에서 아래의 코드를 찾고

 background: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));

그라데이션 툴을 사용해서 원하는 그라데이션의 색을 선택해서 아래와 같이 변경해주세요.

background: #cdeb8e; /* Old browsers */
background: -moz-linear-gradient(top,  #cdeb8e 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */

[divider top="yes" text="↑"]

King Button Maker CSS3

7월 한달 동안 무료로 다운로드 받을 수 있는 버튼 메이커입니다. 7월이 거의 끝나가니 필요하신 분들은 미리 다운로드 받으세요.


[button link="http://codecanyon.net/item/king-button-maker-css3/553248/?ref=mysearchfish" color="#ff6600" size="3" style="1" dark="0" radius="auto" target="blank"]바로 가기[/button]
[divider top="yes" text="↑"]

사용법

1. 다운로드를 받고 압축을 풀면 King Button Maker폴더가 있습니다. 그 폴더 안에 index.html을 열면 아래와 같은 설정 화면이 표시됩니다.

2. 화면 맨 위에 있는 Normal/Hover/Pressed 탭에서 각각 버튼의 색, 크기, 그림자 등을 설정합니다.

3. 화면 하단 오른쪽에 있는 Grab the code를 클릭하여 CSS와 HTML 코드를 복사하고 위의 박스 예제와 같이 각각 styel.css와 포스트 에디터 창에 붙여넣기 합니다.

4. 위의 코드를 적용한 화면

[divider top="yes" text="↑"]

마치며

박스와 버튼 이외에도 CSS로 꾸밀 수 있는 것들이 많이 있으니 구글에서 더많은 CSS툴들을 검색해보시기 바랍니다.

[list style="plus"]

[/list]
그럼 여러분도 멋진 박스와 버튼을 만들어서 멋지게 포스트를 꾸며보세요. :)

[divider top="yes" text="↑"]

그외 관심 포스트

10 Comments

  1. 1
  2. 2

    현재 홈을 워드프레스로 바꿀 예정인데, 우선 테마를 구입한 후 이를 한글로 바꾸고 사용할 수 있는지 궁금해서요. 그리고, 아무것도 모르는 초보자도 공부하고 활용하면, 워드프레스로 운용이 가능할까요?

  3. 4
  4. 5
  5. 6
  6. 7
    • 8

      저도 수 많은 테마들을 사용해봤지만 워드프레스 테마는 대부분 언어팩을 제공하기 때문에 번역만 하면 한글로 잘 보입니다. 혹시 한글이 잘 안나오시면 테마 개발자에게 문의를 해보셔야할 것같네요.

  7. 9
    • 10

      번역했다고 테마가 깨지는 것은 아니지만 영어를 한글화 하실 때 너무 길게 번역하셔서 화면이 깨질 수 도 있고 폰트 사이즈가 커서 그럴 수도 있으니 참고하세요. 그래도 문제가 있다면 테마 포럼에서 개발자에게 문의를 해보세요. :)

Add Comment Register



댓글 남기기

Your email address will not be published. Required fields are marked *

HTML 태그 및 속성을 사용하실 수 있습니다: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>