HOME>WEBプログラム覚書>[CSS3]写真の上のbox-shadow 半透明サンプル

[CSS3]写真の上のbox-shadow 半透明サンプル

写真の上に文字を載せたい時に使いそうなbox-shadowと半透明のサンプル

color: #555555;
background: rgba(255,255,255,0.5);

-moz-border-radius   : 10px;
-webkit-border-radius: 10px;
border-radius        : 10px;

-moz-box-shadow   : 0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.6);
box-shadow        : 0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.6);
    
color: #333333;
background: rgba(255,255,255,0.2);

-moz-border-radius   : 10px;
-webkit-border-radius: 10px;
border-radius        : 10px;

-moz-box-shadow   : 0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.6);
box-shadow        : 0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.6);
    
color: #FFFFFF;
background: rgba(0, 0, 0, 0);

-moz-border-radius   : 10px;
-webkit-border-radius: 10px;
border-radius        : 10px;

-moz-box-shadow   : 0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.6);
box-shadow        : 0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.6);
    
color: #FFFFFF;
background: rgba(0, 0, 0, 0.2);

-moz-border-radius   : 10px;
-webkit-border-radius: 10px;
border-radius        : 10px;

-moz-box-shadow   : 0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.6);
box-shadow        : 0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.6);
    
color: #FFFFFF;
background: rgba(0, 0, 0, 0.5);

-moz-border-radius   : 10px;
-webkit-border-radius: 10px;
border-radius        : 10px;

-moz-box-shadow   : 0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.6);
box-shadow        : 0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.6);
    
color: #FFFFFF;
background: rgba(0, 0, 0, 0.2);
box-shadow: -1px -1px 0 rgba(0,0,0,0.4),
            1px 1px 0 rgba(255,255,255,0.7),
            0 0 8px rgba(0,0,0,0.3) inset;
    
color: #FFFFFF;
background: rgba(255, 255, 255, 0.2);
box-shadow: 1px 1px 1px rgba(0,0,0,0.3),
            -1px -1px 0 rgba(255,255,255,0.7),
            0 0 8px rgba(0,0,0,0.3);
    
color: #FFFFFF;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 8px rgba(0,0,0,0.3);
    
color: #FFFFFF;
border: 1px solid #FFFFFF;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 8px rgba(0,0,0,0.3),
            0 0 8px rgba(0,0,0,0.3) inset;
    
color: #FFFFFF;
border: 1px solid #FFFFFF;
background: rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(255,255,255,0.8),
            0 0 10px rgba(255,255,255,0.8) inset;
    
color: #FFFFFF;
border: 3px solid #FFFFFF;
background: rgba(0, 0, 0, 0.5);

-moz-border-radius   : 10px;
-webkit-border-radius: 10px;
border-radius        : 10px;

box-shadow: 1px 1px 10px rgba(0,0,0,0.9);
    
投稿日 2012年3月16日 04:29
カテゴリ HTML/CSS
タグ CSS3 | サンプルコード
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1287

コメント

コメントする
Name
Email Address
URL