「ma-san web design」の管理者。東京都・千葉県(千葉市・四街道市・浦安市・佐倉市)・宮城県(仙台市)を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。 「Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。 当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。
![お探しのページは見つかりませんでした - ma-san web design- 千葉県(四街道市・千葉市・佐倉市)でホームページ制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5244548e4256364377b368604435a4857b130b2/height=288;version=1;width=512/https%3A%2F%2Fma-san.org%2Fassets%2Fimages%2Fmain_ruri_gr.jpg)
Today we want to share some simple icon hover effects with you. The idea is to create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements. For the icons we are using an icon font (Eco Ico by Matthew Skiles, created with the IcoMoon app) which we add using the :before pseudo-class. The markup only uses an anchor for the icon and we wrap a set in
JqueryでBoxのロールオーバー時に 背景をふわっと浮かび上がらせるjqueryコードです。 背景としてひとつ多くBOXを取っているのがポイントです。 Js CSS .box a{ display:block; width:100px; height:100px; } .box_ov{ width:100px; height:100px; position:relative; overflow:none;} .box_bk{ width:100px; height:100px; background: gray; display:none;} .box{ width:100px; height:100px; position:absolute; top:0px; left:0px;} HTMLコード
以前作成した、透明度を利用するだけのロールオーバープラグイン、それを少し使いやすいようにバージョンアップいたしました。 今回は少しカスタマイズしやすいようにしたのと、機能をひとつ追加してみました。 ※追記(09/07/24) 若干修正し、2.1にバージョンアップしました。 (今までのでも問題なく動作します。) ダウンロード プラグインはjQueryと下記プラグインを一緒に使ってください。 opacity-rollover2.1.js 透明度を利用したロールオーバー これは以前と同じ通常の使い方。マウスが画像の上にのると、画像の色が薄くなるロールオーバー。 ■使い方 $('#over1').opOver(); 適応させたいセレクタを指定し、opOver()で適応させる。 ■サンプルプレビュー これだけでも十分使えると思われます。画像を複数用意しなくとも、色の濃い画像を用意するだけで画像が変わ
SEO的にはあまり推奨されない?と言われるクリッカブルマップですが、時には便利な場合も。ただ、ロールオーバーさせるのにCSSでは無理があります。そこで非常に簡単な方法ではありますが、javascriptを使ってロールオーバーさせる方法を紹介します。※2011.09.01:内容の再構成とjqueryでの方法を追加しました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く