コピペで使えるCSSデザイン枠テンプレート

どシンプルなものからちょっと凝ったものまで、
CSSでスタイリングしたデザイン枠のテンプレートです。

色など自由に調整して引用枠や見出しなどにお使いください。

HTMLは共通です。
クラス名はお好きに変更してください。

<div class="block">CSSでつくるデザイン枠テンプレート</div>

.block {
    padding: 20px;
    background: #fff;
    border: 1px #ccc solid;
    box-shadow: 0 2px 3px 0 #ddd;
    -moz-box-shadow: 0 2px 3px 0 #ddd;
    -webkit-box-shadow: 0 2px 3px 0 #ddd;
}

.block {
    padding: 20px;
    color: #fff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #6495ed;
}

.block {
    padding: 20px;
    background: #ffe5e9;
    background: linear-gradient(to bottom, #fff, #ffc0cb);
                -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ffc0cb));
                -moz-linear-gradient(top, #fff, #ffc0cb);
                filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFffffff', endColorstr='#FFffc0cb');
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffc0cb',GradientType=0 );
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
}

.block {
    border: #ffb6c1 solid 1px;
    border-left: #ffb6c1 solid 10px;
    padding: 20px;
    background: #fff;
}

.block {
    position: relative;
    padding: 20px;
    color: #fff;
    background: #d2b48c;
    overflow: hidden;
}
 
.block:before {
    content: " ";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-width: 16px 16px 0 0;
    border-style: solid;
    border-color: #fff;
    border-top-color: #998366;
    box-shadow: 0 1px 1px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

.block {
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 50px #ddd inset;
    -moz-box-shadow: 0 0 50px #ddd inset;
    -webkit-box-shadow: 0 0 50px #ddd inset;
}

.block {
    color: #fff;
    background: #3cb371;
    padding: 20px;
    border: 2px dashed rgba(255,255,255,0.5);
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5);
}

.block {
    position: relative;
    background: #fff;
    padding: 20px;
    z-index: 10;
    top: 0;
    left: 0;
}
.block:before, .block:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0 1px 4px #aaa;
    -moz-box-shadow: 0 1px 4px #aaa;
    -webkit-box-shadow: 0 1px 4px #aaa;
}
.block:before {
    background: rgba(255,255,255,0.5);
    top: 0;
    left: 0;
    z-index: -10;
}
.block:after {
    background: #87cefa;
    top: 8px;
    left: 8px;
    z-index: -20;
}

.block {
    padding: 20px;
    border: #ff7f92 dashed 1px;
    background: #fff;
}

.block {
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 50px #add8e6 inset, 5px 5px 0 #cecece;
    -moz-box-shadow: 0 0 50px #add8e6 inset, 5px 5px 0 #cecece;
    -webkit-box-shadow: 0 0 50px #add8e6 inset, 5px 5px 0 #cecece;
}

.block {
    padding: 10px 20px;
    margin: 10px;
    background: #ffe4e1;
    box-shadow: #ffe4e1 0 0 10px 10px;
    -webkit-box-shadow: #ffe4e1 0 0 10px 10px;
    -moz-box-shadow: #ffe4e1 0 0 10px 10px;
}

.block {
    color: #fff;
    padding: 20px;
    background: #b2946c;
    position: relative;
    z-index: 10;
}

.block:before {
    content: "";
    position: absolute;
    background: #b2946c;
    margin: 4px;
    border: 2px #fff solid;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: -10;
}

.block {
    padding: 20px;
    background: #fff;
    border: 4px #66cdaa solid;
    position: relative;
    z-index: 10;
}

.block:before {
    content: "";
    position: absolute;
    background: #fff;
    margin: 3px;
    border: 2px #7accb0 solid;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: -10;
}

.block {
    color: #fff;
    background: #f08080;
    padding: 20px;
    border: 1px dashed rgba(255,255,255,0.8);
    box-shadow: 0 0 0 5px #f08080;
    -moz-box-shadow: 0 0 0 5px #f08080;
    -webkit-box-shadow: 0 0 0 5px #f08080;
}

.block {
    position: relative;
    padding: 20px;
    z-index: 10;
    top: 0;
    left: 0;
}
.block:before, .block:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
}
.block:before {
    top: 0;
    left: 0;
    z-index: -10;
    background: #f5f5f5;
}
.block:after {
    top: 4px;
    left: 4px;
    z-index: -20;
    background: rgba(0,0,0,0.1);
    box-shadow: 4px 4px 0 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 0 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 4px 4px 0 0 rgba(0,0,0,0.2);
}