サイト制作メモ

投稿日: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;
}

- サイト制作メモ

関連記事

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 ...

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

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

cssだけでドロップダウンメニューを実装(軽い!)

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 まずはhtml 一般的な入れ子構造のリストです。 <heade ...

"Swiper"を使ったスライドで左右に画像を表示する

JQueryなしで動く"Swiper"という便利なプラグインを使ってのスライドショー。 左右に画像を表示したい時の注意点をメモ。 ダウンロードはこちらから swiper公式サイト 使う中ですごく分かり ...

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか?私は結構あります。で、ジェネ ...

翻訳する