見出しをアニメーションにしてみる～などCSS3でできること

2017.04.04

css3になってアニメーションをウェブページに簡単に導入できるようになりました。
イメージに動きをつけたり、テキストにおもしろい動きをつけることも、おもしろいボタンを作ることも出来るようになりました。

ここでは実際に使いたいCSSアニメーションを作ってみて、コードを記録しておこうと思います。
もし使ってみたいものがありましたら自由にコピーして下さい。

見出しやタイトルに変化をつける

見出しに変化をつけたいと思います。
見出しのテキストをフェードインにして丸い枠で囲みます。ついでに背景に画像を使用しました。
こんな感じです。

見出しをフェードインに、背景画像、ボーダーを丸くした例

フェードインは２秒間に設定していますので、上の見出しの動きを見たい場合には、ブラウザの「更新ボタン」を押して下さい。

コードは以下の通りです。

<h3 class="fadein-title">見出しをフェードインに、背景画像、ボーダーを丸く</h3>

/* 見出しをフェードイン */
.fadein-title {
	animation: fadeIn 2s ease 0s 1 normal;
		-webkit-animation: fadeIn 2s ease 0s 1 normal;
	background: url(***.jpg) no-repeat;
	padding: 10px;
	border-radius: 4px;
	border: solid 1px #ccc;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

背景画像は任意に設定してください。

参照ページへのリンクボタン

ボタンをイメージでは無くCSSで作ります。
関連する自サイト内のリンクをテキストリンクでは無くボタンにしたいけれど、imgタグを入れるのが面倒なのと、リンクを少し目立たさせたいという時などに便利です。

》》詳しくはこちら

コードは以下の通りです。

<a class="link-button" href="リンク先URL" title="リンク先タイトル">&#12299;&#12299;詳しくはこちら</a>

.link-button {
	display: inline-block;
	width: 180px;
	height: 48px;
	text-align: center;
	text-decoration: none;
	line-height: 48px;
	outline: none;
	border-radius: 4px;
	position: relative;
	z-index: 2;
	background-color: #ddd;
	border: 2px solid #333;
	color: #000;
	line-height: 44px;
	overflow: hidden;
}
.link-button::before,
.link-button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.link-button,
.link-button::before,
.link-button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.link-button:hover {
	color: #fff;
}
.link-button::after {
	top: -100%;
	width: 100%;
	height: 100%;
}
.link-button:hover::after {
	top: 0;
	background-color: #333;
}

画像の上に文字を乗せる

画像の上に文字を乗せるには、背景画像にしてその上に文字を乗せることが出来ます。
しかし、この場合は画像の種類が増えると、画像の種類分のコードが必要になります。
CSS3だと、画像の上にテキストを重ねることが簡単に出来ます。

HTML5では「figure」というタグを使えるようになりましたので、<div>の代わりに<figure>を使います。画像の上のテキスト部分は<figure>～</figure>の中に<figcaption>タグを入れ子にします。

コードは下です。

<figure class="on-img">
<img src="***.jpg" alt="">
<figcaption class="img-text">画像の上にテキストを重ねます</figcaption>
</figure>

.on-img {
	position: relative;
}

.img-text {
	position: absolute;
	bottom: 50px;
	width: 100%;
	max-width: 620px;
	color: #fff;
	background-color: rgba(255,5,55,0.3);
	padding: 10px;
	font-size: 1.5em;
	text-align: center;
}

画像の最大サイズ巾640pxの場合で設定しています。
テキスト背景色は「rgba」指定により透過色を使っています。