タグ

cssとsampleに関するspade9970のブックマーク (4)

  • CSSの実装状況で変わるボックスのデザイン方法

    Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない1つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS

  • セクシーなCSSホバーボタンを作成するチュートリアル:phpspot開発日誌

    NuBlue Blog Sexy CSS Hover Button needed to make a big button which gave the illusion of being pressed in when a user hovered the mouse over it for a client. セクシーなCSSホバーボタンを作成するチュートリアル。 次のようなボタンを作成するのに、PhotoShopでのチュートリアル&CSSサンプルが紹介されています。 ボタンは、ホバー時に画像が切り替わります。 HTMLコードは次のようにXHTML。 <ul id="bigbuttons"> <li class="gallery"> <--put your link in here--> </li> <li class="contact"> <--put your link in he

  • CSSデザインされたTextAreaサンプル:phpspot開発日誌

    Styled Text Area by CSS-Tricks CSSデザインされたTextAreaサンプル TextAreaの右端に画像を表示しています。 具体的なCSSコードはこちら 関連エントリ CSSベースのクールなフォーム、サンプル集 JavaScriptCSSで独自デザインのselectボックスを作成 CSSで独自にデザインされたチェックボックス&ラジオボタン CSSとButtonタグを使ったクールなボタンサンプル集 デフォルトのフォームをクールにカスタマイズする方法 Niceformでエレガントなフォーム生成

  • CSSデザインカタログ

    対応ブラウザは Windows:InternetExplorer6,InternetExplorer7,Firefox2,Opera9 Mac:Firefox2,Opera9,Safari2 ですが,ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7,Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上,分類コード(div011-hp,table010 など)を class名にしてありますが,実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合,既存

  • 1