CSSとSVGで曇りガラスのような効果を作る
2011年の9月に「CSSとSVG filterでガラスっぽい効果をつける」というのを書きましたが、これはFirefoxのみを対象としたものでした。 そこで今回はできるだけ多くのブラウザに対応したものを作ってみます。 完成品Frosted glass effect with CSS & SVG 背景画像にはWetFoto.comによる#246 Wetlook with Beautiful Brunette in Leggings and Jacket. Girl in black jacket, white wetlook leggings and skirt in boots, get wet fully clothed in the sea.を使用しています（リンク先はFlickrです）。 この画像はCC BY-NC-SA 2.0でライセンスされています。 背景画像にはBeryl Ch
CSS Filter Effects!
「CSS Filter Effects」の紹介をしてみたいと思います。 現在、このプロパティはWebkit nightlyとGoogle Chrome Canaryで使うことができます。たぶんdevとかにももうすぐ来るんじゃないでしょうか。 Filter Effects 1.0 - 5. The ‘filter’ property 2011年12月16日版を参考に書いていきたいと思います。 サンプルページは以下です。 CSS Filter Effects Sample このサンプルの画像は、通常だと次のように表示されます。 左側がjpg画像で、右側はハートの外側が透過されているpng画像です。 これにフィルタをかけていきます。 なお、スクリーンショットはWindows版Google Chrome 18.0.982.0 canaryで表示したときのものです。 このプロパティをWebkitで使
News Links N.26: 2011-11-04 | Unformed Building
10月28日から11月4日までのまとめです。 time 要素がなくなったことに関する話題が多いです。復活するかも、という話もありますが……。 他には jQuery 1.7 リリース、CSS transition のテクニック、SVG を始めてみよう的な記事など。 HTML & CSS CSS3 in practice, maddesigns (Sven Wolfermann) #css3 CSS3 でできることのスライド。メジャーどころのプロパティの解説です。 The WHATWG Blog — WHATWG Weekly: Now it’s <time> for <data> time 要素がなくなるそうです。替わりに使えるのは data 要素。 Bruce Lawson’s personal site : Goodbye HTML5 <time>, hello <data>! time
SVG & CSSでアンサガのスキルパネルのようなメニューを作る
「SVGにチャレンジ！ 第1回」です。第2回があるかは分かりません。 インラインSVGを使って『アンリミテッド：サガ』というゲームのスキルパネル風のメニューを作ります。 実物は「アンリミテッドサガ スキルパネル」とかで画像検索してみてください。 このスクエアさんの『アンリミテッド：サガ』というゲームがすごく好きでですね……以前からこれをウェブページとして作ってみたいと思っていたんですよ。 クリッカブルマップとかも考えましたが、あれあまり好きじゃない。 というわけでSVGでやることにしました。拡大しても綺麗ですしね！ Unlimited Saga Style Panel Menu with SVG & CSS デモファイルをダウンロード 表示確認で一番期待通りに表示できたのは、Firefox 7とChrome 16 devです。 IE 9とSafari 5.1は、transitionしません
三角形のキャプションがスライドインするイメージギャラリー
『Wixel』を見ていて、ナビゲーションの見せ方が面白いなーと思ったので、CSS Transitionsを使ってギャラリーに応用してみました。 まあ練習にはなったかなと思いますｗ ギャラリー "旧古河庭園にて" デモファイルをダウンロード どうでもいいですが写真は自分で撮ったものです。 もっと見たい方は「34 Photos @ 旧古河庭園 :: mlog」をどうぞ。 まずはHTMLから。 aの中にdivが入ってます。これが気持ち悪い場合には違う方法も取れますが、それについては後で書きます。 <ul class="gallery"> <li> <a href="#"> <img src="images/01.jpg" width="200" height="200" alt="" /> <div class="caption"><span>洋館</span></div> </a> </li>
News Links N.22: 2011-09-30 | Unformed Building
9月22日から9月29日までのまとめです。 CSS コードをテストしてシェアできる labcss、CSS でデザインしたボタンの共有サービス CSS Button、Sass や CoffeeScript も使えるコード共有サービス Tinkerbin、Metro UI 風デザインのサイトなど。 HTML & CSS labcss – create & experiment CSS のコードをテストしたり、シェアしたりできるサービス。下のプレビューから要素をクリックするとサイドバーから簡単にスタイルをいじれます。 CSS3 Image Styles 画像に様々なスタイルを適用するチュートリアル。 Metro style appのために拡張されているCSS(フォーム編) – ういはるかぜの化学 – subtech タイトル通り。スクロール編はこちら。 Scalable and Modular
CSSとSVG filterでガラスっぽい効果をつける
SVGのフィルタについては以前も少し書きましたが、今回はfeGaussianBlur要素を使って、ガラスのようなエフェクトを付けてみたいと思います。 デモページは以下ですが、たぶんFirefoxでしかちゃんと見れないと思います。 Glass effect with CSS & SVG filter デモファイルをダウンロード 背景にはrachel a. k.さんの「52. she’s gone where the goblins go」を使用しています。 この画像はCC BY-NC-SA 2.0でライセンスされています。 今回作ったSVGファイルにはこんな感じのが書かれています。 <?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000
CSS3での背景指定方法のまとめ
CSSであれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3現在の仕様です。CSS 背景 & ボーダー モジュール Level 32011年2月15日版の仕様の日本語訳です。プロパティと値の説明はこちらを参考にしました。背景のレイヤー背景は複数のレイヤーを持つことができ、レイヤーの数はbackground-imageに指定されたカンマ区切りの値の数によって決められます。noneの指定も一つのレイヤーを生成します。 背景レイヤーの重なり方ですが、初めに指定したものから手前に来ますので、注意してください。 例として、下のr
Google Chromeでtext-shadowしたフォントの表示がおかしくなる条件と対処法
Google Chromeでtext-shadowしたフォントの表示がおかしくなることがあったのでちょっと調べてみました。 Arialやメイリオといったアンチエイリアスのかかったフォントが汚くなったり、ビットマップフォントにアンチエイリアスがかかってしまう現象です。 環境はWindows Vista/7でのGoogle Chrome 13.0.772.0 dev-mです。 CSS text-shadow on Google Chrome Test 上段がConsolas指定、下段がMS Gothic指定です。 スクリーンショットは以下の通り。 Google Chromeは一部のtext-shadowにブラウザ独自のアンチエイリアスを使用するらしく、それによって起こる現象と思われます。 また、上のテストを見る限りでは 「最初のシャドウ指定にブラーが設定されており、アルファ値が0以外のカラーを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでつまづいたポイント ― transparent, transition, box-sizing