SVGのマスクテクニックを使えばなかなかたいしたことができることをご存じでしょうか。このやり方はここ数年に広まったものですが、最近になるまでWeb開発のメインストリームに入ってきませんでした。 本記事では、Webを捜して集めたクリッピングマスク・SVG/canvasを使ったマスクのデモを紹介しています。これらの例を見れば、Webにおいてマスクがどれほど活用できるものか、それらが開発者に何を与えてくれるかを実感してもらえると思います。 （画像をクリックするとCodepenに飛びます。） １．テキスト・マスキング 動くテキスト・マスキングの見事な例です。HTMLのページ・テキストを使用しており、テキスト部分を所望のものに変えるだけでどんなものにも応用できます。 この仕掛けの種は、CSSのバックグラウンド・クリップ（background-clip）のようなプロパティにあります。クリアーな背景の使
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / Fireworksのアレ フォントのサイズとか何パターンかスタイルとして定義しておくカンプのステートとは別に本デザインのステートを作り、切り替えながら作業する使う色を■で作って端に置いておき、それを1個ずつスタイルでも用意しておく。塗りや線の色を選ぶときも、スポイトツールでそのスタイルをクリックすれば色が適用されるFwで用意されているパターンは癖が強い感じのものが多いけど、フィルタで色相彩度変更すれば結構応用可能なんかオブジェクト作り、整列パネル→間隔→12pxとか選べば、12px間隔で並んでくれるので便利選択範囲をパスに変換機能パス書いてから、パス→ストロークを塗りに変換 ってやればそのあと
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティスを読んで、今ではPNG8がデフォルトですよ、みたいな内容が書いてあったのでPNG形式を敬遠してきた自分はたいそう驚きました。 写真にはJPEG、アニメーションにはGIF、その他すべてのものにはPNG（可能な限りPNG8）を使う ということだそうです。 同書でも紹介されていたsitepointの記事、PNG8 – The Clear Winnerを読むと、「PNG8最高だよ！」みたいなことが書いてあります。要約（というか超訳）すると PNG8はGIFのような256色パレットベースのカラーモデルを持っている GIFのようにアニメーションはできない GIFのように一部の色を完全に透明にすることができる しかしなんと、Fireworksを使えばアルファチャンネル付きのPNG8を書き出すことができる。少なくともバージョン3から実装
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
ImageOptim makes images load faster Removes bloated metadata. Saves disk space & bandwidth by compressing images without losing quality. Faster web pages and apps Reduces image file sizes — so they take up less disk space and download faster — by applying advanced compression that preserves quality. Image files scrubbed clean Removes invisible junk: private EXIF metadata from digital cameras, em
* Flash required. Supported Types: JPG, GIF and PNG (Max 500KB each) What is punypng? punypng is a free optimization service that can dramatically reduce the file size of an image by converting it into a highly-compressed, lossless PNG image. That translates to outrageously efficient web page loading, and just makes the web more puny. Making the web more puny isn't cheap, so help support our cause
PNGファイルにはメタデータとして様々な情報を埋め込むことができる。その様々な情報のうちガンマとカラー・プロファイルの情報はブラウザでの表示に影響を与えることがあるので、そこそこ使いやすいpngcrushで削除するのが無難。それら影響を与えることがあるメタデータを削除してやれば、WindowsのPhotoshopで作ったPNGファイルがMac(Leopard)のSafariで色がずれるなどといった現象を回避することができる。 pngcrushのWindows向けバイナリはダウンロード・ページの下の方にあるpngcrush-executablesの方からダウンロードできる(2009/07/03時点ではpngcrush-1.6.15-win32.zipが最新)。pngcrush-1.6.19.zipとかはソースのみなので注意。関係ないけどsourceforge.netは見づらくなった気がする…
Yahoo! User Interface Blog YSlow開発者であり高速Webサイト構築テクニック紹介者であるStoyan Stefanov氏による画像最適化解説シリーズの第5弾Image Optimization, Part 5: AlphaImageLoaderとして公開された。5回目の今回はIE6で透過PNGを使うためのテクニックと提案がまとめられている。 結論からいえばIE6で透過PNGを表示できるようにするテクニックは可能な限り使わない方がいいということになる。IE6で透過PNGを表示させるようにするテクニックはパフォーマンスの低下を招く上にメモリの消費量を増やす。パフォーマンスやメモリ量を増やさない方法は標準規約にはない記述がさらに増えることになるのでお薦めできないとされている。 紹介されているテクニックは次のとおり。 CSS _filterプロパティでAlphaIma
IE6 → 透過PNG+overflow=混ぜるな危険（追記有） >>081205：追記 解決しました (追記:081205)はてブのコメント見たらこの下記の症状が出ない方もいらっしゃるみたい。私が検証に使ってるIE6はIETesterのものと「IE6 standalone の落とし穴」っていう記事で書いた透過も使えるこっちのスタンドアローン版IE6なんだけど、もしかしてもしかして正規版では正常に動作してるとか？？コメント書いてくださった方が正規版IE6なのかどうかは分からないけれども、一応その件も補足しとこかなということで追記。 やりたかった事 親ボックスには大きめの写真を入れたい。 その親ボックスの写真は背景じゃなく、諸事情でimgタグで入れること。 その中にまたボックスを作って背景に透過PNG画像を使用してテキスト本文入れたい。親ボックスの写真が透ける感じで。 そのテキスト本文部分は
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
17日(米国時間)、IE PNG Fixの最新版となるIE PNG Fix Alpha 2が公開された。IE PNG FixはJavaScriptで開発された透過PNGサポートライブラリ。LGPLのもとで提供されており、透過ライブラリがサポートされていないIE 6やIE 5.5で透過PNGを表示できるようにする。 IE PNG Fixを使って透過PNGを表示させる場合、CSSファイルに1行設定を追加するだけでよく、HTML自身を編集する必要がないという特徴がある。img要素によるバックグランドイメージ表示にも対応している。IE PNG Fix Alpha 2では背景ポジションの指定やリピートもサポートされている。 IE PNG FixはIE 6やIE 5.5に影響を及ぼすが、FirefoxやOperaなどほかのブラウザには影響を及ぼさない。類似したJavaScriptライブラリにはIE7.
APNG - the animated PNG アニメーションPNGがもうすぐ来るようです。 といっても、現在のブラウザだと表示できず、Firefox3やOpera9.5等のブラウザで利用可能になるみたい。 リンク先のサイトでは、アニメーションPNGの編集ツールなんかもダウンロードできるみたいです。 一つの仕組みとして覚えておいてもよさそうですね。
This plugin will fix the missing PNG-Transparency in Windows Internet Explorer 5.5 & 6. Features unobtrusive script, simple to setup works now also with CSS-Backgrounds (but scaling backgrounds) works with PNG-Images within Links TITLE, ALT, CLASS and STYLE-Attributes are considered This page uses jQuery Version Version 1.1, 2007-09-11 Tested on Windows XP SP2 with - IE 5.5 + 6 + 7 E x
半透明ボックスに関するメモ ※2008年2月8日、IE6でinputボタンが押せない件について追記しました。 半透明ボックスに関してのメモ。 デザイナからの要望はこんな感じ。「よくあるタイプのコンテンツ部分の背景に単色ベタの土台を置くようなデザインじゃなくて、今回は背景画像を活かしたデザインにしたい、テキストやら写真やらの中身を入れるボックスだけ半透明にして見せたい背景画像をうっすら表示させたい。」 今回やっかいだなと思ったのが、コンテンツ部分が全面そういう風に背景の上で半透明になっているのではない点。タイトル画像が入る部分やそれぞれのセクションの余白部分は半透明ではなく、素の背景が見えるというもの。文章にするとややこしい・・・つまりこんな感じ↓。(背景とか色合いとか変だけどあくまでサンプルだから気にしないでください・・・。) 半透明のボックスって中身も半透明になるんだよね CSSだけでボ
Overview As you know IE versions below 6 do not support png transparency. This plugin designed to fix that problem by applying appropriate filters to user specified elements, while keeping all element tags intact. Plugin works well with both img elements within the DOM and css properties specified externally. • It is chainable. • Unlike some other png hack solutions, it does not replace/hide any o
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
