引き戸技術を活用したボタンデザインのグラフィカルチュートリアル_体験交流

この記事は翻訳された記事です。全文アドレス: http://diger.cn/article .asp? id=351
元のアドレス: http://www.filamentgroup .com/ lab/buttonelement/

particle tree は最近、ボタン要素を設計するために考案したテクニックを説明する記事を公開しました。熟練していない人にとって、テーブル ボタンはカスタマイズが難しいことで知られています。一般的な解決策は、ブラウザーが提供するデフォルトのボタンを使用するか、グラフィカル入力を使用することです。グラフィック入力が目的の結果を完了すると、「baked-in」というテキストを含む各ボタンの新しいグラフィックの作成を要求します (ホバーとの交換については言及されていません)。

particle tree のテクノロジーは信頼性の高いソリューションを提供しますが、私たちのニーズを満たすことはできません。スライディング ドア テクノロジーを使用したボタン、つまりスクロールやフォームの送信に javascript を必要としない実際の html テキストが必要です。これらの条件を満たすということは、入力要素とアンカー要素が除外されることを意味します。明らかに、ボタン要素が唯一の選択肢です。次の手法は、スライディング ドア テクノロジを使用したクロスブラウザ ボタン手法を示しています。


デモを見る

タグ:

コードは次のとおりです:

<button value="submit" class="submitbtn"><span>submit</span></button>

css:

プログラム コードは次のとおりです:

button {   
  border:0;   
  cursor:pointer;   
  font-weight:bold;   
  padding:0 20px 0 0;   
  text-align:center;   
}  
button span {   
  position:relative;   
  display:block;   
  white-space:nowrap;   
  padding:0 0 0 20px;   
}  
/*blue buttons*/  
button.submitbtn {   
  background:url(images/btn_blue_right.gif) right no-repeat;   
  font-size:1.3em;   
}  
button.submitbtn span {   
  height:50px;   
  line-height:50px;  
  background:url(images/btn_blue_left.gif) left no-repeat;  
  color:#fff;   
}  
button.submitbtn:hover {  
    background:url(images/btn_blue_right_hover.gif) right no-repeat;   
}  
button.submitbtn:hover span {  
    background:url(images/btn_blue_left_hover.gif) left no-repeat;   
}

ie6 および ie7 用の css (場合によっては必要)
コードは次のとおりです。

button {   
  width:auto;   
  overflow:visible;   
}  
button span {   
  margin-top:1px;   
}

ご覧のとおり、各状態は2 つのイメージ (合計 4 つのイメージ) を使用します。さらに単純化すると、これらの状態は 2 つに変換できます。しかし、このアイデアの最初のテストでは一貫性のない結果が得られました。











ブラウザのサポート:
ie6、ie7、firefox (mac/pc)、safari、opera、camino など。

警告: ie6 でホバーを機能させるには、クラス トリガーを作成する必要があります。画像の交換ほど悪くはありませんが。

上記は、スライド ドア技術を使用したボタンのデザインに関するグラフィック チュートリアル_体験交流の内容です。その他の関連コンテンツについては、php 中国語 web サイト (www.php.cn) に注目してください。