Các nút không tưởng của Google

90

Gần đây đã có một vài bài báo về các nút không có hình ảnh mới của Google:

Tôi thực sự thích cách các nút mới này hoạt động trong Gmail. Làm cách nào để sử dụng các nút này hoặc các nút tương tự trên trang web của tôi? Có dự án mã nguồn mở nào có giao diện tương tự không?

Nếu tôi muốn cuộn gói nút của riêng mình như thế này bằng JQuery / XHTML / CSS, tôi có thể sử dụng những phần tử nào? Suy nghĩ ban đầu của tôi là:

  1. Tiêu chuẩn <input type="button">với css để cải thiện giao diện (bài viết thiết kế chủ yếu nói về css / imges liên quan đến.)

  2. Truy vấn javascript để hiển thị hộp thoại tùy chỉnh bắt nguồn từ nút trên sự kiện "onclick" sẽ có <a>thẻ trong đó và thanh tìm kiếm để lọc? Bố trí bảng cho cửa sổ bật lên đó có hợp lý không?

Tôi rất tệ trong việc thiết kế ngược những thứ trên web, một số công cụ mà tôi có thể sử dụng để giúp thiết kế ngược các nút này là gì? Sử dụng thanh công cụ dành cho nhà phát triển web của Firefox, tôi thực sự không thể nhìn thấy css hoặc javascript (ngay cả khi nó được thu nhỏ) được sử dụng trên các hộp thoại bật lên của nút. Tôi có thể sử dụng công cụ trình duyệt nào hoặc phương pháp nào khác để xem qua chúng và lấy một số ý tưởng?

Tôi không muốn ăn cắp bất kỳ IP nào của Google, chỉ có ý tưởng về cách tôi có thể tạo chức năng nút tương tự.

javascript  html  css  gmail  reverse-engineering 
— MikeN
nguồn

Câu trả lời:

55

- CHỈNH SỬA - Tôi không thấy liên kết trong bài đăng gốc. Lấy làm tiếc! Sẽ cố gắng và viết lại để phản ánh câu hỏi thực tế

StopDesign có một bài viết xuất sắc về điều này ở đây . [sửa 20091107] Chúng được phát hành như một phần của thư viện đóng cửa : xem bản trình diễn nút .

Về cơ bản, các nút tùy chỉnh mà anh ấy hiển thị được tạo bằng cách sử dụng một chút CSS đơn giản.

Ban đầu anh ấy sử dụng 9 bảng để có được hiệu ứng: 9 bảng

Nhưng sau đó, anh ấy đã sử dụng một lề trái và phải 1px đơn giản ở viền trên và dưới để đạt được hiệu quả tương tự.

Gradient được làm giả bằng cách sử dụng ba lớp: Nút chuyển màu

Tất cả mã có thể được tìm thấy tại trang Custom Buttons 3.1 . (mặc dù gradient không có hình ảnh chỉ hoạt động trong Firefox và Safari)

Hướng dẫn từng bước một

1 - Chèn CSS sau:

/* 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 - Sử dụng một trong những cách sau để gọi nó (có thể tìm thêm thông tin trong các liên kết ở trên)

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

hoặc là 

<button type="button" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></button>
— bjtitus
nguồn
32

Đây là Nút "Lưu trữ" của họ, theo 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 không chỉ là tôi quan tâm để tổ chức / dán cho việc này. Có lẽ chỉ có tôi, nhưng khi đánh dấu / css trở nên nặng nề như thế này, tôi nghĩ tôi thà SỬ DỤNG MỘT HÌNH ẢNH (hoặc một vài hình ảnh làm nền. Tốt hơn là Sprites). Bên cạnh đó, một hình ảnh cho nút này sẽ ít hơn một chữ K.

Tôi yêu thích Google nhiều như vậy, điều này có vẻ hơi quá mức cần thiết.

Cập nhật: Google là một trường hợp duy nhất. Nếu bạn là một trang web lớn và bạn muốn quốc tế hóa nội dung của mình, thì kỹ thuật ít hình ảnh này thực sự rất hay. Nó cho phép bạn áp dụng bất kỳ ngôn ngữ viết nào vào giao diện người dùng của mình mà không cần tạo hình ảnh mới hoặc sợ làm hỏng các nút của bạn.

Xem Câu hỏi: Ưu điểm của việc sử dụng nút không có hình ảnh là gì?

— Sampson
nguồn
13

Tuy nhiên, bạn quyết định làm điều đó, hãy đảm bảo rằng trước tiên bạn kết xuất trang với mặc định:

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

... Và sau đó sử dụng jQuery để hoán đổi phần tử đầu vào với nút tùy chỉnh của bạn có sự kiện onClick. Điều này sẽ đảm bảo rằng những người không được bật JavaScript vẫn có thể sử dụng trang web của bạn.

Khả năng sử dụng nên đi đầu!

— Ty.
nguồn
5
Tại sao? Sử dụng một <button type="submit">thay thế, vì nó có thể có các phần tử con và được tạo kiểu theo cách bạn muốn.
— mí mắt,
13

Bạn có thể sử dụng plugin jquery này mà tôi đã phát triển. Các nút hoạt động thực tế ở mọi nơi và vì nó là một plugin nên chúng rất dễ thiết lập và cấu hình.

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

12

Cập nhật bài đăng này cho năm 2011:

Google đã đưa ra một thiết kế mới trên các dịch vụ của mình vào tháng 7 năm 2011. Các nút mới của Google đã được tạo lại tại đây: http://pixify.com/blog/use-google-plus-to-improve-your-ui /

Các nút mới trông như thế này: nhập mô tả hình ảnh ở đây

— bperdue
nguồn
+1. Thay vì cố gắng giả mạo gradient bằng cách sử dụng hình ảnh hoặc các yếu tố bổ sung như bài đăng câu trả lời hiện tại này, hãy sử dụng gradient nếu có thể và trở lại màu hợp lý trên các trình duyệt cũ hơn.
— mikemaccana
5

Vấn đề lớn nhất bạn sẽ gặp phải là làm cho nó hoạt động trên các trình duyệt.

Tôi nghĩ bạn nên cân nhắc kỹ xem bạn có thực sự cần nó hay không ... Google thu được rất nhiều lợi nhuận khi tạo ra một thứ như thế này vì có rất nhiều nút và ngôn ngữ mà họ cần; Tôi nghi ngờ rằng hầu hết các trang web và ứng dụng sẽ tốt bằng cách sử dụng hình ảnh.

Tuy nhiên, một thành phần nguồn mở là một ý tưởng hay: hãy phổ biến sự giàu có và nỗ lực một cách rộng rãi.

— Zac Thompson
nguồn
2

Phần lớn công việc ở đây có lẽ không phải là thiết kế - những bài viết đó đã là một Hướng dẫn tuyệt vời về hiệu ứng gradient.

Vấn đề là làm cho điều này hoạt động trong tất cả các trình duyệt, hoặc cụ thể hơn là đống rác kỳ quặc là IE6 và IE7.

Tôi nghĩ rằng bạn đang đi đúng hướng với một nút tiêu chuẩn được viết lại bằng jQuery - theo cách đó bạn vẫn có thể truy cập được cho trình đọc màn hình và có thể giảm chất lượng trong các trình duyệt thực sự cũ.

Đối với HTML, tôi nghĩ cách tốt nhất của bạn là truy cập Gmail với từng trình duyệt và xem HTML được tạo ra - Tôi hy vọng nó sẽ hoàn toàn khác đối với IE6, IE7, (cũng tùy thuộc vào việc họ có cần chế độ quirks hay không) và mọi thứ khác .

— Keith
nguồn
1
Tôi thực sự nghi ngờ rằng trình duyệt của Google đang đánh hơi IE để hiển thị nút.
— mí mắt,
1

Các nhà phát triển Web Toolbar có một thông tin quan điểm phong cách dưới menu css sẽ cho bạn biết những gì css được áp dụng cho một mục. Ngoài ra còn có tính năng Chỉnh sửa CSS trong menu đó sẽ cho phép bạn thay đổi CSS ngay lập tức để xem nó ảnh hưởng đến trang như thế nào.

— Mykroft
nguồn
Tôi thấy firebug cực kỳ hữu ích cho chính xác loại việc này - xem CSS được áp dụng và các thay đổi trực tiếp.
— Thelema
Tôi cũng sử dụng firebug nhưng vì nó có động cơ riêng nên nó có thể hơi nặng. Theo tôi, thanh công cụ có trọng lượng nhẹ hơn nhiều và dễ sử dụng hơn.
— Mykroft
0

Bài đăng có liên kết đến thư viện đóng cửa không áp dụng. Những gì đã được phát hành như một phần của thư viện đóng sử dụng các nút có độ dốc .

Các giải pháp khác được liệt kê là vô ích. Bạn không thể đi từ đó và làm cho các nút này hoạt động trên mọi trình duyệt mà Gmail có chúng hoạt động. Những gì Bowman hiển thị trên trang web của anh ấy không phải là mã hoạt động.

— Jose
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.