jQuery/CSS3で雲をゆらゆらさせる 雲の画像を背景に設定してゆらゆらさせてみました。 jQueryバージョンとCSS3バージョンでお送りいたします。 投稿日2013年03月29日 更新日2013年03月29日 はじめに雲の画像を用意します。 パララックス的にした方がクールだと思ったので大きい画像と小さい画像を作成しました。 わかりやすいように背景がブルーになっていますが、実際は透過pngです。 ちなみに雲の素材はこちらの素材サイト様からお借りいたしました。 商用フリーで使える影絵素材サイト シルエットデザイン jQueryバージョン 最初はjQueryバージョンです。 画像が2つあるのでdivを2つ作成して適当なidを割り当てます。 html <div id="main-img"><div id="bg"></div></div> CSSはそれぞれのdivに作成した画像を「back

# 2014.8.25 重要な追記 このハックは、今年4月あたり(FirefoxNightly 31?)から効かなくなってます。。 元記事 https://gist.github.com/joaocunha/6273016 でも、どうするよ的な議論＆試行錯誤が交わされていますが、:-moz-any(hoge):before プロパティを使った方法で消せるのを見つけた人がいるようです(FF3.6～限定)。 http://jsbin.com/pozomu/4/edit なんだか素直にJS使った方がいい気がしてきますね。 ---- 今までは、フォーム内の特定の部品(radioボタン、select要素など)のデザインを好きなように変更しようと思ったら、 JavaScript(有名所ではuniform.jsとか…)を使って色々と手を加えてやらなければいけませんでした。 でも最近、Chrome等のモダ

CSSスプライトを使用して　トップページや,サイドのバナー画像を置換していますが、 最近までテキストを-9999pxで飛ばしていました。これで良いと　そのままにしていましたが、別の方法を探していました。 Text-indent: -9999px;　はやっぱり不自然ですね。 変更しましたのでその備忘録です。 今までの記述 HTML [html] <a href="../"  id="sample01"　class="sprite-サンプル">リンク先</a> [/html] CSS [css] #sample01 { text-indent: -9999px; display: block; } .sprite-サンプル {  /*置き換える画像*/ background:url(http://url) no-repeat; background-position: 0 -436px; wi

画像を使ったリンクで、背景画像をスタイルシートのポジションで移動させて ロールオーバーの効果を作る方法があります。 まずは以下のような画像を用意します。 a.link-image { background-image: url(img/link-image.png); width: 200px; height: 45px; text-indent: -9999px; } a.link-image:hover { background-position: bottom; } これと同じように、フォームボタンに適用してみたのですが、IE（Internet Exproler）で見ると 背景画像どころか何も表示されません。 Firefox、Safari では、Mac版もWin版も問題なく出ています。 input[type="submit"] { background-image: url(img/

ここ最近エントリーさぼり過ぎてたんで、ちょいネタでも上げていこうっていうスタンスで。 発生条件がイマイチわかってないんですけど、フラッシュを設置した際に、下にpaddingっぽい余白っていうか隙間っていうかが5px～10pxほど空くことがありませんか。IE以外のブラウザで。 こんな風に↓ 図みたく、分かりやすい枠線が有ると露骨に気づくわけですが。 で、まぁコレは画像でも発生するベースラインのアレと同じなんで、解決方法は以下のように。 object, embed { vertical-align: top; } 値は、bottomでもダイジョブです。 embed に指定が無いと、Firefoxで余白が発生して、object に指定が無いとSafariで発生するんで、どちらも指定すると良さげです。

ファイナルファンタジー オール ザ ブレイベスト

iPhoneの時だけ、どうしても余計な背景が出てきてしまう状況がありました。 input要素のボタンをテキストに変更した時にハマったことと解決策をメモしておきます。 この事象についてキーワードを並べると、 CSSを確認しても背景に無いもかかってない。 importantも効かない。 iOS SimulatorでCSS全部確認しても、全く背景色の要素が存在しない。 Androidだと背景は出てこない大丈夫。 完全にはまりました。 このように、inputに背景がでてきてしまいます。 iPhoneの時だけです。Androidはの背景は#fffで白くなっている様子。 これはいわゆるCSSのリセットで解決できました。

<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:

RGBaカラーを使って全体に統一感のある横メニューを作ってみます。RGBaカラーといっても使うの色は白（rgba(255,255,255,0.4)など）と黒（rgba(0,0,0,0.1)など）だけで、その透明度を変えて様々なところで使っています。 先日書いた「カラーツール「0to255」で色を決めてメニューを作ってみる」がなかなか好評でしたが、今回も出来上がりは同じようなメニューになります。 RGBaカラーについては、以前書いた「透明度を表す「opacity」 と 「RGBa」の違いと使い分け」も参考になると思いますのでぜひご覧ください。 早速コードを見てみます。まずはHTMLですが、これは特に問題ないと思います。 <ul id="menu"> <li><a href="#">IE</a></li> <li><a href="#">Firefox</a></li> <li><a href

Mobile Safariは自動フォントサイズ機能があり、iPhone向けサイトを表示中に横画面にすると、一部の文字列は勝手に文字サイズが大きくなって自動調整されてしまう。 画面幅基準で調整されている感じ。 これを無効にするにはCSSで -webkit-text-size-adjust:none; と指定すれば良い事を発見！ これで縦位置でも横位置でも同じ文字サイズで表示される様になった！