自分用に一覧化したものがほしくて作ったのでシェアします。 ボタンのホバーエフェクトとして見かける機会も多くなった、ホバーしたら背景がスライドしたり領域を覆うアニメーションのサンプルです。 アニメーションによってはホバー時の見栄えを維持するのではなく、ホバー時に一時的に見えるようなタイプもあります。 共通のHTML・CSS ここで紹介しているサンプルはいずれも下記のようなシンプルなHTMLをベースに使用しています。
![CSS:ボタンホバー時に背景がスライドしたり領域を覆うアニメーションサンプル 10 - NxWorld](https://cdn-ak-scissors.b.st-hatena.com/image/square/a78808122724c22516ab0a9feaf3e74b3d5865d9/height=288;version=1;width=512/https%3A%2F%2Fwww.nxworld.net%2Fthumbnail%2F10-css-hover-fill-animation.png)
Material Designを使用してみたいけど、時間がない、手間をかけたくない、という人にぴったりな、Material Designが採用された商用でも個人でも無料で利用できるBootstrap 4ベースの新作テンプレートを紹介します。 企業向けサイト、プロダクトのランディングページ、ポートフォリオやギャラリー、ブログ用のテンプレートが揃っています。 Material Design for Bootstrap 4 MDB- GitHub Bootstrapの特徴や基本的な使い方は、下記の記事を参考にどうぞ。 参考 Bootstrap 4の主な特徴、IE8のサポート終了、Sassに移行、CSSの単位はremとem採用 Bootstrapのグリッドシステムの基本な使い方 新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ ではMaterial De
UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの1つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける
日本ハム新球場候補地のきたひろしま総合運動公園周辺=北海道北広島市で2017年9月、本社機「希望」から竹内幹撮影 「きたひろしま総合運動公園」 23年春に新球場開業予定 プロ野球・北海道日本ハムファイターズの親会社、日本ハム(大阪市)は26日、東京都内で臨時取締役会を開き、本拠地・札幌ドーム(札幌市豊平区)の移転候補地を、札幌市に隣接する北広島市の「きたひろしま総合運動公園」に決めた。周辺にホテルや温浴施設などの商業施設を配置した「ボールパーク」を整備する計画で、球場は2023年春の開業予定。 球団は04年、本拠地を東京ドームから札幌ドームに移転し、北海道唯一のプロ野球球団となった。しかし、札幌ドームは札幌市を中心とした第三セクター方式の運営で、広告や飲食などによる売り上げの大半が球団の収入にならず、観客席の改修や人工芝改善などで条件が折り合わないことに球団が不満を強め、16年から移転の検
/* センターに寄せているだけなので、参照しなくてOK */ .bg { height: 100vh; background-color: #000; display: flex; justify-content: center; align-items: center; } .border { width: 400px; height: 400px; border-radius: 50%; border-top: 10px solid #fff; background-color: #fff; animation-name: spin; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear; } /* 回転するkeyframe */ @keyframes
bonfire frontendで発表した今後のフロントエンドの話です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く