Webサイト制作

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

- Webサイト制作
-

関連記事

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

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

ページ読み込み時にフェードインのエフェクト【超簡単!】

jQueryの取扱が苦手な私でもすぐに実装することができたフェードインエフェクト。 トップのイメージ画像の上にテキストをふわっと表示させたいなーと思い調べてたら、かなりシンプルな記述でフェードインエフ ...

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

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

Amazon Product Advertising APIを使って気づいた事

目次1 APIの使い方が分からない時は2 最低価格(MinPrice)、最高価格(MaxPrice)の結果がおかしいと思ったら2.1 価格は*100にします3 一度に取得できる情報の件数4 よく分から ...

no image

角丸テーブルのスタイル指定

時々使うテーブルの角丸仕様、毎回調べてる気がする。。 ポイントはborder-collapse border-collapse: collapse;ではなくborder-collapse: separ ...