cssで作るタイトルやテキストの装飾色々メモ

タイトルの背景を斜めボーダーにしたい

斜めボーダー背景。
色の組み合わせで色々な雰囲気がつくれる。
ただ、背景に柄が入ると中のテキストが読みにくくなるので、色は注意！
HTMLは入れ子にしています。

<div class="sankaku">
<div class="stripe">タイトルの背景を斜めボーダーにしたい</div>
</div>

.stripe{
	color:#fff;
	font-size:1.8em;
	padding:20px;
	margin:0 auto;
	text-align:center;
	border: 1px solid #000;
  	background-image: linear-gradient(
    -45deg,
    #00bcd4 25%,
    #9a9a9a 25%, #9a9a9a 50%,
    #00bcd4 50%, #00bcd4 75%,
    #9a9a9a 75%, #9a9a9a
    );
  	background-size: 22px 22px;
	}

タイトルの左右に画像を配置

デザインとしてはよくあるボーダーと、画像配置バージョン。

タイトルの左右に画像を配置

.titlebgImg{
	font-size:1.8em;
	padding:20px;
	margin:0 auto;
	text-align:center;
	position:relative;
	}
.titlebgImg:before, 
.titlebgImg:after{
	content:url('画像のパス');
	position:relative;
	margin: 0 15px;
	top:3px;
	}
.title_border:before{left:0;}
.title_border:after{right:0;}

タイトルの左右にボーダー

前後に線がひいてあるのも使いやすいです。
テキストはセンターで使うのがバランス良いですね。

.title_border{
	font-size:1.8em;
	padding:20px;
	margin:0 auto;
	text-align:center;
	position:relative;
	}

.title_border{background:#fff;}
.title_border:before, 
.title_border:after{
	content:"";
	display:inline-block;
	width:20%;
	height:2px;
	background:#000;
	position:absolute;
	top:50%;
	}

タテキストにグラデーションをかけたい

.grad p{
	background: -moz-linear-gradient(top, #21b7d0, #999);
	background: -webkit-linear-gradient(top, #21b7d0, #999);
	background: linear-gradient(to bottom, #21b7d0, #999);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}