CSS
簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ http://www.nxworld.net/tips/button-mouseover-event.htmlこっちもアニメーションさせたい時に便利…φ(・ω・ ) キラン、とさせるのがカッコいい。
caniuse.com http://caniuse.com/どのブラウザが、どのバージョンが、どのCSS3のプロパティに対応しているか調べたい時にcaniuse.comを利用します。 CSS3のプロパティを使う時に参考にしたいと思います。
CSS reset http://yuilibrary.com/yui/docs/cssreset/以前、デフォルトCSSをリセットという記事を書きましたが、わざわざ「reset.css」を作らなくてもHTMLのhead内に1行追加するだけでデフォルトCSSをリセットすることが出来ます。 titleタグの下に追加する…
意外に簡単！CSS3を使ったシンプルな横メニューの作り方 http://bit.ly/PhSURCφ(・ω・ )メモメモ…。 参考にさせて頂きます。
CSSによる透過PNG角丸ボックス http://www.func09.com/wordpress/archives/66背景がある場合、角丸ボックスの部分が透過しなくて悩みました。 CSS3を使えば解決するけど、全てのブラウザに対応はしないので納得いかずに色々と調べていたら、このページに辿り…
HTML5で追加されたフォームタイプをいくつか見ていきましょう(。・ω・。)ﾉHTMLファイルのほうは、下記の通りに入力します。 <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>HTML5のフォームタイプ</title> </head> <body> <form method="post" action="#" id="myform"> <p> <label>URL</label> </p></form></body></html>
背景を半透明にしてみましょう(。・ω・。)ﾉ 今回はCSS3を使うので、ブラウザによっては表示されないかもしれません。まずは、適当に背景を用意して、background-imageプロパティで表示させます。 自分はフリー素材から取ってきました。 ←こちらのサイトから…
入力フォームや送信ボタンを画像で装飾してみましょう(。・ω・。)ﾉまずはテキストボックスと検索ボタンの画像を作ります。 自分はFireworksでこんな風に作ってみました。 HTMLファイルのほうは、下記の通りに入力します。 <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>新入力フォームや送信ボタンを</title></link></meta></head></html>…
5月26日に、入力フォームにマウスをフォーカスさせると、背景の色が変わるように設定することについて記事を書きました。今回は入力フォームにカーソルを重ねると、色が変わるように設定してみます。 :hoverセレクタを利用することによって色が変わります。H…
前の「マウスオーバー処理」という記事の内容にちょっと似てるかもしれませんが、グローバルナビゲーションを作っていきましょう(。・ω・。)ﾉまずはデフォルト用、マウスオーバー用の画像を作ります。 自分はFireworksでこんな風に作ってみました。（即行で…
各ブラウザによってデフォルトで適用されるスタイルがいくつかあります。 そのデフォルトCSSをいったんリセットすることにより、異なるブラウザでの表示を統一し、効率的にCSSの設定が出来るようになります。「reset.css」と名前を付けて保存して、HTMLに読…
前回の「画像を可変」に似たような感じで、今回はCSSのほうに画像を配置して狭くしたり、広くしたりしてみましょう(。・ω・。)ﾉ HTMLファイルのほうは、下記の通りに入力します。 <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>画像を可変</title> </head> <body> <div id="layout"> <div id="photo"></div> <p>CSSに画像を配置し…</p></div></body></html>
ブラウザのウィンドウの大きさによって画像を狭くしたり、広くしたりしてみましょう(。・ω・。)ﾉ HTMLファイルのほうは、下記の通りに入力します。 <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>画像を可変</title> </head> <body> <div id="navbar"> <div class="photo"> </div></div></body></html>
画像にマウスを乗せると、マウスオーバー用の画像に切り替わり、クリックするとアクティブ用の画像に切り替わるように設定してみましょう(。・ω・。)ﾉまずはデフォルト用、マウスオーバー用、アクティブ用の画像を用意し、加工します。 自分はこんな感じに加…
入力フォームにマウスをフォーカスさせると、背景の色が変わるように設定してみましょう(。・ω・。)ﾉ HTMLファイルのほうは、下記の通りに入力します。 <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>フォームテクニック</title> </head> <body> <p>名前：<input type="text" name="example"></p> </body> </html>CSSフ…
角丸ボックスを作ってみましょう(。・ω・。)ﾉ CSS3で簡単に作れるみたいですが、画像を用いて作ってみます。まずは角丸部分が欲しいので、グラフィックスソフト（自分はFireworksを使いました）で角丸長方形を描いて、スライス機能を使って4箇所、角丸をスラ…
