タグ カード状
新着順 5 users 10 users 100 users 500 users 1000 users[JS]ただのツールチップだと思ったら大間違い、ホバー時にインフォメーションを表示するスクリプト -Hovercard | コリス
[JS]ただのツールチップだと思ったら大間違い、ホバー時にインフォメーションを表示するスクリプト -Hovercard さまざまなHTMLのエレメントのホバー時にカード状のインフォメーションをアニメーションで表示するjQueryのプラグインを紹介します。 ただのツールチップとは違い、カードのインフォメーションに更にカードを表示したり、Facebook, Twitterと連携したり、コールバック関数... 続きを読む
厳選!WordPressのかっこいいテーマファイルを探してる人にオススメの無料テーマのまとめ | コリス
縦長の1ページコンテンツ、パララックスエフェクト、カード状のレイアウト、固定ヘッダ、ガラス越しのようなブラーエフェクトなど、最近のデザインのトレンドをうまく取り入れたWordPressのテーマファイルを紹介します。 テーマファイルは全て無料で利用でき、単に見るだけでもデザインの参考になるものばかりです。 Pisces デモ スタイリッシュなデザインのレスポンシブ対応のテーマファイル。 Aquari... 続きを読む
[CSS]アニメーションで細かい動きを加えたカード状のドロップダウンのデモがかなりかっこいい | コリス
上記はデモをアニメーションgifにしたもので、初期はアイテムがカード状に重なっており、クリックすると中身がするすると表示されます。 最初にぱかっと開くの面白いですね、各アイテムはホバーでハイライトもします。 実際の動きは、下記ページでご覧ください。 CSS3 Card Deck Drop Down HTML 各アイテムはリスト要素でシンプルな実装です。 <div class="card-drop"... 続きを読む
Google“第3のOS”「Fuchsia」にUI「Armadillo」追加 - ITmedia NEWS
Googleが2016年にGitHubで公開した新OS「Fuchsia」に、Androidに似たカード状のシステムユーザーインタフェース「Armadillo」が追加された。 米Googleが昨年8月に GitHub で公開した新しいリアルタイムOS「 Fuchsia 」(フクシア、と読む)に3月、ユーザーインタフェース(UI)「Armadillo」(アルマジロ)が追加されていた。ロサンゼルスでコン... 続きを読む
[CSS]アイデアが面白い!画像無しで、かわいいデザインのラベルをスタイルシートで実装するテクニック | コリス
ペロっとかぶさっているようなかわいいデザインのラベルを画像無し、CSSで実装したテクニックを紹介します。 カード状のコンテンツにも画像に使っても面白そうです。 Label Overlay 実装は、こんな感じ。 HTML ラベルは画像無し、spanを2つ使用して実装しています。 <div class="product"> <div class="product-image"> <span class... 続きを読む