11月2011

文字遊び(1)

フォントを使って遊んでました。

手も足もでません

2011年11月21日2:37 AM| カテゴリー： 見習い奮闘記,閑話休題| コメント (0)

filterとopacityを使ってみる2　クイズ　こんなんつくってみましたけど…

filterとopacityを使って、ラクチンhoverはグッドです。はは、なんとかうまくいきましたですぅ。これらのプロパティは、透過度を決めるものなので、透ければ下が見えるというものです。ということは、ボックスを重ねてやって、下のボックスのほうに画像を背景で貼り付けておけば、上の画像を透けさせたときのみ、下の画像が見えるのではないかなぁと思い、実験です。

ちょっとクイズを作ってみました。下のボックスの背景画像に解答が書いてあります。上に乗っかってるボックスには、選択肢が書いてあります。どうでしょう。

XHTML

<p>わたしはだれ？</p>

<p>以下の三択から答えてみてくらさい！答えにマウスをのせてみてね。</p>

<div class="transout" id="fst"><div class="transin"><a href="#"><img src="img/a1_n.gif"width="200" height="100" alt="" /></a></div></div>

<div class="transout" id="sec"><div class="transin"><a href="#"><img　src="img/a2_n.gif" width="200" height="100" alt="" /></a></div></div>

<div class="transout" id="thd"><div class="transin"><a href="#"><img src="img/a3_n.gif" width="200" height="100" alt="" /></a></div></div>

CSS

div.transout {
	margin-bottom:10px;
	width:200px;
}
div.transin a {
	text-decoration:none;
	opacity:1;
}
div.transin a img{
	width:100%;
	filter:alpha(opacity=100);
	border:none;
}
div.transin a:hover {
	opacity:0;
}
div.transin a:hover img{
	filter: alpha(opacity=0);
}
div#fst {
	background-image:url(img/a1_on.gif);
}
div#sec {
	background-image:url(img/a2_on.gif);
}
div#thd {
	background-image:url(img/a3_on.gif);
}

サンプルはこちら

なんか、もっと普通に実装できそうだけど、おもしろいですぅ。
たのしくなってきた見習いです。

追記　悲しくなる現実に気づきました。

おまけのクイズですが、下のボックスがhoverのときのみ透けて見えるというのは、面白いと思ったのですが、よく考えると、これって、hoverのときに、背景画像を別のを読み込めばいいだけで、そしたらボックスを2個も重ねることないということにようやく気づきました。一生懸命考えたけど、「休むに似たり」でした。とほほ。

2011年11月20日1:01 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)

filterとopacityを使ってみる１

リンクに画像を使うとき、マウスオーバー画像を別に準備するのって、面倒。ちょっと色を薄くするだけでも、感じはでます。そういう時、hover用に薄い色の画像をもう一枚準備しなくても、CSSのみで色を薄くすることができます。

XHTML

<p id="trans"><a href="#">

<img src="img/btn01.gif" width="100" height="50" alt=""/></a></p>

CSS

#trans a {
	text-decoration:none;
	opacity:1;
}
#trans a img{
	width:100px;
	filter: alpha(opacity=100);
	border:none;
}

#trans a:hover{
	opacity:0.7;
}
#trans a:hover img{
	width:100px;
	filter: alpha(opacity=70);

}

サンプルはこちら

opacityはIEでは対応していないのですが、同じことがIE独自のfilterで実現できます。ただし、このとき、IEにはaでなく、a imgに設定してあげる必要があります。また、filterは適用する要素にwidthかheigthが指定していないとうまくいかないことがあるようなので、きっちり追記です。opactiyは1が不透明で、0がまったくの透明、filterは100が不透明で0がまったくの透明になります。

これって、いろいろ遊べそうな気がするなぁと、わくわくする見習いですぅ。

2011年11月19日1:01 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)

« 古い記事 新しい記事 »