Html/CSS 테두리, 박스 이쁘게 꾸미기 - CSS3 제너레이터

CSS3 Generator

 

CSS로 간단하게 이쁜 박스를 만들고 싶다면 CSS3제너레이터를 추천한다.

블로그를 꾸미기거나 포스팅을 할때도 남들과 다른 테두리나 박스를 넣어 사용할 경우 유용하게 사용할 수 있다.

border의 속성값만 입력해주면 간단하게 테두리나 박스를 만들 수 있다.

 

 

 

 

 

 

/*예제*/

.box {

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: 0px 0px 10px #000000;
-webkit-box-shadow: 0px 0px 10px #000000;
box-shadow: 0px 0px 10px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#b5b5b5', endColorstr = '#000000');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#b5b5b5', endColorstr = '#000000')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #b5b5b5, #000000);
background-image: -ms-linear-gradient(top, #b5b5b5, #000000);
background-image: -o-linear-gradient(top, #b5b5b5, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#b5b5b5), to(#000000));
background-image: -webkit-linear-gradient(top, #b5b5b5, #000000);
background-image: linear-gradient(top, #b5b5b5, #000000);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
opacity: 0.74;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 74);
/*-ms-filter must come before filter*/
filter: alpha(opacity = 74);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*All filters must be placed together*/

}

 

html에 적용하고 싶다면

<style type="text/css">
.box {-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; .....}
</style>

 

이렇게 넣어주면 쉽게 적용이 된다.

작성자 역시 아직은 생초보여서 설명이 잘 되었는지는 모르겠으나 유용하게 사용했으면 하는 바램이다.