Hướng dẫn CSS3 Tạo nút bật / tắt kiểu dáng đẹp
Sử dụng một nút, cho đến nay, là cách ưa thích để tương tác với một thứ điện tử; chẳng hạn như radio, TV, máy nghe nhạc và thậm chí cả điện thoại thông minh có tính năng ra lệnh bằng giọng nói vẫn cần ít nhất một hoặc hai nút vật lý.
Hơn nữa, trong thời đại kỹ thuật số này, nút cũng đã phát triển ở dạng kỹ thuật số, điều này làm cho nó dễ tương tác hơn, năng động hơn và thực sự dễ thực hiện, so với nút vật lý.
Vì vậy, lần này, chúng tôi sẽ tạo ra một nút tương tác khéo léo dựa trên thiết kế tuyệt vời này tại Dribbble chỉ bằng CSS.
Chà, hãy bắt đầu nào.
HTML
Chúng tôi sẽ bắt đầu tắt nút bằng cách đặt đánh dấu sau vào tài liệu HTML của chúng tôi. Điều đó thực sự đơn giản, nút sẽ dựa trên thẻ neo, chúng tôi cũng có một khoảng bên cạnh nó để tạo ánh sáng chỉ báo và sau đó chúng được bọc lại với nhau trong một HTML5 phần nhãn.
& # xF011;
Đây là cách nút của chúng tôi ban đầu trông như thế nào.
Kiểu dáng cơ bản
Trong phần này, chúng tôi sẽ bắt đầu làm việc trên Kiểu dáng.
Trước tiên, chúng tôi áp dụng nền tối này từ Mẫu tinh tế trên tài liệu của cơ thể và căn giữa phần. Sau đó, chúng tôi cũng sẽ loại bỏ các chấm đề cương trên :tiêu điểm và : hoạt động liên kết.
cơ thể nền: url ('hình ảnh / micro_carbon.png'); phần lề: 150px tự động 0; chiều rộng: 75px; chiều cao: 95px; vị trí: tương đối; văn bản-align: trung tâm; : hoạt động ,: tập trung phác thảo: 0; Sử dụng phông chữ tùy chỉnh
Đối với biểu tượng của nút, chúng tôi sẽ sử dụng phông chữ tùy chỉnh từ Phông chữ Tuyệt vời thay vì hình ảnh. Bằng cách đó, biểu tượng sẽ dễ dàng có thể tạo kiểu và có thể chia tỷ lệ thông qua biểu định kiểu.
Tải xuống phông chữ, lưu trữ các tệp phông chữ (eot, woff, ttf và svg) trong phông chữ và sau đó đặt mã sau vào biểu định kiểu của bạn để xác định họ phông chữ mới.
@ font-face font-family: "FontAwgie"; src: url ("phông chữ / phông chữ-webfont.eot"); src: url ("font / fontawclaw-webfont.eot? #iefix") định dạng ('eot'), url ("font / fontawclaw-webfont.woff") định dạng webfont.ttf ") ('truetype'), url (" phông chữ / phông chữ-webfont.svg # FontAw đũa ") định dạng ('svg'); font-weight: bình thường; kiểu chữ: bình thường; 
Các biểu tượng sức mạnh mà chúng ta cần cho nút này được thể hiện bằng số Unicode F011; nếu bạn nhìn kỹ vào đánh dấu HTML ở trên, chúng tôi đã đặt ký tự số này & # xF011; trong thẻ neo, nhưng vì chúng tôi chưa xác định tùy chỉnh phông chữ gia đình trong kiểu nút, biểu tượng vẫn chưa được hiển thị chính xác.
Đọc thêm: Unicode và HTML: Ký tự tài liệu
Tạo kiểu cho nút
Trước hết, chúng ta cần xác định tùy chỉnh phông chữ gia đình cho nút.
Nút của chúng tôi sẽ là một vòng tròn, chúng tôi có thể đạt được hiệu ứng vòng tròn bằng cách sử dụng bán kính biên giới thuộc tính và đặt giá trị ít nhất là một nửa của nút chiều rộng.
Vì chúng tôi đang sử dụng phông chữ cho biểu tượng, chúng tôi có thể dễ dàng đặt màu và thêm bóng văn bản cho biểu tượng trong biểu định kiểu là tốt.
Tiếp theo, chúng tôi cũng sẽ tạo hiệu ứng vát cho nút. Hiệu ứng này khá khó khăn. Trước tiên, chúng ta cần phải áp dụng màu nền: rgb (83,87,93); đối với cơ sở màu của nút, sau đó chúng tôi thêm tối đa bốn lớp bóng hộp.
một font-family: "FontAwgie"; màu: rgb (37,37,37); bóng văn bản: 0px 1px 1px rgba (250,250,250,0.1); cỡ chữ: 32pt; hiển thị: khối; vị trí: tương đối; trang trí văn bản: không có; màu nền: rgb (83,87,93); box-Shadow: 0px 3px 0px 0px rgb (34,34,34), / * Shadow 1 , 250, 250, .2), / * Bóng thứ 3 * / in 0px -12px 35px 0px rgba (0, 0, 0, .5); / * Bóng thứ 4 * / width: 70px; chiều cao: 70px; viền: 0; bán kính đường viền: 35px; văn bản-align: trung tâm; chiều cao dòng: 79px;
Ngoài ra còn có một vòng tròn lớn hơn ở bên ngoài nút và chúng tôi sẽ sử dụng :trước yếu tố giả cho nó hơn là thêm đánh dấu thêm.
a: trước nội dung: ""; chiều rộng: 80px; chiều cao: 80px; hiển thị: khối; chỉ số z: -2; vị trí: tuyệt đối; màu nền: rgb (26,27,29); trái: -5px; đầu trang: -2px; bán kính đường viền: 40px; hộp bóng: 0px 1px 0px 0px rgba (250,250,250,0.1), chèn 0px 1px 2px rgba (0, 0, 0, 0,5);
Đọc thêm: CSS: trước và sau: yếu tố giả (Hongkiat.com)
Đèn báo
Dưới nút, có một đèn nhỏ để chỉ định trạng thái Bật và Tắt nguồn. Dưới đây, chúng tôi áp dụng màu đỏ cho màu của ánh sáng vì nguồn ban đầu TẮT, chúng tôi cũng thêm bóng hộp để bắt chước hiệu ứng tia sáng của ánh sáng.
a + span display: block; chiều rộng: 8px; chiều cao: 8px; màu nền: rgb (226,0,0); box-Shadow: inet 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rpx (226,0,0,0,5); bán kính đường viền: 4px; rõ ràng: cả hai; vị trí: tuyệt đối; đáy: 0; trái: 42%;
Hiệu ứng
Tại thời điểm này, nút của chúng tôi bắt đầu trông ổn và chúng tôi chỉ cần thêm một số hiệu ứng vào nó, ví dụ, khi nút 'được' nhấp vào, chúng tôi muốn nút này trông giống như được nhấn và giữ.
Để đạt được hiệu quả, đầu tiên bóng hộp trong nút sẽ bằng 0 và vị trí sẽ được hạ xuống một chút. Chúng ta cũng cần điều chỉnh cường độ của ba bóng khác một chút để phù hợp với vị trí nút.
a: active box-Shadow: 0px 0px 0px 0px rgb (34,34,34), / * Bóng thứ 1 * / 0px 3px 7px 0px rgb (17,17,17), / * Bóng thứ 2 * / inet 0px 1px 1px 0px rgba (250, 250, 250, .2), / * Bóng thứ 3 * / in 0px -10px 35px 5px rgba (0, 0, 0, .5); / * Bóng thứ 4 * / màu nền: rgb (83,87,93); đầu trang: 3px;
Hơn nữa, một khi nút đã được bấm, nút này sẽ được nhấn xuống và biểu tượng sẽ 'tỏa sáng' để cho biết nguồn đang BẬT.
Để đạt được hiệu ứng như vậy, chúng tôi sẽ nhắm mục tiêu vào nút bằng cách sử dụng :Mục tiêu lớp giả, sau đó thay đổi màu của biểu tượng thành màu trắng và thêm bóng văn bản với màu trắng là tốt.
a: target box-Shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), chèn 0px 1px 1px 0px rgba (250, 250, 250, .2) , chèn 0px -10px 35px 5px rgba (0, 0, 0, .5); màu nền: rgb (83,87,93); đầu trang: 3px; màu: #fff; bóng văn bản: 0px 0px 3px rgb (250,250,250);
Đọc thêm: Sử dụng: mục tiêu lớp giả
Chúng ta cũng cần điều chỉnh bóng hộp trong vòng tròn bên ngoài nút, như sau.
a: active: before, a: target: before top: -5px; màu nền: rgb (26,27,29); hộp bóng: 0px 1px 0px 0px rgba (250,250,250,0.1), chèn 0px 1px 2px rgba (0, 0, 0, 0,5);
Đèn báo sẽ chuyển từ màu đỏ mặc định sang màu xanh lục để nhấn mạnh rằng nguồn đã BẬT.
a: target + span box-Shadow: inet 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); màu nền: rgb (135.187,83);
Hiệu quả chuyển giao
Cuối cùng, để làm cho hiệu ứng của nút chạy trơn tru, chúng tôi cũng sẽ áp dụng hiệu ứng chuyển tiếp sau đây.
Đoạn mã dưới đây sẽ đặc biệt thêm quá trình chuyển đổi sang màu tài sản và bóng văn bản cho 350ms trong phần tử neo.
một chuyển tiếp: màu 350ms, bóng văn bản 350ms; -o-trans: màu 350ms, bóng văn bản 350ms; -moz-quá trình chuyển đổi: màu 350ms, bóng văn bản 350ms; -webkit-quá trình chuyển đổi: màu 350ms, bóng văn bản 350ms;
Đoạn mã thứ hai dưới đây sẽ thêm chuyển đổi cho màu nền và bóng hộp tài sản trong chỉ số ánh sáng.
a: target + span quá trình chuyển đổi: màu nền 350ms, bóng hộp 700ms; -o-trans: màu nền 350ms, bóng hộp 700ms; -moz-quá trình chuyển đổi: màu nền 350ms, bóng hộp 700ms; -webkit-quá trình chuyển đổi: màu nền 350ms, bóng hộp 700ms;
Kết quả cuối cùng
Chúng tôi đã thực hiện tất cả các kiểu chúng tôi cần, bây giờ bạn có thể thấy kết quả cuối cùng trực tiếp cũng như tải xuống tệp nguồn từ các liên kết bên dưới.
- Bản giới thiệu
- Tải xuống nguồn
Phần thưởng: Cách tắt
Đây là phần thưởng. Nếu bạn đã thử nút từ bản demo ở trên, bạn sẽ nhận thấy rằng nút chỉ có thể được nhấp một lần, đó là để bật nó, vậy làm cách nào để tắt nó đi?.
Thật không may, chúng ta phải làm điều đó với jQuery, nhưng nó cũng thực sự đơn giản. Dưới đây là tất cả các mã jQuery chúng ta cần.
$ (tài liệu). yet (function () $ ('# button'). click (function () $ (this) .toggleClass ('on'););); Đoạn mã trên sẽ thêm lớp BẬT trong neo và chúng tôi đã sử dụng chuyển đổi chức năng từ jQuery để thêm nó. Vì vậy, khi # nút được nhấp vào, jQuery sẽ kiểm tra xem lớp ON đã được thêm hay chưa: khi không, jQuery sẽ thêm lớp đó và nếu nó đã được thêm vào, jQuery sẽ xóa lớp.
Chú thích: Đừng quên bao gồm thư viện jQuery.
Bây giờ chúng ta phải thay đổi Phong cách một chút. Đơn giản chỉ cần thay thế tất cả :Mục tiêu yếu tố giả với .trên bộ chọn lớp, như sau:
a.on box-bóng: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), chèn 0px 1px 1px 0px rgba (250, 250, 250, .2) , chèn 0px -10px 35px 5px rgba (0, 0, 0, .5); màu nền: rgb (83,87,93); đầu trang: 3px; màu: #fff; bóng văn bản: 0px 0px 3px rgb (250,250,250); a: active: before, a.on: before top: -5px; màu nền: rgb (26,27,29); hộp bóng: 0px 1px 0px 0px rgba (250,250,250,0.1), chèn 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-Shadow: inet 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); màu nền: rgb (135.187,83);
Cuối cùng, hãy thử nó trong trình duyệt.
- Bản giới thiệu
- Tải xuống nguồn
