[CSS]あらゆる背景上で美しく機能する半透明なエレメントを実装するスタイルシート

Post on:2012年1月23日

まるでガラスで作られた棚のように、美しい半透明な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

  • Xでシェアする
  • Facebookでシェアする
  • はてなでブックマークする
  • Raindropに保存する

top of page

©2025 coliss