Git@OSCのススメ｜モバイルCSSスライス画像合成スプライト画像tool_html/css

3 .CSS コードスニペットの画像合成には gulp+gulp-css-spritersmith プラグインを使用します

欠点

.m-icon-fail{    background: url(#{$icon_1_path}/m-pay-err.png) no-repeat;    width:100px;    height:100px;}.m-icon-success{    background: url(#{$icon_1_path}/m-suc.png) no-repeat;    width:28px;    height:28px;}

ログイン後にコピー

" >

.m-icon-fail{    background: url(#{$icon_1_path}/m-pay-err.png) no-repeat;    width:100px;    height:100px;}.m-icon-success{    background: url(#{$icon_1_path}/m-suc.png) no-repeat;    width:28px;    height:28px;}

ログイン後にコピー

ホームページ

ウェブフロントエンド

htmlチュートリアル

Git@OSCのススメ｜モバイルCSSスライス画像合成スプライト画像tool_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:29 AM

Gulp-CSS-GMSpriter

シンプルなモバイル CSS スライス図形合成ツール

ツールライブラリ:

Graphicsmagick ダウンロードアドレス: http://www.graphicsmagick.org/

TON ダウンロードアドレス: https://www.python.org/

オプションツールライブラリ

compass+ruby+sass

主に実装されている機能

1. プロトタイプ画像を処理するために、合成が必要な画像ディレクトリimages/icons /、images/slice/ ディレクトリに出力します

images/icons/ ディレクトリに 2x プロトタイプ画像を保存します

images/slice/ ディレクトリに 1x、2x 画像を生成します

2. 画像のスケーリングには gm ツールを使用します

3 .CSS コードスニペットの画像合成には gulp+gulp-css-spritersmith プラグインを使用します

4. 出力ディレクトリ public/

利点

1. 元の CSS ファイルコードを変更する必要はありません

2合成する必要がある画像のソースパスを設定できます (画像/アイコンなど)

3. さまざまな画面素材 (網膜など) に適応するようにメディアクエリモバイルデバイスのクエリコードスニペットを自動的に追加します

欠点

1ソーススライス画像の CSS コードを手動で入力する必要があります:

.m-icon-fail{    background: url(#{$icon_1_path}/m-pay-err.png) no-repeat;    width:100px;    height:100px;}.m-icon-success{    background: url(#{$icon_1_path}/m-suc.png) no-repeat;    width:28px;    height:28px;}

ログイン後にコピー

合成コード

.m-icon-fail { background: no-repeat;background-position: 0 0; width: 100px; height: 100px; }.m-icon-success { background: no-repeat;background-position: 0 -183px; width: 28px; height: 28px; }

ログイン後にコピー

Example zip をダウンロードした後、npm install を実行し、その後 gulp を実行します。コンパス環境がない場合は、コンパスを調整してください。それに応じてgulpfile.jsの設定を変更し、CSSモニタリングに変更します 🎜 🎜 🎜

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。