[B! マウス][カード] masakuma0812のブックマーク

masakuma0812 id:masakuma0812

マウスとカードに関するmasakuma0812のブックマーク (3)

こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。こんなことできるの?!最新HTMLテクニック・スニペット Cards (gradient border) 最近良く見かけるモダンなUIカードエフェクトをまとめたミニライブラリ。CSSでできるボーダーアニメーションと合わせてどうぞ。 See the Pen Cards (gradient bor
masakuma0812 2024/05/22
HTML

CSS

サンプル

コード

まとめ

UI

カード

アニメーション

マウス

グラデーション
リンク
CSS カードをめくる動きを再現する方法 - by Takumi Hirashima
CSS でカードをめくる動きを再現する方法を紹介します。ベースのコードを紹介コードの解説スマホ対策ベースのコードを紹介 CSSでカードをめくるような動きを再現する方法を紹介します。いくつかポイントがありますので順を追って説明します。まずは最初に、動きのサンプルとベースのコードを紹介します。その場でめくれる動きその場でめくれる動きのサンプルです。カードにカーソルを合わせてボタンを押し下げたときに動作します。ベースの HTML はこちら。 <div class="flip"> <div class="front"></div> <div class="back"></div> </div> めくれると大きくなる動きその場でめくれると大きくなる動きのサンプルです。カードにカーソルを合わせてボタンを押し下げたときに動作します。ベースの HTML はこちら。 <div clas
masakuma0812 2023/08/24
CSS

アニメーション

カード

拡大縮小

マウス

コード
リンク
[JS]カードやリストをアニメーションで移動できるレスポンシブ対応のグリッドを実装するスクリプト -Muuri
レンガ状のカードやリスト状のパネルをドラッグ&ドロップで移動したり、フィルタリングやソートも可能なレスポンシブ対応のグリッドを簡単に実装できるスクリプトを紹介します。通常だと複数のライブラリを組み合わせないと実装できませんが、これ一つで軽量に実装できます。 Muuriとは「壁（Wall）」を意味するフィンランド語だそうです。 Muuri Muuri -GitHub Muuriの特徴 Muuriのデモ Muuriの使い方 Muuriの特徴レスポンシブ対応レイアウトのカスタマイズは自由自在パネルのドラッグ&ドロップに対応ネストされたグリッドに対応高速で快適なアニメーションフィルタリングやソート機能を装備 IE9+もサポート MITライセンス Muuriのデモデモでは、Muuriのさまざまなレイアウトを実際に楽しめます。 Gridのデモは、Masonryのようなグリッドレイアウトで
masakuma0812 2017/12/05
Javascript

要素

リスト

画像

カード

マウス

ドラッグ＆ドロップ

アニメーション

レスポンシブ

対応
リンク
1