2010-09-16 27 views
5

Định nghĩa nút CSS tốt nhất, mạnh mẽ nhất là gì?Giải pháp nút CSS chỉ mạnh mẽ nhất?

Lý tưởng nhất, tôi muốn các gradient, hình ảnh được làm tròn và sự xuống cấp duyên dáng xuống IE8. Nó cũng sẽ là tuyệt vời nếu các nút không sử dụng bất kỳ hình ảnh, và các nút thu nhỏ theo chiều ngang để phù hợp với nội dung của họ.

Giải pháp tốt nhất cho điều này là gì?

+7

Bạn đã xem http://css-tricks.com/examples/ButtonMaker/ chưa? – Adam

+0

Đó là thực sự thực sự tốt đẹp. –

+0

Không tệ. Và họ trông khá nửa trong IE8. Không có độ dốc, không có góc tròn hoặc những gì không nhưng chúng trông giống như các nút ít nhất. Tôi không biết mặc dù ... Tôi nghĩ rằng tôi vẫn thích kỹ thuật cửa trượt. Ít linh hoạt hơn về chiều cao, rõ ràng bởi vì nó sử dụng hình ảnh, nhưng bạn có thể có các nút thực sự ưa thích :) – Strelok

Trả lời

1

Không có cách nào để thực hiện những gì bạn đang yêu cầu chỉ với CSS, vì gradient và góc chỉ được thêm dưới dạng CSS3 và ngay cả bây giờ chúng vẫn chưa được hỗ trợ đầy đủ. Cách tốt nhất để đạt được độ dốc hiện nay là sử dụng hình ảnh thực tế, bạn có thể yên tâm rằng nếu không phải tất cả trình duyệt sẽ hỗ trợ nó (nếu bạn đang sử dụng hình ảnh .png, IE6 có thể có vấn đề với nó nhưng có những hacks CSS để có được xung quanh nó).

góc tròn có thể được thêm vào trang web theo hai cách khác nhau:

  • Đầu tiên là thông qua hình ảnh và bạn sẽ đặt những ở các góc của phần tử cho sự xuất hiện tròn. Những gì tôi đã nói trước đây về hình ảnh .png vẫn được áp dụng ở đây.
  • Phương pháp thứ hai là sử dụng JavaScript. Hầu hết các khung công tác sẽ có các plugin được thiết kế với các tính năng Web 2.0. Tôi khuyên bạn nên jQuery vì nó dễ thực hiện.

Trong hai phương pháp trên, ưu tiên đầu tiên nếu bạn muốn chắc chắn rằng người dùng có thể nhìn thấy đường cong, tuy nhiên nếu bạn không quá lo lắng về việc JavaScript bị tắt, tôi chắc chắn sẽ sử dụng jQuery nó dễ sử dụng hơn 100 lần.

+0

Nếu bạn định trả lời chi tiết, ít nhất phải có ngữ pháp, chính tả, v.v. –

+1

@FillipPeyton Ở đó, tôi đã sửa nó. ;] – WynandB

3

thể sử dụng gradient, box-shadow, border-radius, rgba màu vân vân trong các phiên bản cũ của trình duyệt Internet Explorer, sử dụng CSS3 PIE. Hãy xem their demo với tất cả các thuộc tính CSS3 này.

Bây giờ, hãy kết hợp CSS3 PIE với button maker được đề cập trong các nhận xét và bạn đã hoàn tất!

+0

Vâng, bạn cũng nên cố gắng sử dụng một trang có 10 nút CSS3-pied trên đó trong IE6/7: D – Strelok

+0

+1. Cảm ơn bạn đã thông tin về PIE. Ít nhất bây giờ chúng ta có thể có một cái gì đó để ăn trong khi làm việc chăm chỉ ... :) – Gan

2

Rất nhiều nút giao diện người dùng JQuery. Bản demo là here

Có, họ sử dụng một số hình ảnh ... nhưng hình ảnh cũng rất phổ biến với nhiều tính năng khác của giao diện người dùng JQuery, cung cấp trang của bạn một số tính năng tuyệt vời (và thường xuyên hơn) làm suy giảm và bạn có thể mở rộng nó thành vòng trong IE thông qua một plugin JQuery khác. Phần yêu thích của tôi là ThemeRoller, cho phép bạn xây dựng một trang bằng cách sử dụng các plugin có khả năng bật lên, sau đó là phong cách hoặc thay đổi theo ý muốn, ngay cả với một công cụ nổi trên trang web. Bạn có thể dễ dàng bao gồm một cách để người dùng của bạn chuyển đổi toàn bộ chủ đề của trang web bằng một lần nhấp nút. Ngoài ra, có một trình soạn thảo để dễ dàng tạo chủ đề của riêng bạn nếu bạn không thích những gì ở đó.

Đối với gradient, bạn đã phai mờ, mờ dần, phai mờ, mẫu và sau đó "xây dựng tùy chọn của riêng bạn" với các biến thể và nhiều lớp phủ màu cùng với độ mờ.

Thiết lập nút dễ dàng như: <button class="ui-state-default ui-corner-all" type="submit">Button</button>

Các vấn đề liên quan