[CSS]あらゆる背景上で美しく機能する半透明なエレメントを実装するスタイルシート
Post on:2012年1月23日
sponsors
まるでガラスで作られた棚のように、美しい半透明な3Dのエレメントを実装するCSS3のテクニックを紹介します。
CSS3 Glass Shelf With Animated Icons
[ad#ad-2]
デモ
デモは「-webkit-perspective」を使用しているため、Safariでご覧ください。
デモでは異なるカラーをもったアイテムがホバーで浮かび上がり、半透明なので背景が透けて見えます。
デモページ：一番目をホバー
デモページ：二番目をホバー
デモページ：三番目をホバー
[ad#ad-2]
ちなみに、Firefoxなどでは半透明は美しいですが、3Dは描画されません。
デモページ：Firefoxのキャプチャ
実装
HTML
HTMLはシンプルで、各アイコンはa要素、ガラス棚はdiv要素で実装されています。
<div id="shelf"> <!-- Add icons here --> <a class="icon" href="#"></a> <a class="icon2" href="#"></a> <a class="icon3" href="#"></a> <!-- Surfaces of the shelf --> <div class="front"></div> <div class="back"></div> <div class="top"></div> <div class="bottom"></div> </div>
CSS
3Dの棚は「-webkit-perspective」を使用しており、現在対応ブラウザはSafariのみです。それ以外のスタイルはChrome, Firefoxでも美しく機能します。
body {
background: #2574b0;
}
#shelf {
-webkit-perspective: 500;
position: relative;
top: 50px;
width: 400px;
left: 300px;
}
.icon {
border: 1px solid rgba(0,0,0,0.27);
background-image: -webkit-gradient(linear, center top, center bottom, from(rgba(22,127,232,0.65)), to(rgba(0,60,123,0.65)));
background-image: -webkit-linear-gradient(top, rgba(22,127,232,0.65), rgba(0,60,123,0.65));
background-image: -moz-linear-gradient(top, rgba(22,127,232,0.65), rgba(0,60,123,0.65));
background-image: -o-linear-gradient(top, rgba(22,127,232,0.65), rgba(0,60,123,0.65));
background-image: -ms-linear-gradient(top, rgba(22,127,232,0.65), rgba(0,60,123,0.65));
background-image: linear-gradient(top, rgba(22,127,232,0.65), rgba(0,60,123,0.65));
-webkit-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
-moz-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
display: block;
position: absolute;
width: 40px;
height: 40px;
z-index: 50;
cursor: pointer;
top: -15px;
left: 50px;
-webkit-transition: all .2s ease;
}
.icon2 {
border: 1px solid rgba(0,0,0,0.27);
background-image: -webkit-gradient(linear, center top, center bottom, from(rgba(242,171,43,0.65)), to(rgba(225,123,25,0.65)));
background-image: -webkit-linear-gradient(top, rgba(242,171,43,0.65), rgba(225,123,25,0.65));
background-image: -moz-linear-gradient(top, rgba(242,171,43,0.65), rgba(225,123,25,0.65));
background-image: -o-linear-gradient(top, rgba(242,171,43,0.65), rgba(225,123,25,0.65));
background-image: -ms-linear-gradient(top, rgba(242,171,43,0.65), rgba(225,123,25,0.65));
background-image: linear-gradient(top, rgba(242,171,43,0.65), rgba(225,123,25,0.65));
-webkit-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
-moz-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
display: block;
position: absolute;
width: 40px;
height: 40px;
z-index: 50;
cursor: pointer;
top: -15px;
left: 128px;
-webkit-transition: all .2s ease;
}
.icon3 {
border: 1px solid rgba(0,0,0,0.27);
background-image: -webkit-gradient(linear, center top, center bottom, from(rgba(209,237,233,0.65)), to(rgba(0,191,162,0.65)), color-stop(3%, rgba(193,233,227,0.65)), color-stop(12%, rgba(177,228,220,0.65)), color-stop(90%, rgba(89,210,191,0.65)));
background-image: -webkit-linear-gradient(top, rgba(209,237,233,0.65), rgba(193,233,227,0.65) 3%, rgba(177,228,220,0.65) 12%, rgba(89,210,191,0.65) 90%, rgba(0,191,162,0.65));
background-image: -moz-linear-gradient(top, rgba(209,237,233,0.65), rgba(193,233,227,0.65) 3%, rgba(177,228,220,0.65) 12%, rgba(89,210,191,0.65) 90%, rgba(0,191,162,0.65));
background-image: -o-linear-gradient(top, rgba(209,237,233,0.65), rgba(193,233,227,0.65) 3%, rgba(177,228,220,0.65) 12%, rgba(89,210,191,0.65) 90%, rgba(0,191,162,0.65));
background-image: -ms-linear-gradient(top, rgba(209,237,233,0.65), rgba(193,233,227,0.65) 3%, rgba(177,228,220,0.65) 12%, rgba(89,210,191,0.65) 90%, rgba(0,191,162,0.65));
background-image: linear-gradient(top, rgba(209,237,233,0.65), rgba(193,233,227,0.65) 3%, rgba(177,228,220,0.65) 12%, rgba(89,210,191,0.65) 90%, rgba(0,191,162,0.65));
-webkit-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
-moz-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
display: block;
position: absolute;
width: 40px;
height: 40px;
z-index: 50;
cursor: pointer;
top: -15px;
left: 205px;
-webkit-transition: all .2s ease;
}
.icon:hover, .icon2:hover, .icon3:hover {
top: -22px;
}
.front, .back {
border: 1px solid rgba(0,0,0,0.27);
background-image: -webkit-gradient(linear, center top, center bottom, from(rgba(252,252,252,0.2)), to(rgba(191,191,191,0.2)), color-stop(3%, rgba(247,247,247,0.2)), color-stop(12%, rgba(242,242,242,0.2)), color-stop(90%, rgba(217,217,217,0.2)));
background-image: -webkit-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
background-image: -moz-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
background-image: -o-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
background-image: -ms-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
background-image: linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
-webkit-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
-moz-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
width: 300px;
height: 15px;
position: absolute;
left: 0;
top: 39px
}
.back {
width: 273px;
left: 13px;
top: 13px;
opacity: 0.2;
}
.top, .bottom {
border: 1px solid rgba(0,0,0,0.27);
position: absolute;
background-image: -webkit-gradient(linear, center top, center bottom, from(rgba(252,252,252,0.2)), to(rgba(191,191,191,0.2)), color-stop(3%, rgba(247,247,247,0.2)), color-stop(12%, rgba(242,242,242,0.2)), color-stop(90%, rgba(217,217,217,0.2)));
background-image: -webkit-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
background-image: -moz-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
background-image: -o-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
background-image: -ms-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
background-image: linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
-webkit-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
-moz-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
width: 287px;
height: 50px;
left: 6px;
-webkit-transform: rotateX(60deg);
}
.bottom {
top: 15px;
opacity: 0.2;
}
sponsors
