ホーム > HTML+CSS

カード型デザインのマウスホバーエフェクト

ブログアイキャッチ画像050

read more

カード型デザイン時のシンプルなマウスホバーのエフェクトを8パターン作成したので書き留めておきます。

続きを読む»

CSS3でbox-shadow

ブログアイキャッチ画像049

read more

いつも何気無く使用しているbox-shadowですが、ここで見直しのため、色々な設定パターンを書き留めておきます。

続きを読む»

css tableで背景色を交互に変える方法

ブログアイキャッチ画像040

read more

cssの擬似クラスnth-childを使用して、テーブル(表)の行または列の背景色を交互に変えて視認性をアップさせます。行や列を追加・削除しても自動的に背景色を変えてくれるのでとても便利です。nth-childはIE8以下では未対応ですが、マイクロソフトはIE8のサポートを終了したので、これからは使用していこうと思います。

続きを読む»

CSSでマウスホバー時に画像に吹き出しを表示

ブログアイキャッチ画像038

read more

cssのみで作成したマウスホバーエフェクトで、画像にマウスを重ねると画像の上又は下に吹き出しが表示されます。写真の内容についての説明をする時に使えるかもしれません。

続きを読む»

CSSでラジオボタンの大きさを変える方法

ブログアイキャッチ画像034

read more

以前CSSでチェックボックスの大きさを変える方法を書きましたが、今回はラジオボタンの大きさを変える方法を書き留めます。

続きを読む»

CSSとjqueryでトップへ戻るボタンの作り方

ブログアイキャッチ画像033

read more

ページをスクロールするとウィンドウの右下に表示されるトップへ戻るボタンの作り方を書き留めます。CSSでサンプルボタンを作成しましたので、そのまま使用しても良し、改良しても良いです。

続きを読む»

CSSでマウスホバー時に文字列を表示するエフェクト

ブログアイキャッチ画像030

read more

これはcssのみのマウスホバーエフェクトで、画像をマスクしてその上に文字列(キャプション)を表示します。今回は割とシンプルな動きのあるものを13種類作成しましたので書き留めておきます。

続きを読む»

cssでハンバーガーメニューのアイコンを作成

ブログアイキャッチ画像028

read more

スマートホンなどに使われているハンバーガーメニューのアイコンを画像を使わずにCSSで作成しました。マウスでクリックすると3本線のハンバーガーメニューが「X」に変わるようにjqueryで操作しています。
ただの3本線ではメニューだとわかりにくいと思うので、枠で囲んで影をつけてボタンのように見えるようにしました。
続きを読む»

CSSで画像のマウスホバーエフェクト

ブログアイキャッチ画像027

read more

マウスホバーで画像を拡大・縮小・回転などの動きは、今ではよく見るマウスホバーエフェクトです。マウスホバーのエフェクトは、アイデア次第でかなりのパターンが作成できますね。ここでは基本的なパターンを示します。ちなみにマウスホバーとマウスオーバーは同じ意味です。
続きを読む»

画像の上に文字列を表示する方法

ブログアイキャッチ画像024

read more

CSSのpositionプロパティを使用して画像の上に文字列を重ねて表示する方法を示します。おまけとしてアニメーション機能を使用して文字列をスクロールさせます。重ねることにより文字の内容や位置の変更にも早く対応できて良いですね。

続きを読む»