サイト制作メモ

投稿日:2018年7月5日 更新日:

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%;
	}

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

テキストにグラデーションをかけたい。
複数行にした時、iphoneで2行目以降グラデが表示されずテキストも見えない現象が起こったが、グラデのテキスト切り抜きの指定が原因ではなくその他の書き方が原因だったようだ。

.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;
}

- サイト制作メモ

関連記事

簡単な背景画像のパララックス

jquaryをリンクさせる htmlファイルでsection毎に背景画像を設定 cssにて。 width:100%; background:url()center center no-repeat f ...

cssでlistのborderを斜め線にする

このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 まずはHTMLでメニュー作成 普通にリストで作成 ...

tableのwidth幅指定のメモ

サイト制作している時、 時々テーブルを使うけどIEやfirefoxでwidth指定がきかなかったので対応のメモ。 thやtdに対して幅を指定する場合 Chromeならcalc();が使えるけど、IEで ...

jQueryで実装!画像の無限ループスライダー

よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 jQueryで無限ループスライダー 無限 ...

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url('画像を指定'); background-size:cover; でできますが、 いやいや、一画面だけでなくその下にもコンテンツがあっ ...

翻訳する