コピペで使える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);
}
こんな記事も書きました!
-
-
WordPressにヘッダー画像機能(カスタムヘッダー)がない場合の作り方
カスタマイズサポートにてヘッダー画像の導入方法を尋ねられることが多々あるので 設定手順を公開してお...
-
-
無料で簡単にロゴを作れるツール「LOGASTER」が斬新!
Webサイトを作るときって、ただのテキストタイトルを表示するよりも独自のロゴがあれば締まるのにな~っ...
-
-
ローディング・読み込み中の画像を簡単に作成できるツール
ページを読み込みする時などに使う「ローディング画像」は ジェネレーターで簡単に作成することができま...
-
-
名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書きました。
mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、 ちょっとお手すきになった...
-
-
CSSでテーブル使わずに簡単レスポンシブ!下線だけ引いて横並びデザイン
こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。 デザインは、下...
-
-
WordPressでCSSの反映を確認しながら編集する方法
CSS編集方法についての前置き 「管理画面」→「外観」→「テーマ編集」→「スタイルシート」から ...
-
-
CSSでヘッダーの真ん中に吹き出しっぽい三角をつけてみた
アメブロからWordPressへと個人ブログを移すにあたって「どんなデザインでサイトを作ろうかなー」...
-
-
WordPressをカスタマイズする前に子テーマを作っておく
子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...
-
-
コピペで使える固定ソーシャルボタンBOX
WordPressでスクロール時も固定表示されるソーシャルボタンを 簡単に設置するためのテンプレー...
-
-
CORE(TCD027)でトップページの新着記事一覧にページナビをつける
先日導入したCORE(TCD027)テーマについてのカスタマイズ記事でございます。 トップペー...