CSS3アニメーションでブラー効果をかっこよく使ったナビゲーションを実装するチュートリアル | コリス
アニメーションを伴ったテキストシャドウや半透明を利用して、ブラーのエフェクトを使ったナビゲーションを実装するCSS3のチュートリアルを紹介します。
サイトのキャプチャ
Blur Menu with CSS3 Transitions
7つのデモ
7つのデモの実装
7つのデモ
デモは7種類あり、共通するアイデアはホバーしている時に他のアイテムをブラーでぼんやりとさせ、そのアイテム自体を強調することです。
デモのキャプチャ
デモページ
対応ブラウザは、Chrome, Safari, Firefox, Operaです。
IEは、IE9でまだテキストシャドウやアニメーションはサポートされていません。
7つのデモの実装
HTML
メニューはすべてリスト要素で実装しており、固定幅を指定します。
?
1
2
3
4
5
6
7
8
各デモごとに実装のポイントを紹介します。
その前に、デモ全部の基本となるスタイルです。
?
1
2
3
4
5
6
7
8
9
.bmenu{
padding: 0px;
margin: 0 0 10px 0;
position: relative;
}
.bmenu li{
font-size: 50px;
display: block;
}
デモのキャプチャ
デモ：Example 1
1番目のデモではメニューは最初にブラーで表示させるため、リンクエレメントに透明なカラーとホワイトのテキストシャドウを与えます。
?
1
2
3
4
5
6
7
8
9
10
11
12
.bmenu li a{
color: transparent;
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 5px #fff;
letter-spacing: 1px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
デモのキャプチャ
ホバー時には明確に表示させます。
右に10pxスライドさせることで、このエフェクトをより効果的にしています。
?
1
2
3
4
5
6
7
8
.bmenu:hover li a{
text-shadow: 0px 0px 5px #0d1a3a;
}
.bmenu li a:hover{
color: #fff;
text-shadow: 0px 0px 1px #fff;
padding-left: 10px;
}
デモのキャプチャ
デモ：Example 2
2番目のデモでは、メニューが最初に少し歪んでいます。これは「-12deg」で歪めており、RGBaを使用して半透明の状態にしています。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.bmenu li a{
display: block;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(89,22,20,0.3);
color: #581514;
padding: 5px 20px;
margin: 2px;
background: rgba(255,255,255,0.2);
letter-spacing: 1px;
-webkit-transform: skew(-12deg);
-moz-transform: skew(-12deg);
-o-transform: skew(-12deg);
-ms-transform: skew(-12deg);
transform: skew(-12deg);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
デモのキャプチャ
ホバー時には歪みがなくなり、背景が透明になります。また、他のものはぼんやりとさせます。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.bmenu:hover li a{
color: transparent;
text-shadow: 0px 0px 10px #fff;
background: rgba(88,22,22,0.2);
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
-ms-transform: skew(0deg);
transform: skew(0deg);
}
.bmenu li a:hover{
background: transparent;
text-shadow: 1px 1px 10px rgba(89,22,20,0.6);
color: #581514;
}
デモのキャプチャ
デモ：Example 3
3番目のデモは、エレメントのサイズを変更させます。最初は縮小されており少しぼんやりしています。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.bmenu li a{
white-space: nowrap;
color: transparent;
display: block;
text-transform: uppercase;
text-align: center;
text-shadow: 0px 0px 6px #fff;
letter-spacing: 1px;
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
transition: all 0.6s linear;
}
デモのキャプチャ
ホバー時にはサイズが大きくなると共に、くっきりします。
?
1
2
3
4
5
6
7
8
9
10
11
.bmenu:hover li a{
text-shadow: 0px 0px 15px #fff;
}
.bmenu li a:hover{
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
デモのキャプチャ
デモ：Example 4
4番目のデモは、半透明のブラックな背景に輝くようなオレンジのカラーをテキストに与えています。ここでは、線形のアニメーションを使っています。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.bmenu li a{
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 2px #eeb213;
color: #eeb213;
padding: 5px 20px;
margin: 2px;
background: rgba(0,0,0,0.7);
letter-spacing: 1px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
デモのキャプチャ
ホバー時にはくっきりし、他のものはより透明になります。
?
1
2
3
4
5
6
7
8
9
.bmenu:hover li a{
text-shadow: 0px 0px 10px #eeb213;
color: transparent;
background: rgba(0,0,0,0.2);
}
.bmenu li a:hover{
background: rgba(0,0,0,1.0);
text-shadow: 0px 0px 1px #eeb213;
}
デモのキャプチャ
デモ：Example 5
5番目のデモは繊細なエフェクトです。テキストシャドウとフォントカラーにホワイトを使用し、少しぼんやりと表示させます。
?
1
2
3
4
5
6
7
8
9
10
11
12
.bmenu li a{
color: transparent;
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 4px #fff;
letter-spacing: 1px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
デモのキャプチャ
ホバー時にはテキストシャドウを1pxにし、くっきりさせています。1番目のデモと同様に右にスライドさせるのがポイントです。
?
1
2
3
4
5
6
7
8
.bmenu:hover li a{
text-shadow: 0px 0px 6px #fff;
}
.bmenu li a:hover{
color: #fff;
text-shadow: 0px 0px 1px #fff;
padding-left: 10px;
}
デモのキャプチャ
デモ：Example 6
6番目のデモは、エレメントに半透明のホワイトの背景を与えています。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.bmenu li a{
white-space: nowrap;
display: block;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(71,80,23,0.3);
color: #fff;
padding: 5px 20px;
margin: 2px;
background: rgba(255,255,255,0.2);
letter-spacing: 1px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
メニューが一つのユニットに見えるよう、最初と最後に角丸を適用しています。
?
1
2
3
4
5
6
7
8
9
10
.bmenu li:first-child a{
-webkit-border-radius: 15px 15px 0px 0px;
-moz-border-radius: 15px 15px 0px 0px;
border-radius: 15px 15px 0px 0px;
}
.bmenu li:last-child a{
-webkit-border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
border-radius: 0px 0px 15px 15px;
}
デモのキャプチャ
ホバー時には透明にくっきりとさせ、他のものはぼんやりとさせます。
?
1
2
3
4
5
6
7
8
9
.bmenu:hover li a{
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
.bmenu li a:hover{
background: transparent;
text-shadow: 1px 1px 10px rgba(71,80,23,0.6);
color: #c4d85a;
}
デモのキャプチャ
デモ：Example 7
最後の7番目のデモでは、メニューのアイテムの幅と高さに対して半分の値になるようにサークルの半径を設定しています。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.bmenu{
padding: 50px 0px;
margin: 0 auto;
position: relative;
background: rgba(0,0,0,0.7);
width: 500px;
height: 400px;
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
border-radius: 250px;
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
まずは、ホバー時に背景がより透明になるようにします。
?
1
2
3
.bmenu:hover{
background: rgba(0,0,0,0.2);
}
フォントサイズとリストエレメントの高さを調整します。
?
1
2
3
4
5
.bmenu li{
font-size: 40px;
display: block;
line-height: 66px;
}
最初は、エレメントは縮小され、ぼんやりと表示されます。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.bmenu li a{
white-space: nowrap;
color: transparent;
display: block;
text-align: center;
text-transform: uppercase;
text-shadow: 0px 0px 3px #fff;
letter-spacing: 1px;
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
デモのキャプチャ
ホバー時にはオリジナルのサイズになりくっきりと表示されます。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
.bmenu:hover li a{
text-shadow: 0px 0px 10px #fff;
}
.bmenu li a:hover{
text-shadow: none;
color: #fff;
background: rgba(129,6,29,0.8);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
Related Posts
[CSS]CSS3 Transitionsを使用して、ホバー時に繊細なアニメーションを与えるスタイルシート [はてなブックマークで表示] [コメントビューワーで表示]
[CSS]ホバー以外にも使ってみたいCSS3アニメーションのテクニック
[CSS]さりげなく、美しくて分かりやすいテーブルにするCSS3のチュートリアル
[CSS]にょいーんとアニメーションでパネルを表示するスタイルシート
[CSS]画像のキャプションを省スペースにさりげなく表示させるスタイルシート
