コピペで使えるカスタムCSS

見出し編

下線

h1 {
padding-bottom: .5em;
border-bottom: 1px solid #ccc;
}

下線(ダブル)

h1 {
border-bottom: 5px double #ccc;
}

上下に線

h1 {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding:10px;
}

左に5pxの線

h1 {
border-left:5px solid #24b2dd;
border-bottom:none;
padding-left: 15px;
}

左に線(ダブル)

h1 {
border-left: 16px double #24b2dd;
border-bottom:none;
padding-left: 15px;
}

左に5pxの線 + 下線

h1 {
border-left:5px solid #24b2dd;
border-bottom:1px solid #ccc;
padding-left: 15px;
}

枠線囲み

h1 {
border: 1px solid #ccc;
padding: 10px;
}

枠線囲み(太め)

h1 {
border: 6px solid #e2e2e2;
padding: 10px;
}

枠線囲み + 角丸

h1 {
border: 3px solid #e2e2e2;
border-radius: 6px;
padding: 10px;
}

背景色 + 角丸

h1 {
background-color:#f4f4f4;
border-radius: 6px;
padding: 10px;
}

枠線囲み + 背景色 + 角丸

h1 {
background-color:#f4f4f4;
border: 3px solid #e2e2e2;
border-radius: 6px;
padding: 10px;
}

ドット囲み

h1 {
border: 3px dotted #cccccc;
padding: 10px;
}

上下ドット + 背景色

h1 {
background-color:#f7f7f7;
border-top: 3px dotted #cccccc;
border-bottom: 3px dotted #cccccc;
padding: 10px;
}

グラデーション(グレー)

h1 {
background: linear-gradient(white, #e2e2e2);
padding-left:10px;
}

グラデーション(グレー) + 下線

h1 {
border:none;
background: linear-gradient(white, #f4f4f4);
border-bottom:3px solid #cccccc;
padding-left:10px;
}

グラデーション(グレー) + 下線 + 角丸

h1 {
border-radius: 6px;
background: linear-gradient(white, #f4f4f4);
border-bottom:3px solid #cccccc;
padding-left:10px;
}

グラデーション(グレー) + 上だけ角丸

h1 {
background: linear-gradient(#f4f4f4, #ffffff);
border-top: 3px solid #cccccc;
border-left: 3px solid #cccccc;
border-right: 3px solid #cccccc;
border-bottom:none;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding:10px;
}

グラデーション(右からブルー30%) + 下線

h1 {
border-bottom:1px solid #7db9e8;
background: linear-gradient(to right, #ffffff 70%,#7db9e8 100%);
}

グラデーション70%濃→薄(ブルー)

h1 {
background: linear-gradient(to right, #05549b 70%,#7db9e8 100%);
color:#ffffff;
padding:10px;
}

グラデーション70%濃→薄(オレンジ) + テキストドロップシャドウ

h1 {
background: linear-gradient(to right, #f97f06 70%,#fbb03b 100%);
color:#ffffff;
padding:10px;
text-shadow: -2px 2px 0 #666666;
}

グラデーション70%濃→薄(黄緑) + テキストボックスシャドウ

h1 {
background: linear-gradient(to right, #8cc63f 70%,#aee25a 100%);
border: medium none;
box-shadow: -12px 3px 5px #999;
color: #fff;
padding: 10px;
text-shadow: -2px 2px 2px #222;
}

内側のドロップシャドウ

h1 {
background-color: #f4f4f4;
border: medium none;
box-shadow: 2px 2px 5px #ccc inset;
padding: 10px;
}