ปุ่ม Imageless ของ Google

เมื่อเร็ว ๆ นี้มีบทความบางส่วนเกี่ยวกับปุ่มไร้ภาพใหม่ของ Google:

• http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
• http://stopdesign.com/eg/buttons/3.0/code.html
• http://stopdesign.com/eg/buttons/3.1/code.html
• http://gmailblog.blogspot.com/2009/02/new-ways-to-label-with-move-to-and-auto.html

ฉันชอบการทำงานของปุ่มใหม่เหล่านี้ใน Gmail มาก ฉันจะใช้ปุ่มเหล่านี้หรือปุ่มที่คล้ายกันบนไซต์ของฉันได้อย่างไร มีโครงการโอเพ่นซอร์สที่มีรูปลักษณ์และความรู้สึกคล้ายกันหรือไม่?

หากฉันต้องการม้วนแพ็กเกจปุ่มของตัวเองแบบนี้โดยใช้ JQuery / XHTML / CSS ฉันจะใช้องค์ประกอบใดได้บ้าง ความคิดเริ่มต้นของฉันคือ:

1. มาตรฐาน<input type="button">กับ css เพื่อปรับปรุงรูปลักษณ์ (บทความการออกแบบส่วนใหญ่พูดถึง css / imges เกี่ยวข้อง)

2. jquery javascript เพื่อเปิดกล่องโต้ตอบแบบกำหนดเองที่รูทไปยังปุ่มบนเหตุการณ์ "onclick" ซึ่งจะมี<a>แท็กอยู่ในนั้นและแถบค้นหาสำหรับการกรอง เค้าโครงตารางสำหรับป๊อปอัปนั้นจะมีเหตุผลหรือไม่?

ฉันแย่มากในการทำวิศวกรรมย้อนกลับบนเว็บมีเครื่องมืออะไรบ้างที่ฉันสามารถใช้เพื่อช่วยทำวิศวกรรมย้อนกลับปุ่มเหล่านี้ได้ การใช้แถบเครื่องมือนักพัฒนาเว็บของ Firefox ฉันมองไม่เห็น css หรือ javascript (แม้ว่าจะถูกย่อขนาด) ที่ใช้ในกล่องโต้ตอบป๊อปอัปของปุ่ม ฉันสามารถใช้เครื่องมือเบราว์เซอร์ใดหรือวิธีการอื่นใดเพื่อดูและรับแนวคิดบางอย่าง

ฉันไม่ต้องการขโมย IP ใด ๆ ของ Google เพียงแค่ทราบว่าฉันจะสร้างฟังก์ชันปุ่มที่คล้ายกันได้อย่างไร

- แก้ไข - ฉันไม่เห็นลิงก์ในโพสต์ต้นฉบับ ขออภัย! จะพยายามเขียนใหม่เพื่อสะท้อนคำถามจริง

StopDesign มีการโพสต์ที่ยอดเยี่ยมเกี่ยวกับเรื่องนี้ที่นี่ [แก้ไข 20091107] เหล่านี้ถูกปล่อยออกมาเป็นส่วนหนึ่งของห้องสมุดปิด : ดูการสาธิตปุ่ม

โดยทั่วไปปุ่มแบบกำหนดเองที่เขาแสดงนั้นสร้างขึ้นโดยใช้ CSS ง่ายๆ

เดิมเขาใช้ 9 ตารางเพื่อให้ได้ผล:

แต่ต่อมาเขาใช้ระยะขอบซ้ายและขวา 1px ที่ขอบด้านบนและด้านล่างเพื่อให้ได้เอฟเฟกต์เดียวกัน

การไล่ระดับสีถูกหลอกโดยใช้สามชั้น:

ทั้งหมดของรหัสที่สามารถพบได้ที่ปุ่มที่กำหนดเอง 3.1หน้า (แม้ว่าการไล่ระดับสีที่ไม่มีรูปภาพจะใช้ได้เฉพาะใน Firefox และ Safari)

คำแนะนำทีละขั้นตอน

1 - แทรก CSS ต่อไปนี้:

/* Start custom button CSS here
---------------------------------------- */
.btn {
  display:inline-block;
  background:none;
  margin:0;
  padding:3px 0;
  border-width:0;
  overflow:visible;
  font:100%/1.2 Arial,Sans-serif;
  text-decoration:none;
  color:#333;
  }
* html button.btn {
  padding-bottom:1px;
  }
/* Immediately below is a temporary hack to serve the 
   following margin values only to Gecko browsers
   Gecko browsers add an extra 3px of left/right 
   padding to button elements which can't be overriden.
   Thus, we use -3px of left/right margin to overcome this. */
html:not([lang*=""]) button.btn {
  margin:0 -3px;
  }
.btn span {
  background:#f9f9f9;
  z-index:1;
  margin:0;
  padding:3px 0;
  border-left:1px solid #ccc;
  border-right:1px solid #bbb;
  }
* html .btn span {
  padding-top:0;
  }
.btn span span {
  background:none;
  position:relative;
  padding:3px .4em;
  border-width:0;
  border-top:1px solid #ccc;
  border-bottom:1px solid #bbb;
  }
.btn b {
  background:#e3e3e3;
  position:absolute;
  z-index:2;
  bottom:0;
  left:0;
  width:100%;
  overflow:hidden;
  height:40%;
  border-top:3px solid #eee;
  }
* html .btn b {
  top:1px;
  }
.btn u {
  text-decoration:none;
  position:relative;
  z-index:3;
  }

/* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
button.pill-l span {
  border-right-width:0;
  }
button.pill-l span span {
  border-right:1px solid #ccc;
  }
button.pill-c span {
  border-right-style:none;
  border-left-color:#fff;
  }
button.pill-c span span {
  border-right:1px solid #ccc;
  }
button.pill-r span {
  border-left-color:#fff;
  }

/* only needed if implementing separate hover state for buttons */
.btn:hover span, .btn:hover span span {
  cursor:pointer;
  border-color:#9cf !important;
  color:#000;
  }

/* use if one button should be the 'primary' button */
.primary {
  font-weight:bold;
  color:#000;
  }

2 - ใช้วิธีใดวิธีหนึ่งต่อไปนี้เพื่อเรียกมัน (สามารถดูข้อมูลเพิ่มเติมได้ในลิงค์ด้านบน)

<a href="#" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></a>

หรือ

<button type="button" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></button>

นี่คือปุ่ม "เก็บถาวร" ตาม Firebug

<div tabindex="0" act="7" class="goog-imageless-button goog-inline-block goog-imageless-button goog-imageless-button-collapse-right goog-imageless-button-primary" id="">
  <div class="goog-inline-block goog-imageless-button-outer-box">
    <div class="goog-inline-block goog-imageless-button-inner-box">
      <div class="goog-imageless-button-pos">
        <div class="goog-imageless-button-top-shadow"> </div>
        <div class="goog-imageless-button-content"><b>Archive</b></div>
      </div>
    </div>
  </div>
</div>

CSS เป็นมากกว่าที่ฉันสนใจในการจัดระเบียบ / วางสิ่งนี้ บางทีมันอาจจะเป็นแค่ฉัน แต่เมื่อมาร์กอัป / css หนักขึ้นฉันคิดว่าฉันค่อนข้างจะใช้ภาพ (หรือสองภาพเป็นพื้นหลัง แต่ยังดีกว่าสไปรต์) นอกจากนี้ภาพของปุ่มนี้จะมีค่าน้อยกว่า K ตัวเดียว

เท่าที่ฉันรัก Google นี่ดูเหมือนจะเกินความจริงไปหน่อย

อัปเดต: Google เป็นกรณีพิเศษ หากคุณเป็นไซต์ขนาดใหญ่และต้องการทำให้เนื้อหาของคุณเป็นสากลเทคนิคแบบไม่ใช้รูปภาพนี้เป็นเทคนิคที่ยอดเยี่ยมจริงๆ ช่วยให้คุณสามารถใช้ภาษาเขียนกับ UI ของคุณได้โดยไม่จำเป็นต้องสร้างภาพใหม่หรือกลัวว่าปุ่มของคุณจะพัง

ดูคำถาม: ข้อดีของการใช้ปุ่มไร้ภาพคืออะไร?

อย่างไรก็ตามคุณตัดสินใจที่จะทำสิ่งนี้ตรวจสอบให้แน่ใจว่าคุณแสดงผลหน้าเว็บด้วยค่าเริ่มต้นก่อน:

<input type="submit" value="submit" />

... จากนั้นใช้ jQuery เพื่อสลับองค์ประกอบอินพุตด้วยปุ่มที่กำหนดเองของคุณที่มีเหตุการณ์ onClick เพื่อให้แน่ใจว่าผู้ที่ไม่ได้เปิดใช้งาน JavaScript จะยังคงสามารถใช้ไซต์ของคุณได้

การใช้งานควรมาก่อน!

คุณสามารถใช้ปลั๊กอิน jquery ที่ฉันพัฒนาได้ ปุ่มต่างๆทำงานได้ทุกที่และเนื่องจากเป็นปลั๊กอินจึงง่ายต่อการติดตั้งและกำหนดค่า

http://swizec.com/code/styledButton/

การอัปเดตโพสต์นี้สำหรับปี 2011:

Google ได้เปิดตัวการออกแบบใหม่ในบริการต่างๆในเดือนกรกฎาคม 2011 ปุ่ม Google ใหม่ได้รับการสร้างขึ้นใหม่ที่นี่: http://pixify.com/blog/use-google-plus-to-improve-your-ui /

ปุ่มใหม่มีลักษณะดังนี้:

คุณสามารถลองใช้ปลั๊กอินFirebugสำหรับ Firefox เพื่อดู CSS ที่ปุ่ม

ปัญหาใหญ่ที่สุดที่คุณจะต้องเจอคือการทำให้มันใช้งานได้บนเบราว์เซอร์

ฉันคิดว่าคุณควรพิจารณาอย่างยิ่งว่าคุณต้องการมันจริงๆหรือไม่ ... Google ได้รับเงินจำนวนมากจากการทำสิ่งนี้เนื่องจากปุ่มและภาษาจำนวนมากที่พวกเขาต้องการ ฉันสงสัยว่าไซต์และแอปพลิเคชันส่วนใหญ่จะใช้รูปภาพได้ดีเหมือนกัน

องค์ประกอบโอเพนซอร์สเป็นความคิดที่ดี: กระจายความมั่งคั่งและความพยายามอย่างกว้างขวาง

งานส่วนใหญ่ที่นี่อาจไม่ใช่การออกแบบ - โพสต์เหล่านั้นเป็น How-To ที่ยอดเยี่ยมเกี่ยวกับเอฟเฟกต์การไล่ระดับสี

ปัญหาคือการทำให้สิ่งนี้ใช้ได้ในทุกเบราว์เซอร์หรือโดยเฉพาะอย่างยิ่งกองขยะที่แปลกประหลาดนั่นคือ IE6 และ IE7

ฉันคิดว่าคุณมาถูกทางแล้วด้วยปุ่มมาตรฐานที่เขียนใหม่ด้วย jQuery - ด้วยวิธีนี้คุณจะยังสามารถเข้าถึงได้สำหรับโปรแกรมอ่านหน้าจอและสามารถลดระดับลงได้อย่างมากในเบราว์เซอร์รุ่นเก่าจริงๆ

สำหรับ HTML ฉันคิดว่าทางออกที่ดีที่สุดของคุณคือไปที่ Gmail ด้วยเบราว์เซอร์แต่ละตัวและดูว่า HTML นั้นผลิตอะไร - ฉันคาดว่ามันจะแตกต่างกันอย่างสิ้นเชิงสำหรับ IE6, IE7 (ขึ้นอยู่กับว่าพวกเขาต้องการโหมดแปลก ๆ หรือไม่) และอย่างอื่น .

สิ่งเหล่านี้ได้รับการเผยแพร่โดยเป็นส่วนหนึ่งของไลบรารีการปิด : ดูการสาธิตปุ่ม

Web Developer Toolbarมีข้อมูลมุมมองสไตล์ภายใต้เมนู CSS ที่จะบอกคุณว่า css ที่นำมาใช้กับรายการ นอกจากนี้ยังมีคุณสมบัติแก้ไข CSS ในเมนูนั้นที่จะให้คุณเปลี่ยน CSS ได้ทันทีเพื่อดูว่ามันมีผลต่อเพจอย่างไร

โพสต์ที่มีลิงก์ไปยังไลบรารีการปิดใช้ไม่ได้ สิ่งที่เผยแพร่เป็นส่วนหนึ่งของไลบรารีการปิดใช้ปุ่มที่มีการไล่ระดับสีการไล่ระดับสี

วิธีแก้ปัญหาอื่น ๆ ในรายการไม่มีประโยชน์ คุณไม่สามารถไปจากที่นั่นและทำให้ปุ่มเหล่านี้ทำงานได้ในทุกเบราว์เซอร์ที่ Gmail ใช้งานได้ สิ่งที่ Bowman แสดงบนไซต์ของเขาไม่ใช่รหัสที่ใช้งานได้