サクサク読めて、アプリ限定の機能も多数！アプリで開くはてなブックマーク閉じる ●はてなブックマークって？●アプリ・拡張の紹介●ユーザー登録●

●ログアウト

HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir

テクノロジーカテゴリーの変更を依頼記事元:

coliss.com

435 usersがブックマークコメント

18

現在プライベートモードです設定を変更する

435 users coliss.com

現在プライベートモードです設定を変更する

みんなの興味と感想が集まることで新しい発見や、深堀りがもっと楽しくアカウントをお持ちの方はログインページへ

記事へのコメント18件

●注目コメント ●新着コメントオーナーコメントを固定しています

オーナー coliss MITライセンス、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ。 ●css ●MITライセンス ●animation 2019/11/11 リンクその他 ● ● ●

helldeath いいなと思った。IE11では正常動作しない。が、皆さんはもうIE11は切り捨てておるんじゃろう…？ ●css ●仕事 2019/11/11 リンクその他 ● ● ●

from_kyushu 弊社要件次第だけどIE11サポートすることも多いので悲しみ 2019/11/11 リンクその他 ● ● ●

kijtra このスマホ時代にマウスオーバーに凝る気にならない感じもある 2019/11/11 リンクその他 ● ● ● オーナーコメントを固定しています

オーナー coliss MITライセンス、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ。 ●css ●MITライセンス ●animation 2019/11/11 リンクその他 ● ● ●

tomato3713 便利そう。 2019/11/14 リンクその他 ● ● ●

tk_musik タスカル。個人開発用。 2019/11/12 リンクその他 ● ● ●

kijtra このスマホ時代にマウスオーバーに凝る気にならない感じもある 2019/11/11 リンクその他 ● ● ●

Keisuke69 Izmirか、こういうのいいよね ●css ●ライブラリ ●html 2019/11/11 リンクその他 ● ● ●

akiakito つかいたい 2019/11/11 リンクその他 ● ● ●

minomushkoro 便利なcssライブラリまとめがみたい 2019/11/11 リンクその他 ● ● ●

YonYon おしゃれなホバー時のアニメーションが導入できる。スマホではタップ時のアニメーションになるみたい。ワンポイントで使う分にいい感じかも。 ●html ●css ●アニメーション 2019/11/11 リンクその他 ● ● ●

tetsu23 IEでは動かないもよう。 ●html ●css 2019/11/11 リンクその他 ● ● ●

mint6626 こういうの、簡単に実装できる︵けど既存のjsパッケージとかとの競合とかキャッシュとこでハマりにハマる︶cssのことが多い 2019/11/11 リンクその他 ● ● ●

from_kyushu 弊社要件次第だけどIE11サポートすることも多いので悲しみ 2019/11/11 リンクその他 ● ● ●

mayumayu_nimolove こう言うのいいよね 2019/11/11 リンクその他 ● ● ●

MonkaS 使ってみたい 2019/11/11 リンクその他 ● ● ●

mon_sat アプローチが素晴らしい！ 2019/11/11 リンクその他 ● ● ●

Helfard ほほう。気になる。 2019/11/11 リンクその他 ● ● ●

norando 手軽で良いし、自分で書く時の教材にしたい。 ●css 2019/11/11 リンクその他 ● ● ●

helldeath いいなと思った。IE11では正常動作しない。が、皆さんはもうIE11は切り捨てておるんじゃろう…？ ●css ●仕事 2019/11/11 リンクその他 ● ● ● 注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の﹁建設的コメント順位付けモデルAPI﹂を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss-library-izmir-hover-effects.html" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://akarinohon.com/text/taketori.cgi/https://coliss.com/articles/build-websites/operation/css/css-library-izmir-hover-effects.html">HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir</a><a href="https://akarinohon.com/text/taketori.cgi/https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-library-izmir-hover-effects.html">はてなブックマーク - HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir</a></div></iframe>

プレビュー

はてなブックマークボタンを作成して埋め込むこともできます

規約違反を報告

いまの話題をアプリでチェック！ ●バナー広告なし ●ミュート機能あり ●ダークモード搭載アプリをダウンロード

usersに達しました！

さんが1番目にブックマークした記事﹁HTMLにclassを加え...﹂が注目されています。気持ちをシェアしようシンプルなHTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリを紹介します。デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます。 Izmir Izmir -GitHub Izmirの特徴 Izmirのデモ Izmirの使い方 Izmirの特徴画像をホバーすると多彩なアニメーションを適用します。エフェクトを組み合わせることで、2000通り以上のエフェクトを使用可能。20種類のボーダーエフェクト、9種類の画像エフェクト、12種類のテキストエフェクト。オーバーレイのスタイル、アニメーションの遅延、テキストのレイアウトなど、classも豊富。アクセシブル︵デスクトップはホバー、スマホはフォーカス︶。 2Kbの超軽量ライブラリ。実装・カスタマイズ用のドキュメント完備 ●css ●html ●あとで読む ●アニメーション ●ライブラリ ●エフェクト ●web制作 ●webデザイン ●画像 ●デザイン