Home Page | CntlogUI Designer名古屋でUIデザイナをしています。 UIコンポーネントの設計と運用と素早くプロトタイプを作りながらフロントエンドの実装して作りんで行くのが得意です。 最近はStorybookを運用したデザインシステムを作るのに感心があります。 コーギーと暮らしています。
意外と知られていない? 画像置換のテクニック | サイブリッジラボブログ
このあいだ iPhone アプリに今までいくら使ったのか調べたら、3万くらい使ってたことに気付いてちょっと反省しているハシモトです。（App Store Expense Monitor で調べられます） 今日は画像置換について書いてみたいと思います。 画像置換とは 画像置換とはCSSのテクニックのうちの一つで、HTMLでマークアップしたテキストをCSSでテキストを隠し、画像に置き換えて表示させる手法のことを言います。 この手法はalt属性が必要でない画像を使用するとき、つまり完全にデザイン目的だけで画像を使用するときに使われたりします。 メリット 文書構造とデザインをHTML・CSSで分離でき、CSSだけで見た目のコントロールができる altのテキストを検索対象に含めない検索エンジンに対してSEO的に効果があるかもしれない background-positionプロパティを応用して、ロール
画像置換のあれへの補足
先月あたり、CSS による画像置換テクニックの話題がにわかに盛り上がりを見せていました。その経緯について まとりさんの記事 で紹介されていますが、僕からも簡単に補足してみます。 まず、よく知られた画像置換のテクニックとしていわゆるファーク式がありました: /* Phark method */ .ir { height: 100px; width: 400px; background: url(image.png) no-repeat 0 0; text-indent: -9999px; } このテクニックは長らく利用され続けてきましたが、その代替として、パフォーマンス面でより良いとされる Scott Kellum さんのテクニック (ケラム式) が Jeffrey Zeldman さんの記事 で紹介されました: /* Kellum method */ .ir { height: 100px
CSS Image Replacement Museum
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS image replacement is a technique of replacing a text element (usually a header tag like an <h1>) with an image (often a logo). It has its origins in the time before web fonts and SVG. For years, web developers battled against browser inconsistencies to craft image replacement techniques
CSS PhotoEditor - kudakurage
About This CSS PhotoEditor is a test site for new features that will be installed in iOS6. This site has actually tried CSS Filters and Input[type="file"]. IF you want to learn more, you may read my blog entry. WebApp Mode by Force When you turn on this mode, you can switch to forcibly WebApp mode. This switch is not only appear at the time of the Overview mode. Force WebApp ModeOFF Features and H
PNGをCSSグラデーションへ変換する「pngtocss」登場 | エンタープライズ | マイコミジャーナル
Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞. david walsh blogにおいてPNG画像をCSSグラデーションに変換するツール「pngtocss」が紹介されている。CSS3を活用してWebページの総サイズを縮小したり高速なレンダリングを実施するためのテクニックのひとつとして興味深い。 pngtocssはC言語で開発されたとても小さな変換ツール。githubで提供されており、cloneすることで取得可能。libpngとzlibを使うため、利用するにはこの2つをシステムにインストールしておく必要がある。libpngとzlibのパッケージ名はOSやパッケージ管理システムごとに異なるので、適宜対応するものをインストールすれば良い。Makefileもシンプルなもので、コンパイラやライブラリ/ヘッダファイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
