タグ:CSS3 ( 4 ) タグの人気記事

画像に動きがあるロールオーバー効果(マウスオーバー効果)をつける方法

※この記事はブログカスタマイズの中級以上の方向け(HTML/CSSの基本を理解している方向け)です。

ブログやホームページで、リンクが設定されている画像にマウスを合わせると、画像が明るくなったりして注意を引くことがあります。その結果、画像をクリックしてもらいやすくなります。

この動きを ロールオーバー効果 とか マウスオーバー効果 などと呼んでいます。(以下、ロールオーバー効果)

CSS3 で追加された transform というプロパティを使うと、画像のロールオーバー効果に動きを持たせることがかんたんにできます。

例えば、以下のスタイルを使うと、画像が1.1倍に拡大されて時計回りに2度回転するロールオーバー効果になります。
a img:hover {
transform: scale(1.1) rotate(2deg);
}


これだけだと画像が瞬時に切り替わってしまって趣がないので、transition プロパティを使ってじわ~っと切り替えるといいかんじになります。
a img {
transition: transform 0.6s;
}

a img:hover {
transform: scale(1.1) rotate(2deg);
}
上の例では、0.6秒かけて画像を切り替えています。

このブログでは、以前に こちらの記事 で紹介した opacity プロパティも使って、さらに画像を明るくする効果も持たせてみました。

スタイルは以下のようになっています。
a img {
transition: opacity 0.6s, transform 0.6s;
}

a img:hover {
transform: scale(1.1) rotate(2deg);
opacity: 0.5;
}

d0015124_18313482.jpg


スタイルに数行を付け加えるだけで、こういった「おっ!!」と感じさせる動きを実現できるんです。

パソコン教室くりっくでは、ホームページのスタイルを基本からじっくりと勉強したい方向けのマンツーマン講習を行っています。興味がある方はお気軽にお問い合わせください。

【問い合わせ電話番号】 025-779-2843
[PR]

by pc_klik | 2016-11-28 19:00 | ブログ TIPS

Internet Explorer 8 + メディアクエリ の不具合を調べてけっこう疲れました

お客さんのホームページをレスポンシブデザイン(スマホ対応)にする作業を行っていて、順調に進んでいたのですが、Internet Explorer 8 で表示したときに不具合が起きることが判明しました。

CSS3メディアクエリに対応させるために css3-mediaqueries.js を読み込んでうまくいくはずなのに、なぜかスタイルが意図した通りにならないんです。

HTML ファイルや CSS ファイルをチェックしたところ、どこにも問題はないはずなのですが、なぜかうまくいかない・・・。

「メディアクエリ Internet Explorer 8」でググってみると、やはり Internet Explorer 8 には注意事項がけっこうあるようで、いろいろと解決策が見つかるのですが、どれも該当せず・・・。

試行錯誤しながらようやく「たぶんこれだろう」という原因を突き止めました。

けっこう疲れました。
[PR]

by pc_klik | 2014-11-03 15:30 | パソコンのこと・あれこれ

画像にロールオーバー効果(マウスオーバー効果)をつけるかんたんな方法

ブログやホームページでリンクが設定されている画像にマウスを合わせると、画像が明るくなったり別の画像に切り替わったりすることがあります。

このことを ロールオーバー効果 とか マウスオーバー効果 などと呼んでいます。(以下、ロールオーバー効果)

ロールオーバー効果をつけておくと、そこにリンクが設定されていることが分かりやすく、クリックしてもらいやすくなります。

ロールオーバー効果をつける方法はいくつかあります。

マウスを合わせたときの画像を別に用意しておいて、JavaScriptスタイルシートで切り替えるやり方が従来は一般的でした。

しかし、設定対象の画像がたくさんある場合、例えばブログの記事に載せた写真をクリックして拡大表示して見てもらう場合には、別画像を用意する手間がわずらわしく、上記のやり方は現実的ではありません。

CSS3 によるロールオーバー効果

そのような場合は、CSS3 で追加された opacity というプロパティが手軽でけっこう役に立ちます。

スタイルシートに以下の行を追加するだけで、リンクが設定された画像にマウスを合わせたときに画像が明るくなります。
a img:hover {
opacity: 0.7;
}

さらに、CSS3transition プロパティを使うと画像がじわぁ~っと切り替わるようにできます。
a img {
transition: all 0.3s ease-in-out 0s;
}
a img:hover {
opacity: 0.7;
}


opacity と transition を使う上での注意点

opacity と transition はブラウザの種類やバージョンによっては動作しません。

例えば、WindowsXP で使われている Internet Explorer 8 以下のブラウザでは動作しませんし、Firefox だとじわぁ~っと切り替わりません。

より多くのブラウザ環境で期待した通りの動きをさせるためには上記に加えてさらに何行か書かないといけませんが、ブログに載せた写真に設定する場合のように
動かないブラウザがあってもあまり気にしない

というときには使えそうです。

ということで、このブログのスタイルシートに上記の設定を追加しました。
[PR]

by pc_klik | 2014-08-31 13:50 | ブログ TIPS

エキサイトブログの記事内の写真にぼかした影をつける方法

スタイルシートを使って、このエキサイトブログの記事に載せてある写真に自動的にぼかした影をつけて立体感を出すようにしてみました。

d0015124_1705922.jpg


通常、画像編集ソフトでこのような影をつけるためには、ドロップシャドウなどと呼ばれる加工をしますが、そういった加工をせずにスタイルシートによって自動的に写真に影をつけてみよう・・・ということです。

影を表示するためにスキン編集でスタイルシートに追加したのは以下の行です。
box-shadow: 5px 5px 5px -3px #999
指定内容の説明は以下の通りです。
  • 1番目の 5px :右方向(x方向)にどれだけ影をずらすか
  • 2番目の 5px :下方向(y方向)にどれだけ影をずらすか
  • 3番目の 5px: 影をどれだけぼかすか
  • -3px: 影をどれだけ拡大・縮小するか (マイナスを指定すると縮小になる)
  • #999 : 影の色

ちなみに、Internet Explorer 8 までだと box-shadow による影は表示されません。

Internet Explorer 9 や他のブラウザで見ると写真にぼかした影が表示されます。

関連記事


[PR]

by pc_klik | 2012-05-08 14:00 | ブログ TIPS

魚沼情報サービスのホームページへ | パソコン教室くりっくのホームページへ | ブログトップ   昨日:   今日:   合計:
AX