CSSスプライトとstepsを使ってアニメーション画像を作ろう | Webクリエイターボックス

2015/11/17 257 users steps プロパティー CSS アニメーション 動作

CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 steps の記述方法 steps は animatio... 続きを読む

画像を分割もしくは合体させてパフォーマンスは本当に変化するのか? - Webサイトパフォーマンスについて

2014/12/07 108 users 分割 パフォーマンス Webサイトパフォーマンス 初版 画像

2014-12-07 画像を分割もしくは合体させてパフォーマンスは本当に変化するのか? 2008年4月1日に初版が発行された、オライリー・ジャパンの「ハイパフォーマンスWebサイト」を未だに参考にされている方は多いと思います。 時折、「CSSスプライトを使うことで、HTTPリクエスト数が削減されて、高速化に繋がる」と書かれている方をお見受けします。 しかし、それは本当なのでしょうか? そこで、今回... 続きを読む

CSSスプライトを生成する「grunt-spritesmith」 - to-R

2014/04/07 98 users Grunt src to-R コマンド インストール

grunt-spritesmithはCSSスプライトを生成するGruntモジュールです。 Gruntの基本的な使い方は「Gruntで始めるWeb制作の自動化 - to-R」を参照に。 grunt-spritesmithのインストールは以下のコマンドです。 npm install grunt-spritesmith --save-dev Gruntfile.jsの内容は以下のようにします。srcで個... 続きを読む

compassでcssスプライトするときの出力をできるだけ少なくする試み - しるてく

2013/07/17 39 users Retina Compass Mixin 出力 メモ

2013-07-17 compassでcssスプライトするときの出力をできるだけ少なくする試み css compass 概要 Sprite layouts | Compass Documentationcompassでのcssスプライトを試してみたのでメモ。 sprite-backgroundっていうmixinは結構色々な人がブログに書いてるんだけど、retina対応していなかったり、無駄な処理が... 続きを読む

Webページの表示速度アップに欠かせないCSSスプライトを超簡単に作成してくれるサイト「SpriteMachine」 | OZPAの表4

2013/01/16 142 users OZPA アイコン テクニック ロゴ いい名前

Webページの表示速度をアップするために、アイコンやロゴなどの画像を1枚にまとめるテクニック。それが「CSSスプライト」なのですが、これって画像の作成とか位置の指定とか色々と面倒くさいんですよね。 そんなCSSスプライトを簡単に実装するためのWebサイトSpriteMachineのご紹介。スプライトマシーン…すごく…イイ名前です… SpriteMachine – Create css sprite... 続きを読む

CSSスプライトをドラッグ＆ドロップで生成できる「SpriteMachine」:phpspot開発日誌

2012/12/27 33 users phpspot開発日誌 zipファイル ドラッグ＆ドロップ

SpriteMachine - Create css sprite images easily! CSSスプライトをドラッグ＆ドロップで生成できる「SpriteMachine」。 簡単な設定の後、ZIPファイルをブラウザにドラッグ＆ドロップすればスプライトファイルがダウンロードできるというもの。 お手軽で便利ですね。 ただ、個人的には、毎回全部アップロードするのは面倒だと感じるので、画像を新しく追... 続きを読む

PNG画像でもコマ送りのアニメーションさせてしまう、ナイスアイデアのスタイルシート -Sprite sheet | コリス

2012/12/03 85 users ナイスアイデア steps コリス gif PNG画像

アニメーションに対応した画像といえばGIFですが、PNG画像でもコマ送りのアニメーションさせてしまうスタイルシートのナイスアイデアを紹介します。 Sprite sheet animation with steps(). デモはCSS3アニメーションに対応したブラウザでご覧ください。 デモページ 仕組みは、横に各コマを並べたPNG画像をCSSスプライトで順に表示させて、コマ送りのアニメーションのよう... 続きを読む

CSSスプライトをブラウザにD&Dで速攻作れる「Instant Sprite」:phpspot開発日誌

2012/11/06 74 users phpspot開発日誌 速攻 ドラッグ＆ ブラウザ D＆D

Instant Sprite - Generate CSS Sprites Instantly CSSスプライトをブラウザにD&Dで速攻作れる「Instant Sprite」 D&D対応ブラウザ（Chrome等で）ローカルから複数ファイルをドラッグ＆ドロップしてみましょう。 ドロップした時点でCSSスプライトが完成してしまいます。 ２枚の画像をアップした結果。 すぐにCSSスプライトとして利用可能... 続きを読む

印刷にも対応！imgタグでCSSスプライトを使う方法 | デザイナーブログ | 株式会社LIG

2012/08/31 39 users IMGタグ こん 株式会社LIG デザイナー 印刷

こんにちゃー、「デザイナーの王」です(●´⌓`●) 今回はimgタグでCSSスプライトを使う方法について説明します。 そもそもCSSスプライトって何ぞや？っていう方は、こちらの記事（CSSスプライトで画像を円滑に表示させる）で詳しく紹介してありますので、ご参考を どうしてわざわざimgでCSSスプライト？ 一番の理由はやはり、imgタグなら印刷された時に反映されるというところ。 対比画像（フォーム... 続きを読む

CSSスプライトについてあれこれ。

2012/08/24 1022 users HTML 画像置換 手順 制作手順 web

「CSS Sprites（CSSスプライト）」って、どの方法が一番ベストなの？ いまいち不確かだったので、個人的にまとめ直してみることにしました。2012.8.22. Wed CSS, CSSスプライト, HTML, Web, ボタン, 手順, 画像置換 「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までた... 続きを読む

[CSS]Retinaディスプレイを考慮したCSSスプライトの実装方法 | コリス

2012/08/02 162 users コリス テクニッ Retinaディスプレイ CSS 実装方法

新しいiPad, iPhone4, MacBook Proなどに採用されているRetinaディスプレイを考慮したCSSスプライトの実装方法を紹介します。 Using CSS Sprites to optimize your website for Retina Displays CSSスプライトとは複数のアイテムを一枚の画像に配置し、background-imageで表示する範囲を指定するテクニッ... 続きを読む

[JS]動画もFlashも使わずに、商品をぐるぐるとアニメーションで回転させるスクリプト – fc.tape | コリス

2012/06/15 66 users コリス ImageMagick Flash スクリプト デモ

デモで使用している画像の一部 この画像をCSSスプライトで表示し、アニメーションをコントロールします。 画像の作成には「ImageMagickを使用すると、フォルダ内の全ての画像からスプライト用の一枚の画像を生成できます。 実装の基本 アニメーションを配置するdiv要素、サイズなどを指定するスタイルシート、コントロールするスクリプトが基本構成です。 HTML <div class="tape"><... 続きを読む

web高速化のためのコーダー向け圧縮ツール・サービスまとめ | バシャログ。

2012/04/25 405 users バシャログ ishida web高速化 おいら サービスまとめ

ゴールデンウィークは、ディズニーランドに連れていくと娘に約束してしまった ishida です。いったいどのくらい混雑するんだろう、どうせオイラはパレードの席取りでひたすら待つのさ。 さてさてweb高速化においてサーバー側ではなくフロントエンド側で対応できることもかなりあります。 CSSのセレクタ構文の最適化やCSSスプライトによる画像リクエスト数の削減であったり。 今回は、ファイル容量を削減に焦点... 続きを読む

CSS3で画像レスなソーシャルサイト連携ボタンサンプル集「Zocial」:phpspot開発日誌

2012/02/02 20 users Zocial font-face 見栄え CSS アイコン

Zocial | CSS3 Button Set CSS3で画像レスなソーシャルサイト連携ボタンサンプル集「Zocial」 font-faceでアイコンをつけつつCSS3でデザインされたボタン集です。とても画像じゃないとは思えないんですが画像です。 押した時にCSSで切替えられるのはCSSスプライトより簡単でいいですね。見栄えも綺麗です 次のようなアイコン形式のボタンなんかもあります 関連エントリ... 続きを読む

アイコン付きの分かりやすいボタンをCSS3で実装するサンプル:phpspot開発日誌

2011/09/06 48 users phpspot開発日誌 サンプル CSS アイコン付き ボタン

Just some other awesome CSS3 buttons - demo アイコン付きの分かりやすいボタンをCSS3で実装するサンプルが公開されています。 ボタンの横にアイコンが表示されており、何を意味するのかが分かりやすく使い勝手向上に貢献しそうです。 関連エントリ CSSスプライトでカッコイイボタンを作るチュートリアル Google＋風のボタンをCSSで実装するサンプル 続きを読む

Mac OS X Lionな感じのボタンを実現できる２００種のボタン素材:phpspot開発日誌

2011/08/08 48 users phpspot開発日誌 CC-BY ボタン ボタン素材 感じ

Apple OS X Lion Buttons in CSS | Improve your UI | Pixify Mac OS X Lionな感じのボタンを実現できる２００種のボタン素材。 次のようなボタン素材がダウンロード可能です。CSSスプライトによって実装されているので毎度新しい画像を読み込む必要もありません。 ライセンスは、Creative Commons CC-BY 。IEでも表示の差... 続きを読む

CSSスプライトでMac OS X Lion 風のアイコンを使える「Lion Buttons in CSS」 | Web活メモ帳

2011/08/05 17 users class Mac HTML アイコン 構造

CSSスプライトでMac OS X Lion 風のアイコンを使える「Lion Buttons in CSS」 Macの新OS Lionがリリースされてから暫く立ちますが、 Lion風UIをCSSスプライトで使えるようにした方がいましたのでご紹介。 以下のようなボタンが簡単に使えるようになります。 HTMLもシンプルな構造でclassを指定するだけで使えます。 Label Mac風のデザインにしたい... 続きを読む

CSSスプライトのコードをインタラクティブに取得できる『Sprite Cow』 | 100SHIKI

2011/06/21 70 users インタラクティブ Sprite Cow 100SHIKI

ちょいとマニアックだが、便利かつ、細かいところが使いやすかったのでご紹介。 Sprite Cowを使えば、いわゆるCSSスプライトのコードを簡単に取得できてしまう。 使い方は簡単で、まずは画像をアップし、どの画像のコードを取得したいかを指定するだけだ。それだけで画面下部にCSSコードが表示される。 なんとも気が利いているのが背景部分を自動的に認識し、クリック一発でアイコンやらを認識してくれる点。 ... 続きを読む

綺麗なアイコン付きボタン４２個パック:phpspot開発日誌

2011/04/19 53 users phpspot開発日誌 jQuery Codrops CSS

Mega Web Buttons Pack #1 | Codrops 綺麗なアイコン付きボタン４２個パック。 次のように、ボタンにアイコンが付いてより分かりやすくなっているものをダウンロード可能です。 jQueryとCSSが使われていて比較的容易に実装できてマークアップもシンプルになってます。 アイコンがあると無いとでは格段に見やすさが違いますね。 関連エントリ CSSスプライトでカッコイイボタン... 続きを読む

コピペで使えるCSS3ボタン６つのレシピ:phpspot開発日誌

2011/04/10 114 users phpspot開発日誌 コピペ レシピ カッコイ Paste

6 Useful CSS Button Recipes You Can Copy & Paste | Design Shack コピペで使えるCSS3ボタン６つのレシピ。 次のようなボタンのCSSとHTMLが掲載されています。 一昔前はオーサリングツール抜きに出来なかったこともCSSで出来るように。CSS4の時代にはどうなっているのだろうと少し楽しみです。 関連エントリ CSSスプライトでカッコイ... 続きを読む

[CSS]画像のロールオーバーにフェード効果を与える方法の理想と現実 | コリス

2011/03/03 93 users span コリス CSS アニメーション 順番

CSSスプライトを使用した画像のロールオーバーにアニメーションでフェード効果を与える際の、妥当な実装方法、理想の実装方法、現実の実装方法を紹介します。下記は各ポイントを意訳したものです。最初の方法：妥当二番目の方法：理想三番目の方法：現実デモでは、上から順番に実装されています。最初の方法：妥当HTML元のエレメント内にspanを一つ配置します。確かにこれは余分のマークアップと感じるかもしれませんが... 続きを読む

独学で極める “Webデザイン”の技と心：第10回　CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社

2008/05/26 629 users 独学 チューニング gihyo.jp CSS サーバ

独学で極める “Webデザイン”の技と心 第10回　CSS Spritesでサイトを高速化 2008年5月26日 山田あかね Webデザイン, HTML, CSS 今日は，CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと，プログラムの最適化を行ったり，サーバのチューニングを行ったりというイメージがあ... 続きを読む