CSSスプライトとstepsを使ってアニメーション画像を作ろう
2023年7月25日 CSS CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 ↑私が10年以上利用している会計ソフト！ steps の記述方法 steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば5段階で変化させるなら、steps(5) と記述します。 .element { animation: img-move 5s steps(5); } @keyframes img-move
Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
An Overview of SVG Sprite Creation Techniques
SVG can be used as an icon system to replace icon fonts. The reasons why SVG makes for a superior icon system are numerous, but we won’t be going over them in this article. If you don’t use SVG icons and are interested in knowing why you may want to use them, I recommend you check out “Inline SVG vs Icon Fonts” by Chris Coyier – it covers the most important aspects of both systems and compares the
Creating SVG Sprites using Gulp and Sass
Written by Mike Street on 11th November 2014 (Last updated 21st March 2022) Following on from our recent blog post about SVG Sprites which gave an introduction and overview to using SVGs in a sprite, this post will outline the processes and tools we use for creating and using an SVG Sprite at Liquid Light. Creating and maintaining large SVG sprites can be cumbersome and time consuming, so we decid
How SVG Fragment Identifiers Work | CSS-Tricks
The viewBox attribute goes: left, top, width, height. Note that second attribute, the top, notching up by 32 each time. We’re just showing a different part of the whole document. Adding those special viewBox’s into the SVG itself You can drop those special, specific viewBox values into the SVG in a <view> element, that is specifically for this: <view id="icon-clock-view" viewBox="0 0 32 32" /> <vi
Generating CSS sprites with Gulp — Frontend Babel
While working with one large project, my colleague and I were thinking about how to automate building the CSS sprites. Before, we used to build them manually or with different online services which anyway took a lot of time. Also, by that time we already used Gulp to build the project and so were looking for a gulp-friendly solution for sprites. Initially we were choosing from different variants:
How to Create a CSS Sprite Animation With steps() [Article] | Treehouse Blog
LearnHow to Create a CSS Sprite Animation With steps()Adobe Illustrator artboards There’s a little-known timing function in CSS animations that lets us break an animation into segments––or steps––instead of running it as one continuous animation from start to finish. This function is useful for creating sprite animation because we’re able to precisely display each sprite image as a frame without a
![How to Create a CSS Sprite Animation With steps() [Article] | Treehouse Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/5427ed50b94c457a0d92f558334053f6a80966a4/height=288;version=1;width=512/https%3A%2F%2Fblog.teamtreehouse.com%2Fwp-content%2Fuploads%2F2023%2F01%2FSocial-Image-CSS-Sprite-Animation-steps.jpg){kind=icon}
CSSスプライトを生成する「grunt-spritesmith」
CSSスプライトを生成する「grunt-spritesmith」 grunt-spritesmithはCSSスプライトを生成するGruntモジュールです。 Gruntの基本的な使い方は「Gruntで始めるWeb制作の自動化 - to-R」を参照に。 grunt-spritesmithのインストールは以下のコマンドです。 npm install grunt-spritesmith --save-dev Gruntfile.jsの内容は以下のようにします。srcで個別の画像を置くディレクトリを、destCSSで関連するCSSを書き出すファイル名(SassやLess、StylusでもOK)を、destImgで結合したスプライト画像のファイル名を指定します。 module.exports = function(grunt) { //グラントタスクの設定 grunt.initConfig({ spr
Spriting with Sass and Compass – TheSassWay.com
As web developers have become more concerned about browser performance a technique called “image spriting” has emerged that is designed to reduce the number of requests made to the server. As it turns out, fewer requests made the server (when there is no significant difference in the combined size of the files delivered) can make a big difference in how fast a page appears to download. Image sprit
CompassでCSS Sprite生成（手動生成、Retina対応） - 一から勉強させてください
今回は、前回やったCompassでCSS Sprite生成〜導入、自動生成〜の続きとして、CSS Spriteの手動生成とRetina対応について書きたいと思います。 ちなみに前回と今回のサンプルをまとめてこちらに公開しております。 https://github.com/danimal141/create_css_sprite それではまずCSS Spriteの手動生成についてです。 前回は @import "compass"; $sprite_images-sprite-dimensions:true; @import "sprite_images/*.png"; @include all-sprite_images-sprites;という記述だけであっという間にスプライト用のCSSができちゃいましたが、これ以外にも同様のスタイルを生成する方法があるみたいなので試してみました。 これ。
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース
SLOT88 Situs Judi Slot Online Gacor 100% Jackpot Hari ini Hadir sebagai situs judi slot online terbaru, SLOT88 saat ini menjadi salah satu pilihan bagi para penikmat permainan judi online yang ada di seluruh Indonesia. Ini semua karena permainan yang disediakan begitu seru dan mengasyikan, game slot online juga sangat mudah di akses dan dimainkan kapan saja hanya melalui HP berbasis android dan io
画像ファイルの最適化とスプライト画像の作り方 | さくらのナレッジ
Webサイトの最適化において、最も手軽にできて効果的なのは画像ファイル関連の最適化である。主に2つの最適化方法があり、1つは画像ファイル自体のファイルサイズを小さくして通信帯域を節約すること。もう1つは画像をまとめることによって通信回数を減らすことだ。それぞれのポイントや作業方法を解説していこう。 最適化できる画像はどのくらいある？ Webサイトの各ページには何かしらの画像ファイルが使われている。これらに改善の余地があるかどうかは、GoogleのPageSpeedなどの診断ツールを使って簡単に把握できる（参考：「PageSpeedを使ってWebサイトを最適化・高速化しよう」）。サイト運営でこれまでとくに画像最適化について意識していなければ、「？%サイズを縮小できる」「画像ファイルをまとめる」などのアドバイスを受けることだろう。 ファイルサイズを小さくできるPNG形式 一般に利用されている、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Working with SVG — A Primer
http://blog.e-riverstyle.com/2014/02/gulpspritesmithcss-spritegulp.html
Blog - LINE ENGINEERING