HOME > opacity

opacity一覧

2015.09.02

レスポンシブWebデザインでiPhoneのバージョンios8.4.1でリンクが飛ばない

レスポンシブWebデザインでiPhoneのバージョンios8.4.1でリンクが飛ばない

レスポンシブWebデザインでiPhoneのバージョンios8.4.1でリンクが飛ばない現象が起きました。原因はマウスオーバーアクション(hover)による設定かと思われましたが、他の設定を検証。cssのopacityで設定するとリンクが飛ばないなら何で設定したら良いのでしょうか。

2015.06.09

CSSを使ってマウスオーバーした時に画像をゆっくりとフェードイン・アウトさせる方法

CSSを使ってマウスオーバーした時に画像をゆっくりとフェードイン・アウトさせる方法

ボタンにマウスを重ねると画像が変わったり、色が変わったりするマウスオーバー(ロールオーバー)アクション。パッと変わるのが普通に良くあるパターンですが、少し時間をかけてゆっくり薄くなるのも気持ちが良いものです。CSSを使ってマウスオーバーした際にゆっくりと色が薄くなっていく効果を付けます。

2014.06.13

opacityとrgbaの違いは?cssで背景を透過する方法

cssで透過

CSS3.0以前は背景を透過する時は、photoshopなどの画像編集ソフトで透過したものを「PNG」形式で書き出していました。今でもブラウザなどに合わせたり複雑な背景を使用する場合は画像を使いますが、単色である場合はcssで対応する事が多くなりました。その際背景色を透過する場合はどうしたらいいのか。opacityを使って設定する?rgbaを使って設定する?どう違うの?今回は両方実験してみましょう。

2014.03.16

hoverすると白黒画像が透過して背景画像が現れるボタン

透過ボタン

ボタンの作り方は色々あります。jqueryで画像を切り替えたり、aタグに背景を入れて切り替えたり本当に様々です。その中で1つ、ロールオーバーすると透過するボタンを設置してみようと思います。背景に設置する事で軽くもなるし、htmlも綺麗になります。1つのデザインを使いまわす用な使い方をすると読み込むデザインを変えるだけでサイト全体のボタンデザインを変える事もできるので、使い勝手は良いかと思います。

2014.03.15

CSS「opacity」でIE8以下まで対応し透過する方法

opacityをIE8に対応

CSSで「opacity」を設定すると透過する事ができます。しかしIE8以下となると(思った通りですが・・・)対応していません。んもぉ~またIE8以下ですか。と思ってしまいますね。せっかく透過が気軽に出来るのに、これではIE8が使われている段階では使えません。勿体ないので、IE8以下でも「opacity」を使える様にしちゃった方がいいですね。IEは手のかかる子の様な感じもしますが、WindowsXPが保証対象から外れてもまだIE8標準のVISTAが残ってます。IE6・7はあまり見る機会は無くなってくるかもしれませんが、IE8はまだ数年お付き合いして行かなければならないですね。