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

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

PHP中文网

リリース： 2016-05-16 12:07:39

オリジナル

1951 人が閲覧しました

この記事は翻訳された記事です。全文アドレス: 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 でホバーを機能させるには、クラストリガーを作成する必要があります。画像の交換ほど悪くはありませんが。