on:2012年11月16日sponsorsフォームのテキスト入力欄とボタンをCSS3でスタイルするステップバイステップで学ぶチュートリアルを紹介します。SheetCSS3でスタイルするテキスト入力欄CSS3でスタイルするフォームのボタンCSS3でスタイルするテキスト入力欄HTMLは非常にシンプルです。classのhogeは、随時変更して利用してください。/></form>まずは、ベースとなるスタイルシートです。20px;width:300px;枠線を角丸にします。3px;ディテールをアップするために、内側にシャドウをつけます。0.2);シャドウを上部だけにして、上品な感じにします。rgba(0,0,0,0.5);白のシャドウを下だけ適用してみます。これは色付きの背景で映えます。3px;最後に、アクティブ時に枠線のカラーが変わるようにスタイルします。#EEA34A;}CSS3でスタイルするフォームのボタンボタンのHTMLも非常にシンプルです。classのhogeは、随時変更して利用してください。class="hoge">Submit</button></form>まずは、ベースとなるスタイルシートです。sans-serif;font-size:1.2em;text-transform:uppercase;font-weight:bold;color:#333;cursor:pointer;ボタンにグラデーションを適用してみます。*/内側の上部だけに白のシャドウを適用します。このエフェクトは枠線があると効果的です。0.5);ボタンの下に薄くシャドウを適用します。0.2);上内側の白シャドウと下のシャドウをあわせたものです。0.2);更に、角丸にします。3px;最後はラベルにもエフェクトを加え、視認性をアップさせます。