SimpleIsm

CSSのみで角丸&半透明

CSS

このタイトルぐっと来るべ?(何

まぁこの手のものには大体何か落とし穴があって、まぁ私の場合それはValidatorに通らないってことなんだけど。しかも結構ネックになってくるのはIEに適用させるってこと。半透明は何とかなったんだけど、角丸はJS使ったりとか、ファイルが2つ以上になってしまうので、今回は割愛。以下そのコード。

body {
   background: transparent url(back.gif) repeat fixed; /* 半透明を確認するため */
}

h1 {
   margin: 0;
}

/* Opera及び全てのブラウザに適用 */
.section {
   margin: 5%;
   padding: 5%;
   height: 500px;
   color: #ffffff;
   background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221%2E0%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20rx%3D%2215px%22%20ry%3D%2215px%22%20fill%3D%22%23000000%22%20stroke%3D%22%23000000%22%20stroke%2Dwidth%3D%221%22%2F%3E%3C%2Fsvg%3E);
   opacity: 0.5;
}

/* FxなどのGecko系に適用 */
.section,
x:-moz-read-only {
   border: 1px solid #000000;
   border-radius: 15px;
   -moz-border-radius: 15px;
   background-color: #000000;
   opacity: 0.5;
   -moz-opacity: 0.5;
}

/* SafariやChromeなどのWebKit系に適用 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
   .section {
      border: 1px solid #000000;
      border-radius: 15px;
      -webkit-border-radius: 15px;
      background-color: #000000;
      opacity: 0.5;
   }
}

/* IE6に適用 */
* html .section {
   border: 1px solid #000000;
   background-color: #000000;
   filter: alpha(opacity = 50);
}

/* IE7に適用 */
*:first-child + html .section {
   border: 1px solid #000000;
   background-color: #000000;
   filter: alpha(opacity = 50);
}

そのサンプル。要はそれぞれのブラウザ用にハックして、半透明と角丸を適用させるというもの。

意外とハマったのは、Operaに適用させるということ。Operaだけに適応させたいCSSハック - MOMIZINEを応用して、標準で最低限の見栄えを指定して、他の要素(半透明とか角丸)はそれぞれハックで指定するというもの。じゃあOperaはその最低限の見栄えでしか表示されないじゃん!ってなるけど、それは次の段落で説明。

ネックだったのはOperaでの角丸。ググってみると、Opera用のハックに-opera-border-radiusなるものがあったのだけど、上手く適用されないので、Operaで丸角を実現するCSSを試してみた (解決) - by edvakf in hatenaを参考に(というかまんまパクって)、SVG画像を作り、それをdata:スキームURLで指定し、エスケープした。ちなみに、エスケープする前のコードは<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="100%" height="100%" rx="15px" ry="15px" fill="#000000" stroke="#000000" stroke-width="1"/></svg>。これ、指定しても自分の環境ではOpera以外では適用されなかった。理由は不明。とりあえずこれが上記の理由(Operaのみに適用)。

角丸&半透明の例
Fx 3.5Safari 4Chrome 3Opera 10IE 6
Fx 3.5.6Safari 4.0.4Chrome 3.0.195.38Opera 10.10IE 6.0.2900.5512

まぁCSS3が勧告されて、それぞれのブラウザが対応すればborder-radiusopacityだけでこれができるので、早くそうなればいいと思います。…何年後かな?まぁそれができない状況であれやこれや試行錯誤するのも面白いのだけど。

ところで、今回の角丸&半透明やって気付いたのだけど、Operaはopacityを指定すると、内包されるテキストなども一緒に半透明になる様子。あと、a要素のリンクテキストはopacityを継承するっぽい。これは全てのブラウザで確認。

参考サイト
Operaだけに適応させたいCSSハック - MOMIZINE
Operaで丸角を実現するCSSを試してみた (解決) - by edvakf in hatena
文字列URLエスケープ
2009/12/27(Sun) 19:08
<<前の記事
雑記その119
次の記事>>
アバター雑感

Category

Archives