ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
レスポンシブ・デザインを説明するGIFアニメ | ビジュアルシンキング
「レスポンシブ・デザインとは？」を説明する9つのGIFアニメーションが、FastCompanyが運営するCo.Designの記事に掲載されていました。 9 GIFs That Explain Responsive Design Brilliantly | Co.Design 見習いたい表現なので、取り上げます。 たとえば、画面幅の考え方は。 image by Froont デスクトップファーストとモバイルファーストの違いは？ image by Froont それぞれのGIFアニメーションのサイズは、数百キロバイトに抑えてあり、アニメーションは9つありますが表示するのにストレスは少ないです。 わかりやすく情報を伝えられるだけではなく、記事を読む側の利便性からしても、動画を9つ使うよりもGIFアニメーションを使うことに意味がありますね。
[CSS]この発想はすごい！画像をモザイクからくっきり見せるスタイルシートのテクニック
一枚の画像を使って、モザイク状の画像をアニメーションで少しずつくっきりさせるスタイルシートのテクニックを紹介します。 もうほんと、ナイスアイデア！ コードを見る前に実装方法をちょっと考えてみてください。 ↓はブラウザでの表示をアニメーションgifにしたものです。 Gif Style CSS3 Animation アニメーションはロード時のみなので、繰り返し見たい時はリロードで。 実装はこんな感じです。 HTML HTMLは非常にシンプル！ 画像はdivの背景として表示します。 <body> <div class="image"></div> </body> CSS スタイルシートも非常にシンプル、一枚の画像にモザイクからくっきりまでの各コマを並べ、CSSスプライトで次々にアニメーションで表示しています。 コードを見るまで、どうやって実装してるのか全く分かりませんでした。 body { ba
無料でJPG、PNG、GIF、SVG画像を圧縮して小さくしてくれる「Compressor」
アカウント登録不要・無料で利用でき、手元にある画像ファイルをブラウザでアップロードするだけで瞬時にファイルサイズを小さくしてくれるサービスが「Compressor.io」です。 Compressor.io - optimize and compress your images and photos http://compressor.io/ ページを表示させるとまず目に飛び込んでくるのがこのカメレオンの画像。画像の上には白いバーが表示されており、マウスで左右に動かすことで圧縮前と後での画質変化を確認することができます。 画像の下には、圧縮前後のデータ容量の変化と圧縮率が表示されています。 このサイトで対応しているのはJPEG、PNG、GIF、SVGの4形式。圧縮時には、元の画質をキープできる可逆圧縮と、圧縮率重視の非可逆圧縮を選択することが可能となっています。 使い方の説明はこれだけ。あと
こんなことできるの知ってました？ GIFアニメーションをカーソルの動きでコントロールする -GIFCTRL
背景いっぱいに表示されたアニメーションGIFの上でマウスのカーソルを動かすとそれに伴ってアニメーションをコントロールする「GIFCTRL」を紹介します。 GIFCTRL ※画像表示はランダムです。 そのまま表示していてもアニメーションGIFなので動きますが、カーソルでアニメーションをコントロールすることができます。 カーソルを動かすと、おねえさんがちらちら誘惑しますｗ
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインのセンスを磨く！2014年上半期洗練されたディテールのUIデザインのまとめ
