アクセスアップ SEO対策 ネット 便利ツール

トップページ ＞ ＣＳＳ

グレーの２重線　シャドウつき
/* box-shadow */
box-shadow:0px 0px 34px -4px #000000;
-moz-box-shadow:0px 0px 34px -4px #000000;
-webkit-box-shadow:0px 0px 34px -4px #000000;

 

/* border-radius */
border-radius:0px 0px 0px 0px ;
-moz-border-radius:0px 0px 0px 0px ;
-webkit-border-radius:0px 0px 0px 0px ;

 

/* border */
border:8px double #525252;

 

 

 

 

 

 

 

 

 

Ｈ２に最適
selector {
font-size: 20px;
text-shadow: 2px 2px 0px rgb(255, 255, 255);
background-image: -webkit-gradient(linear, left top, left bottom,color-stop(0, rgb(237, 237, 237)),color-stop(1, rgb(204, 204, 204)));
background-image: -moz-linear-gradient(-90deg,rgb(237, 237, 237) 0%,rgb(204, 204, 204) 100%);
background-image: linear-gradient(-90deg,rgb(237, 237, 237) 0%,rgb(204, 204, 204) 100%);
-webkit-box-shadow: 2px 2px 4px rgb(51, 51, 51);
-moz-box-shadow: 2px 2px 4px rgb(51, 51, 51);
-ms-box-shadow: 2px 2px 4px rgb(51, 51, 51);
box-shadow: 2px 2px 4px rgb(51, 51, 51);
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}

 

 

 

 

 

 

 

 

 

 

/* ribbon style */

 

ribon ribon2.ribbon-wrapper {
position: relative;
border-bottom: 25px solid #ccc;
border-top: 5px solid #ccc;
-moz-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
-webkit-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
-moz-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
-webkit-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
}
ribon ribon2 .ribbon-front {
background-color: black; height: 50px;
width: 950px;
position: relative;
left:-25px;
z-index: 2;
}

 

ribon ribon2 .ribbon-front,
ribon ribon2 .ribbon-back-left,
ribon ribon2 .ribbon-back-right
{
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

 

ribon ribon2 .ribbon-edge-topleft,
ribon ribon2 .ribbon-edge-topright,
ribon ribon2 .ribbon-edge-bottomleft,
ribon ribon2 .ribbon-edge-bottomright {
position: absolute;
z-index: 1;
border-style:solid;
height:0px;
width:0px;
}

 

ribon ribon2 .ribbon-edge-topleft,
ribon ribon2 .ribbon-edge-topright {
}

 

ribon ribon2 .ribbon-edge-bottomleft,
ribon ribon2 .ribbon-edge-bottomright {
top: 50px;
}

 

ribon ribon2 .ribbon-edge-topleft,
ribon ribon2 .ribbon-edge-bottomleft {
left: -25px;
border-color: transparent blue transparent transparent;
}

 

ribon ribon2 .ribbon-edge-topleft {
top: -5px;
border-width: 5px 25px 0 0;
}
ribon ribon2 .ribbon-edge-bottomleft {
border-width: 0 25px 25px 0;
}

 

ribon ribon2 .ribbon-edge-topright,
ribon ribon2 .ribbon-edge-bottomright {
left: 900px;
border-color: transparent transparent transparent blue;
}

 

ribon ribon2 .ribbon-edge-topright {
top: -5px;
border-width: 5px 0 0 25px;
}
ribon ribon2 .ribbon-edge-bottomright {
border-width: 0 0 25px 25px;
}

 

ribon ribon2 .ribbon-back-left {
position: absolute;
top: -5px;
left: -50px;
width: 50px;
height: 80px;
background-color: gray; z-index: 0;
}

 

ribon ribon2 .ribbon-back-right {
position: absolute;
top: -5px;
right: -50px;
width: 50px;
height: 80px;
background-color: red; z-index: 0;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

/* ribbon style */

 

.ribbon-wrapper {
position: relative;
}
.ribbon-front {
background-color: #ccf; height: 40px;
width: 140px;
position: relative;
left:-20px;
z-index: 2;
}

 

.ribbon-front,
.ribbon-back-left,
.ribbon-back-right
{
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

 

.ribbon-edge-topleft,
.ribbon-edge-topright,
.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
position: absolute;
z-index: 1;
border-style:solid;
height:0px;
width:0px;
}

 

.ribbon-edge-topleft,
.ribbon-edge-topright {
}

 

.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
top: 40px;
}

 

.ribbon-edge-topleft,
.ribbon-edge-bottomleft {
left: -20px;
border-color: transparent #99c transparent transparent;
}

 

.ribbon-edge-topleft {
top: -10px;
border-width: 10px 20px 0 0;
}
.ribbon-edge-bottomleft {
border-width: 0 20px 0px 0;
}

 

.ribbon-edge-topright,
.ribbon-edge-bottomright {
left: 100px;
border-color: transparent transparent transparent #99c;
}

 

.ribbon-edge-topright {
top: -10px;
border-width: 10px 0 0 20px;
}
.ribbon-edge-bottomright {
border-width: 0 0 0px 20px;
}

 

.ribbon-back-left {
position: absolute;
top: -10px;
left: 0px;
width: 0px;
height: 40px;
z-index: 0;
}

 

.ribbon-back-right {
position: absolute;
top: -10px;
right: 0px;
width: 0px;
height: 40px;
z-index: 0;
}

 

 

 

 

 

 

 

 

 

 

 

画像、すべてを光らせる方法

 

a:hover img{

 

opacity:0.7;

 

filter:alpha(opacity=70);

 

-ms-filter: “alpha( opacity=70 )”;

 

}

 

 

 

 

 

 

特定の画像だけ光らせる場合

 

光らせたい画像には以下のHTMLを追加
class=”hoverImg”

 

 

 

a:hover img　⇒　a:hover img.hoverImg　と変えましょう。

 

 

 

a:hover img.hoverImg{

 

opacity:0.8;

 

filter:alpha(opacity=80);

 

-ms-filter: “alpha( opacity=80 )”;

 

}