Backup of blog/2010-05-16 (3) Back
Back to History list
#navi(../)
*ボタンを画像なしでカスタマイズせよ！ [#r87943a0]
さて、もうお気づきかと思うが、最近Googleのボタンのデザインが変わった。ソースを見ても画像が使われていない。これも、CSSだけでやっているらしい。というわけで、前回の[[角丸半透明ボックスにドロップシャドウ>../2010-05-14]]に続いてボタンをカスタマイズしてみようと思う。
まず、ボタンに関するタグだが、ここでは「擬似クラス」というものを使って、指定されたタグでなおかつ指定された属性のみを選択するようにする。ボタンに関係するタグは、buttonタグと、inputタグのtype属性がsubmitとresetのものである。したがってCSSで選択する場合以下のようになる。まぁ、厳密には、imageも含まれるだろうが、今日日のサイトで使っているのを見たことが無いので除外。
-input[type='submit']
-input[type='reset']
-input[type='button']
-button
とりあえず、灰色のボタンを作ろう。ただ、普通に作るとボタン同士がくっついてしまうので、margin:2px;を追加。
#code(css){{
input[type='submit'], input[type='reset'], input[type='button'], button {
text-decoration: none;
border:1px solid grey;
color:black;
background-color: gainsboro;
margin:2px;
}
}}
#ref(button1.png,nolink)
では、グラデーションを加える。Operaではグラデーションが使えないので例によって[[Gradient CSS Generetor>http://cyokodog.web.fc2.com/cyokolab/html/gradient_css_generator.html]]を使う。高さは32ぐらいでいいだろう。
#code(css){{
input[type='submit'], input[type='reset'], input[type='button'],button {
text-decoration: none;
border:1px solid grey;
color:black;
background-color: gainsboro;
margin:2px;
/* MSIE */
filter:
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=white,EndColorStr=gainsboro);
/* FireFox */
background: -moz-linear-gradient(top, white, gainsboro);
/* Safari / Chrome */
background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
/* other */
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAc0lEQVQImQXBhQ3DAADAsPx/Y0llmMqkUmbzfZ+87yvP88h933Jdl5znKcdxyL7vsm2brOsqy7LIPM8yTZOM4yjDMEjf9/L7/aTrOmnbVpqmkbqupaoqKctSiqKQPM8lyzJJ01SSJJE4jiWKIgnDUIIg8A9qu3jB7icwNQAAAABJRU5ErkJggg==");
background-repeat:repeat-x;
}
}}
#ref(button2.png,nolink)
どうだろうか。これだけで立体感が出る。
こんどは、box-shadowで影をつけてみよう。なお、IEはこれと同等の処理がないためShadowフィルタで代用する。
#code(css){{
input[type='submit'], input[type='reset'], input[type='button'],button {
text-decoration: none;
border:1px solid grey;
color:black;
background-color: gainsboro;
margin:2px;
/* CSS3 */
box-shadow: 0 1px 2px rgba(0,0,0,.2);
/* MSIE */
filter:
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=white,EndColorStr=gainsboro)
progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#333333');
/* FireFox */
background: -moz-linear-gradient(top, white, gainsboro);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
/* Safari / Chrome */
background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
/* other */
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAc0lEQVQImQXBhQ3DAADAsPx/Y0llmMqkUmbzfZ+87yvP88h933Jdl5znKcdxyL7vsm2brOsqy7LIPM8yTZOM4yjDMEjf9/L7/aTrOmnbVpqmkbqupaoqKctSiqKQPM8lyzJJ01SSJJE4jiWKIgnDUIIg8A9qu3jB7icwNQAAAABJRU5ErkJggg==");
background-repeat:repeat-x;
}
}}
#ref(button3.png,nolink)
ちなみに、IEはこうなる。まぁ仕方が無いね。
#ref(button3ie.png,nolink)
*ボタンはやっぱり角丸じゃないと・・・ [#x6fa1cc4]
border-radiusを使って角丸ボタンにする。なお、ここからさきは、IEでは効果がでない。
#code(css){{
input[type='submit'], input[type='reset'], input[type='button'],button {
text-decoration: none;
border:1px solid grey;
color:black;
background-color: gainsboro;
margin:2px;
/* CSS3 */
box-shadow: 0 1px 2px rgba(0,0,0,.2);
border-radius: .5em;
/* MSIE */
filter:
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=white,EndColorStr=gainsboro)
progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#333333');
/* FireFox */
background: -moz-linear-gradient(top, white, gainsboro);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-border-radius: .5em;
/* Safari / Chrome */
background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: .5em;
/* other */
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAc0lEQVQImQXBhQ3DAADAsPx/Y0llmMqkUmbzfZ+87yvP88h933Jdl5znKcdxyL7vsm2brOsqy7LIPM8yTZOM4yjDMEjf9/L7/aTrOmnbVpqmkbqupaoqKctSiqKQPM8lyzJJ01SSJJE4jiWKIgnDUIIg8A9qu3jB7icwNQAAAABJRU5ErkJggg==");
background-repeat:repeat-x;
}
}}
#ref(button4.png,nolink)
*最近話題のtext-shadowを使う [#c81e2642]
最近text-shadowを使っているサイトが増えてきた。結構昔からある要素だが、IEのシェア低下と、CSS3の広がりから話題になり始めている。これは、ブラウザ依存の要素ではないため、単純に text-shadow:と入れるだけで反映される。
#code(css){{
input[type='submit'], input[type='reset'], input[type='button'],button {
text-decoration: none;
border:1px solid grey;
color:black;
background-color: gainsboro;
margin:2px;
/* CSS3 */
box-shadow: 0 1px 2px rgba(0,0,0,.2);
border-radius: .5em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
/* MSIE */
filter:
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=white,EndColorStr=gainsboro)
progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#333333');
/* FireFox */
background: -moz-linear-gradient(top, white, gainsboro);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-border-radius: .5em;
/* Safari / Chrome */
background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: .5em;
/* other */
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAc0lEQVQImQXBhQ3DAADAsPx/Y0llmMqkUmbzfZ+87yvP88h933Jdl5znKcdxyL7vsm2brOsqy7LIPM8yTZOM4yjDMEjf9/L7/aTrOmnbVpqmkbqupaoqKctSiqKQPM8lyzJJ01SSJJE4jiWKIgnDUIIg8A9qu3jB7icwNQAAAABJRU5ErkJggg==");
background-repeat:repeat-x;
}
}}