display: table-cellとcontent: ""による画像置換
display: table-cellした要素の中で疑似要素を使った画像置換をcontent: ""(空文字指定)でやると、Internet Explorer 9以外の現行ブラウザーでは謎の空白が出来てしまう現象に遭遇した。説明難しい。IE9以外で同じ挙動なので多分仕様に従ったものなんじゃないかなーとは想像できるんだけど、どうしてこうなるのかよくわからないのでメモがてら書いておく。直す方法だけは一応発見した。 Demo: display: table-cell and content: "" for image replacement デモではdisplay: table-cellとしたdiv要素の中で、疑似要素を使ってテキストを追い出す形の画像置換を行なっている。contentプロパティーで空文字を指定している場合画像置換で表示した画像の下に空白が(一行分？)できている。.irというクラ
こんにちは！ SVGグラデーション！
複雑でないCSSグラデーションの代わりにSVGグラデーション(をData URIスキーム化したもの)を利用するようにしました。懸念していたFirefoxのバグも直る(直った？)みたいだし、ちょっとやってみたかったので。 SVGの作成はエディタでやってます。 <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.0"> <defs> <linearGradient x1="0" y1="0" x2="0" y2="100%" id="gradient"> <stop offset="0%" style="stop-color: ${from:rgb()}; stop-opacity: 1;"/> <stop offset="100%" style="stop-color: ${to:rgb()}; s
CSSグラデーションとSVGグラデーションのサイズの比較
単純なものならあまり変わらないような気がしたので実際に比較してみます。 比較するグラデーションはCSSグラデーションで書くと linear-gradient(top, rgba(255, 0, 0, 0.5) 0, rgba(0, 0, 255, 0.5) 100%) という縦方向に半透明の赤から半透明の青に変化するものです。 CSSグラデーションでは、各ベンダー拡張プリフィックスを並べることになります。 background-image: -moz-linear-gradient(top, rgba(255, 0, 0, 0.5) 0, rgba(0, 0, 255, 0.5) 100%); background-image: -webkit-linear-gradient(top, rgba(255, 0, 0, 0.5) 0, rgba(0, 0, 255, 0.5) 100%);
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
