Các nút đẹp với hình ảnh động. Cách tạo các nút thời trang bằng CSS thuần túy
Vlad Merzhevich
Các nút tiêu chuẩn được tạo thông qua thẻ
Cơm. 1. Nút gốc và sửa đổi
Để thay đổi hoàn toàn diện mạo của một nút, bạn có thể sử dụng hình ảnh, nhưng so với Khả năng CSS 3 tùy chọn này bây giờ có vẻ như được trồng tại nhà.
Tôi sẽ lấy nút gốc trong trình duyệt làm cơ sở, nút này có độ dốc dọc tuyến tính và các cạnh tròn.
Cách dễ nhất là làm tròn các góc mà chúng tôi sử dụng thuộc tính bán kính đường viền, mang lại cho nó bán kính làm tròn mong muốn. Như thường lệ, nó không hoạt động trên tất cả các trình duyệt, vì vậy bạn sẽ phải thêm bộ đầy đủ. Kết quả là như sau.
Bán kính đường viền Moz: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari 4 */ bán kính đường viền: 5px; /*IE 9, Safari 5, Chrome */
Loại nút trong các trình duyệt khác nhau thể hiện trong hình. 2.
Cơm. 2. Nút có góc bo tròn
Nói chung, mọi thứ đều được mong đợi. Các phiên bản cũ của IE không hỗ trợ CSS 3, các phiên bản khác tạo chính xác các góc tôi cần. Vì lý do nào đó, Opera không hiển thị nền theo mặc định như các trình duyệt khác, nhưng Opera sẽ được thảo luận riêng.
Bây giờ phần thú vị nhất là tạo một gradient tuyến tính dọc. Để thực hiện việc này, các kiểu riêng lẻ cho từng trình duyệt sẽ được sử dụng lại.
nền: -moz-tuyến tính-gradient(#00BBD6, #EBFFFF);
Dải màu chỉ định điểm bắt đầu, góc chuyển màu, màu bắt đầu và màu kết thúc. Trong trường hợp của chúng tôi, khi độ dốc đi theo chiều dọc từ trên xuống dưới, chỉ cần đặt các màu sắc là đủ;
Chrome, Safari
nền: -webkit-gradient(tuyến tính, 0 0, 0 100%, từ(#00BBD6), đến(#EBFFFF));
Ở đây bạn chỉ định loại gradient (tuyến tính), điểm bắt đầu để áp dụng gradient (trái góc trên cùng), điểm kết thúc (góc dưới bên trái), màu bắt đầu và màu kết thúc.
bộ lọc: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00BBD6", endColorstr="#EBFFFF");
Trình duyệt IE hoạt động theo cách riêng của nó và sử dụng thuộc tính filter cho nhiều hiệu ứng khác nhau, bao gồm cả độ dốc. Ở đây mọi thứ tầm thường hơn, chỉ có màu bắt đầu và màu kết thúc của gradient được viết.
Opera đang nghỉ ngơi; độ dốc vẫn chưa được triển khai.
Chúng tôi tập hợp tất cả các thuộc tính cho trình duyệt, góc và độ dốc (ví dụ 1).
Ví dụ 1: Nút chuyển màu tuyến tính
Nó hóa ra khá đẹp (Hình 3), nhưng cũng có sự khác biệt rõ ràng từ nút ban đầu - nó trông phẳng, giống như một tấm bảng.
Cơm. 3. Chế độ xem nút có độ dốc
Bạn có thể lại tạo một nút có hình dạng mong muốn bằng cách sử dụng gradient, “chơi” với màu sắc. Hai giá trị gradient không còn đủ nữa; may mắn thay, Firefox và Safari đã đưa ra giải pháp.
nền: -moz-tuyến tính-gradient(#D0ECF4, #5BC9E1, #D0ECF4);
Thay vì hai giá trị, hãy chèn số lượng màu mong muốn, độ dốc sẽ chuyển đổi mượt mà từ màu này sang màu khác.
Chrome, Safari
nền: -webkit-gradient(tuyến tính, 0 0, 0 100%, từ(#D0ECF4), đến(#D0ECF4), color-stop(0.5, #5BC9E1));
Tham số color-stop chỉ định điểm mà màu mới sẽ được áp dụng. Giá trị nằm trong khoảng từ 0 đến 1.
Ví dụ 2: Các nút có độ chuyển màu nâng cao
HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx
Kết quả của ví dụ được hiển thị trong Hình. 4.
Cơm. 4. Độ dốc, cần loại độ dốc nào
Tương tự, bạn có thể tạo bất kỳ độ chuyển màu nào khác trên một nút hoặc thành phần khác (Hình 5). Nhưng hãy tự mình làm việc này, đó là lý do tại sao tôi đã thêm nó vào hội thảo.
Cơm. 5. Các nút khác nhau như vậy
Hãy để tôi tóm tắt. Bạn có thể tạo một nút có độ dốc và các góc tròn mà không cần hình ảnh. Tuy nhiên, có sự nhầm lẫn và bỏ trống với các trình duyệt. Opera hoàn toàn không thể hoạt động với độ dốc; trong IE 9 có một lỗi khó chịu khi kết hợp độ dốc với các góc (Hình 6).
Cơm. 6. Lớp phủ nền ở các góc trong IE 9
Chà, bây giờ chúng ta sẽ làm “những thứ đẹp đẽ” cho Trình duyệt Firefox, Safari và Chrome.
Vào ngày này chúng ta sẽ tạo ra bộ dụng cụ biểu tượng đẹp cho một trang web với sử dụng CSS 3 và hoạt hình. Nhờ nút này, bạn có thể biến bất kỳ liên kết nào trên trang thành nút hoạt hình với tên lớp đơn giản. Nói chung, không có gì phức tạp ở đây như thoạt nhìn.
Xin nhắc lại rằng các nút này miễn phí và bạn có thể tải xuống miễn phí. Đi.
Các nút CSS3 hoạt hình cho trang web của bạn
Bây giờ là một vài lời về kích thước và các góc tròn của các nút:
/* Ba kích thước nút */ .button.big ( font-size:30px;) .button.medium ( font-size:18px;) .button.small ( font-size:13px;) /* Các góc của nút được làm tròn */ .button.rounded( -moz-border-radius:4em; -webkit-border-radius:4em; border-radius:4em; )
Trong đoạn mã trên có ba lớp - đây là to lớn, trung bình Và bé nhỏ. Theo đó, đối với mỗi lớp chúng tôi đặt những nghĩa khác nhau tính bằng pixel. Mọi thứ đều được hiển thị rõ ràng trong đoạn mã trên.
Bây giờ đến phần thú vị - màu sắc. Ở đây, về nguyên tắc, không có gì phức tạp cả.
/* Nút màu xanh */ .blue.button( color:#0f4b6d !important; border:1px Solid #84acc3 !important; /* Sao lưu màu nền */ màu nền: #48b5f2; hình nền: url("button_bg. png"), url("button_bg.png"), -moz-radial-gradient(ở giữa, hình tròn, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-Linear-gradient(# 4fbbf7, #3faeeb); hình nền: url("button_bg.png"), url("button_bg.png"), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from (rgba(89,208,244,1)), to(rgba(89,208,244,0))), -webkit-gradient(tuyến tính, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); ) .blue.button:hover( màu nền:#63c7fe; hình nền: url("button_bg.png"), url("button_bg.png"), -moz-radial-gradient(đáy giữa, hình tròn, rgba (109,217,250,1) 0,rgba(109,217,250,0) 100px), -moz-Linear-gradient(#63c7fe, #58bef7); hình nền: url("button_bg.png"), url("button_bg.png" ), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), đến(rgba(109,217,250,0))), -webkit-gradient(tuyến tính , 0% 0%, 0% 100%, từ(#63c7fe), đến(#58bef7)); )
Đó là tất cả cho bây giờ. Tôi muốn cảnh báo trước với bạn rằng hiện tại, các nút có thể không hoạt động trong một số trình duyệt vì không phải tất cả chúng đều hỗ trợ CSS3. Nhưng đối với tôi, có vẻ như vấn đề này sẽ sớm được giải quyết.
Trước khi xem xét các nút, chúng ta hãy xem các cài đặt chung cho tất cả chúng.
HTML
Đối với các nút sẽ được sử dụng rất HTML đơn giản mã số:
Đặt mua
CSS
Ngoài ra tất cả các nút sẽ có cài đặt chungđối với văn bản chú thích và bỏ chọn các liên kết:
ButtonText ( phông chữ: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; ) a ( color: #fff; text-trang trí: none; )
Thông thường, người dùng mong đợi đủ hiệu ứng mềm mại khi bạn di chuột qua một liên kết hoặc nút. Và trong trường hợp của chúng tôi, nút thay đổi kích thước - nó tăng lên, hiển thị một thông báo bổ sung.
Mã CSS cơ bản
Để bắt đầu, chúng ta chỉ cần tạo hình dạng và màu sắc cho nút. Xác định chiều cao 28px và chiều rộng 115px, thêm lề và phần đệm, đồng thời tạo cho nút một đường viền nhẹ.
#button1 ( nền: #6292c2; đường viền: 2px Solid #eee; chiều cao: 28px; chiều rộng: 115px; lề: 50px 0 0 50px; phần đệm: 0 0 0 7px; tràn: ẩn; hiển thị: khối; )
Hiệu ứng CSS3
Một số người thích nó khi nút đơn giản kèm theo khá nhiều mã CSS. TRONG phần này Dưới đây là các kiểu CSS3 bổ sung cho nút của chúng tôi. Bạn có thể làm mà không cần chúng, nhưng chúng mang lại cho nút một cái nhìn hiện đại hơn.
Làm tròn các góc của khung và thêm độ dốc. Điều này sử dụng một thủ thuật nhỏ với độ dốc tối tương tác với bất kỳ màu nền nào.
/*Các góc được làm tròn*/ -webkit-border-radius: 15px; -moz-biên giới-bán kính: 15px; bán kính đường viền: 15px; /*Gradient*/ hình nền: -webkit-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -moz-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -o-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -ms-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: gradient tuyến tính(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Hoạt ảnh CSS
Bây giờ hãy cài đặt Chuyển đổi CSS. Hoạt ảnh sẽ được sử dụng cho bất kỳ thay đổi thuộc tính nào và sẽ kéo dài nửa giây.
Di chuột lên trên
Tất cả những gì còn lại là thêm kiểu để mở rộng nút khi bạn di chuột qua nó. Nút phải rộng 230px để hiển thị toàn bộ thông báo.
#button1:hover ( chiều rộng: 230px; )
Thay đổi tông màu đơn giản
Rất đơn giản và phổ biến hiệu ứng CSS cho nút. Khi bạn di con trỏ chuột, tông màu của màu nền sẽ thay đổi mượt mà.
Mã CSS cơ bản
Mã CSS rất giống với ví dụ trước. Màu nền khác được sử dụng và hình dạng có chút thay đổi. Nó cũng căn giữa văn bản và đặt chiều cao dòng cho nút sao cho việc căn giữa theo chiều dọc xảy ra.
#button2 ( nền: #d11717; đường viền: 2px Solid #eee; chiều cao: 38px; chiều rộng: 125px; lề: 50px 0 0 50px; tràn: ẩn; hiển thị: khối; căn chỉnh văn bản: giữa; chiều cao dòng: 38px; )
Hiệu ứng CSS3
Đặt độ tròn của các góc, độ dốc cho nền và bóng bổ sung. Sử dụng rgba chúng ta làm cho bóng có màu đen và trong suốt.
/*Các góc được làm tròn*/ -webkit-border-radius: 10px; -moz-biên giới-bán kính: 10px; bán kính đường viền: 10px; /*Gradient*/ hình nền: -webkit-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -moz-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -o-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -ms-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: gradient tuyến tính(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); bóng hộp: 0px 3px 1px rgba(0, 0, 0, 0.2);
Hoạt ảnh CSS
Hoạt ảnh thực tế không khác gì ví dụ trước.
/*Transition*/ -webkit-transition: Tất cả đều dễ dàng 0,5 giây; -moz-transition: Tất cả 0,5 giây đều dễ dàng; -o-transition: Tất cả 0,5 giây đều dễ dàng; -ms-transition: Tất cả đều dễ dàng 0,5 giây; chuyển tiếp: Tất cả đều dễ dàng 0,5 giây;
Di chuột lên trên
Khi di con trỏ chuột, màu nền khác sẽ được đặt. Hãy thử chọn tùy chọn màu nhạt hơn trong Photoshop để có hiệu ứng tuyệt vời.
#button2:hover ( màu nền: #ff3434; )
Hiệu ứng này có thể khá ấn tượng tùy thuộc vào việc lựa chọn hình nền. Bản demo sử dụng nền không có đặc điểm và hiệu ứng trông không có gì đặc biệt. Hãy thử sử dụng một hình ảnh khác và hiệu ứng có thể rất ấn tượng.
Mã CSS cơ bản
Phần chính của mã giống như các ví dụ trước. Xin lưu ý những gì chúng tôi sử dụng hình nền. Điểm xuất phát nền được đặt thành "0 0". Khi bạn di con trỏ, vị trí sẽ dịch chuyển theo chiều dọc.
#button3 ( nền: #d11717 url("bkg-1.jpg"); vị trí nền: 0 0; bóng văn bản: 0px 2px 0px rgba(0, 0, 0, 0.3); cỡ chữ: 22px; chiều cao : 58px; chiều rộng: 155px; lề: 0 0 50px; hiển thị: chiều cao dòng: 58px;
Hiệu ứng CSS3
TRONG trong ví dụ này không có gì đặc biệt - các góc và bóng tròn.
/*Các góc được làm tròn*/ -webkit-border-radius: 5px; -moz-biên giới-bán kính: 5px; bán kính đường viền: 5px; /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); bóng hộp: 0px 3px 1px rgba(0, 0, 0, 0.2);
Hoạt ảnh CSS
Hoạt ảnh trong trường hợp này kéo dài lâu hơn để tạo hiệu ứng mượt mà và thú vị.
/*Transition*/ -webkit-transition: Tất cả đều dễ dàng trong 0,8 giây; -moz-transition: Tất cả 0,8 giây đều dễ dàng; -o-transition: Tất cả 0,8 giây đều dễ dàng; -ms-transition: Tất cả 0,8 giây đều dễ dàng; chuyển tiếp: Tất cả đều dễ dàng 0,8 giây;
Di chuột lên trên
Bây giờ là lúc di chuyển hình nền. Vị trí bắt đầu là "0 0". Đặt tham số thứ hai thành 150px. Để dịch chuyển theo chiều ngang, bạn cần thay đổi tham số đầu tiên.
#button3:hover ( vị trí nền: 0px 150px; )
Mô phỏng nhấn nút 3D
Ví dụ cuối cùng trong bài học của chúng ta là về phương pháp 3D phổ biến để mô phỏng thao tác nhấn nút khi di con trỏ chuột qua nó. Hoạt ảnh trong trường hợp này đơn giản đến mức nó thậm chí không yêu cầu chuyển đổi CSS. Nhưng kết quả cuối cùng Hóa ra khá ấn tượng.
Mã CSS cơ bản
Mã CSS cho nút của chúng tôi.
#button4 ( nền: #5c5c5c; bóng văn bản: 0px 2px 0px rgba(0, 0, 0, 0.3); cỡ chữ: 22px; chiều cao: 58px; chiều rộng: 155px; lề: 50px 0 0 50px; tràn: ẩn ; hiển thị: khối; căn chỉnh văn bản: chiều cao dòng: 58px;
Hiệu ứng CSS3
TRONG trong trường hợp này CSS3 không còn là một lựa chọn tốt nữa. Để đạt được hiệu ứng, cần có bóng và độ dốc. Bóng sắc nét tạo ra hình dáng của một nút 3D.
/*Các góc được làm tròn*/ -webkit-border-radius: 5px; -moz-biên giới-bán kính: 5px; bán kính đường viền: 5px; /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); bóng hộp: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ hình nền: -webkit-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -moz-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -o-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: -ms-tuyến tính-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); hình nền: gradient tuyến tính(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Di chuột lên trên
Trong trường hợp này chúng ta có phần di chuột lớn nhất. Độ dài của bóng được giảm xuống và các lề được sử dụng để tạo ra sự hòa trộn giữa vùng tối. Tất cả cùng nhau tạo ra ảo giác như đang nhấn một nút. Lật gradient sẽ tăng cường hiệu ứng.
#button4:hover ( lề-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); bóng hộp: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ hình nền: -webkit-tuyến tính-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); hình nền: -moz-tuyến tính-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4 )); hình nền: -o-tuyến tính-gradient(dưới cùng, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); hình nền: -ms-tuyến tính-gradient( đáy, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); hình nền: gradient-tuyến tính (dưới cùng, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4));
Xin chào tất cả độc giả ấn phẩm này! Trong bài viết hôm nay tôi sẽ trả lời một trong những câu hỏi thường gặp nhất: “Nó được tạo ra như thế nào? công cụ css nút âm lượng? Chủ đề này không dễ, vì vậy tôi khuyên bạn nên nghiên cứu kỹ tài liệu lý thuyết và thực tiễn được cung cấp dưới đây.
Sau khi đọc bài viết, bạn sẽ không chỉ tìm hiểu những thẻ và thuộc tính nào của ngôn ngữ web nên được sử dụng để tạo nút trên một trang trực tuyến mà còn đi sâu hơn vào các phần sâu hơn của CSS. Ý tôi là các lớp giả và các lớp khác nhau hiệu ứng động. Ngoài ra, bạn có thể tự trang điểm chương trình riêng, dựa trên ví dụ của tôi. Vậy hãy bắt đầu!
Công cụ tạo nút cơ bản
Có hai thẻ trong ngôn ngữ đánh dấu có thể được sử dụng để tạo nút trên trang web. Cái này < nút> và quen thuộc với bạn < đầu vào>.
Những người đăng ký của tôi đã đọc ấn phẩm trước đây, cũng như những người đã làm việc một chút với phần tử này < đầu vào>, họ biết rằng công cụ này cho phép bạn tạo không chỉ các nút mà còn cả các đối tượng tùy chỉnh khác. Ví dụ, Trường văn bản, danh sách, công tắc, v.v. Tất cả điều này xảy ra nhờ thuộc tính kiểu.
Thẻ thứ hai là < nút>. Về cơ bản nó hoạt động giống như phần tử được mô tả ở trên. Giống < đầu vào>, < nút> nên được đặt bên trong container < biểu mẫu>. Nút được tạo ở vị trí khác sẽ được hiển thị chính xác nhưng sẽ không truyền thông tin đến máy chủ.
Chưa thẻ này có một số khác biệt. Vì thế, < nút> cung cấp cho nhà phát triển nhiều tùy chọn hơn để định dạng và tạo kiểu cho các nút mà họ tạo.
Để rõ ràng, tôi đã đính kèm một ví dụ dưới đây triển khai phần mềm các yếu tố được mô tả:
Những “lớp giả” này là gì?
Khi chạy ví dụ đầu tiên, các nút màu hồng hoàn toàn giống hệt nhau được hiển thị trong cửa sổ với điểm khác biệt duy nhất là một từ. Đầu tiên và giai đoạn quan trọngđi qua Bạn đã học cách chèn các nút trên các trang của trang web.
Tuy nhiên, bạn phải thừa nhận rằng ở dạng này chúng không thú vị và quá tầm thường. Đó là lý do tại sao chúng ta sẽ bắt đầu thành thạo các lớp giả.
Lớp giả chịu trách nhiệm về hành vi động của các đối tượng được xác định trên tài nguyên web. Tôi nghĩ mỗi người trong số các bạn đều nhận thấy khi bạn di con trỏ qua một liên kết hoặc một trường nào đó, chúng sẽ thay đổi như thế nào. Vì vậy, đây là hành động của các lớp giả.
Để xác định loại hành vi này, hãy sử dụng “:” theo sau là tên trạng thái của đối tượng.
chú ý đến hình thức chung Quảng cáo:
Bộ chọn (tức là phần tử): pseudo-class (xác định các đặc điểm kiểu)
Cơ chế được mô tả có thể được áp dụng:
- đến định danh tiêu chuẩn: một: di chuột( bóng văn bản: 0 -1px 9px màu xanh;);
- tới bộ chọn bạn đã khởi tạo: #aa:tập trung(màu: xanh;).
Tất cả các lớp giả hiện có được chia thành 3 nhóm, mỗi nhóm chịu trách nhiệm:
- trạng thái của đối tượng (đã truy cập, di chuột, liên kết, tiêu điểm, hoạt động);
- phần tử con (con đầu lòng);
- ngôn ngữ của nội dung văn bản (lang).
Vì việc xuất bản liên quan đến rất nhiều nút động, Tôi sẽ nói về một số phần tử của nhóm chịu trách nhiệm về trạng thái của các đối tượng.
Ví dụ về các nút bất thường
Tôi đã nói với bạn mọi thứ bạn cần về mặt lý thuyết, và bây giờ chúng ta hãy bắt tay vào thực hành. Tôi muốn hiển thị 2 giải pháp thú vị lượt xem nút.
Chương trình này tạo một nút hoạt hình ba chiều, khi bạn nhấp vào nó, nút sau sẽ được “nhấn” do thuộc tính biến đổi.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
|
Tôi muốn lưu ý rằng < nút> cũng hỗ trợ hiển thị hình ảnh. Vì vậy, tôi đã viết ví dụ sau dựa trên ví dụ trước, bổ sung thêm một số điểm.
- Khai báo nút đã được thay đổi thành chuỗi ;
- Phần sau đây đã được thêm vào đánh dấu kiểu:
1 2 3 4 5 6 7 8 9 img ( display: block; chiều rộng: 200px; chiều cao: 70px; float: trái; ) p ( đệm-top:10px; ); img ( display: block; chiều rộng: 200px; chiều cao: 70px; float: trái; ) p ( đệm-top:10px; );
- Dịch
Xin chào, habrafriend thân mến! Hôm nay chúng ta sẽ học cách tạo các nút CSS3 3D! Những thứ này dựa trên Freebie PSD nổi tiếng của Orman Clark cho trang web Premium Pixels của anh ấy. Chúng tôi sẽ cố gắng sao chép các nút này bằng CSS với mã HTML tối thiểu.
Bước 1: Tạo một tài liệu HTML
Chúng ta sẽ bắt đầu bằng cách tạo một cái mới tài liệu HTML. Nó sẽ dựa trên bản soạn sẵn HTML5 để chúng ta có điểm khởi đầu dễ dàng. Bây giờ chúng ta sẽ thêm một danh sách có liên kết. Về cơ bản là như vậy, nhờ CSS3 vì không phải sử dụng thêm div và span.Chúng tôi sẽ chỉ định một 'nút' lớp cho từng mục danh sách. Và vì Orman đã sử dụng màu sắc khác nhau, chúng ta sẽ gán cho mỗi nút một màu riêng như một lớp.
Đó là tất cả những gì chúng ta cần ở giai đoạn này.
Bước 2: Quy tắc CSS cơ bản
Trước khi bạn chuyển sang chuyển màu, làm tròn góc, v.v., có một số quy tắc cơ bản cần lưu ý. Không có gì đặc biệt, chỉ là CSS2 thông thường:Ul ( kiểu danh sách: none; ) a.button ( display: block; float: left; vị trí: tương đối; chiều cao: 25px; chiều rộng: 80px; lề: 0 10px 18px 0; trang trí văn bản: none; phông chữ: 12px" Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: đậm; line-height: 25px; text-align: center; )
Bây giờ hãy áp dụng các quy tắc cho các màu khác nhau. Ví dụ, đối với màu xám. Tất cả các màu khác có thể được xem trong bản demo.
/* GRAY */ .gray, .gray:hover ( color: #555; border-bottom: 4px Solid #b2b1b1; nền: #eee; .gray:hover ( nền: #e2e2e2; ) )
Bạn nên kết thúc với một cái gì đó như thế này. Nhìn khá chắc chắn nếu là năm 2008. 
Bước 3: Khung đôi!
Nếu bạn nhìn kỹ vào kết quả cuối cùng, bạn sẽ thấy dọc theo chu vi của toàn bộ nút có dòng kẻ mảnh. Để đạt được hiệu ứng này, chúng tôi sẽ sử dụng các phần tử giả :trước Và :sau đó.a.button ( display: block; float: left; vị trí: tương đối; chiều cao: 25px; chiều rộng: 80px; lề: 0 10px 18px 0; trang trí văn bản: none; phông chữ: 12px "Helvetica Neue", Helvetica, Arial, sans -serif; độ dày phông chữ: in đậm; chiều cao dòng: 25px; căn chỉnh văn bản: giữa; a.button:trước, a.button:after (nội dung: ""; vị trí: tuyệt đối; trái: -1px; chiều cao: 25px ; chiều rộng: 80px; đáy: -1px; ) a.button:trước ( chiều cao: 23px; đáy: -4px; viền trên cùng: 0; )
Bằng cách thêm màu sắc, các nút trông đẹp hơn nhiều.
/* GRAY */ .gray, .gray:hover ( color: #555; border-bottom: 4px Solid #b2b1b1; Background: #eee; ) .gray:Before, .gray:after ( border: 1px Solid #cbcbcb; viền dưới: 1px Solid #a5a5a5; .gray:hover ( nền: #e2e2e2; )
Bước 4: Một chút phép thuật CSS3
Bây giờ chúng ta hãy chuyển sang phần CSS3 thực tế. Hãy bắt đầu với các góc tròn:a.button ( display: block; float: left; vị trí: tương đối; chiều cao: 25px; chiều rộng: 80px; lề: 0 10px 18px 0; trang trí văn bản: none; phông chữ: 12px "Helvetica Neue", Helvetica, Arial, sans -serif; độ dày phông chữ: chiều cao dòng: 25px; -bán kính đường viền webkit: 3px;
Yếu tố tự nhiên :trước Và :sau đó cũng cần góc tròn.
a.button:trước, a.button:after ( nội dung: ""; vị trí: tuyệt đối; bên trái: -1px; chiều cao: 25px; chiều rộng: 80px; đáy: -1px; -webkit-border-bán kính: 3px; -moz -bán kính đường viền: 3px; bán kính đường viền: 3px; ) a.button:trước ( chiều cao: 23px; dưới cùng: -4px; đường viền trên cùng: 0; -webkit-bán kính đường viền: 0 0 3px 3px; -moz- bán kính đường viền: 0 0 3px 3px; bán kính đường viền: 0 0 3px 3px; -webkit-box-shadow: 0 1px 1px 0px #bfbfbf; -moz-box-shadow: 0 1px 1px 0px; ;
Cuối cùng, chúng ta sẽ áp dụng độ chuyển màu, bóng bên trong và bóng văn bản. Để tránh lỗi trong IE6, hãy thêm trạng thái: đã truy cập.
/* GRAY */ a.gray, a.gray:hover, a.gray:visited ( color: #555; border-bottom: 4px Solid #b2b1b1; text-shadow: 0px 1px 0px #fafafa; nền: #eee; nền: -webkit-gradient (tuyến tính, trên cùng bên trái, phía dưới bên trái, từ(#eee), đến(#e2e2e2)); nền: -moz-tuyến tính-gradient (trên cùng, #eee, #e2e2e2); bóng hộp: chèn 1px 1px 0 #f5f5f5; ) .gray:trước, .gray:after ( border: 1px Solid #cbcbcb; border-bottom: 1px Solid #a5a5a5; ) .gray:hover ( nền: #e2e2e2; nền: -webkit-gradient(tuyến tính, trên cùng bên trái, dưới cùng bên trái, từ (#e2e2e2), đến (#eee)); nền: -moz-Tuyến-gradient(top, #e2e2e2, #eee )
Kết quả cuối cùng của chúng tôi không quá tệ!
Bước 5: Chúng ta có quên điều gì không?
Orman cũng đưa trạng thái:active vào thiết kế của mình. Vì vậy, chúng ta chỉ cần thêm nó vào mã của mình.Chúng tôi sẽ đặt phần mã này bên dưới các quy tắc cho các màu khác nhau.
/* TRẠNG THÁI HOẠT ĐỘNG */ a.button:active ( border: none; đáy: -4px; lề-dưới: 22px; -webkit-box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; bóng hộp: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3); a.button:active:trước, a.button:active:after ( border: none; - webkit -box-shadow: không có; -moz-box-shadow: không có; hộp-bóng: không có)
Đây là những gì chúng tôi nhận được:
Bước 6 (tùy chọn): Trình duyệt cũ
Vì vậy, chúng tôi đã tạo một số nút CSS3 đẹp mắt có thể hoạt động ở tất cả trình duyệt hiện đại. Nhưng còn Internet Explorer 8 trở xuống thì sao? Các trình duyệt này không hỗ trợ bóng văn bản hoặc độ chuyển màu.Để giải quyết vấn đề này chúng ta có thể sử dụng thư viện javascript Modernizr, có thể phát hiện xem trình duyệt của bạn có hỗ trợ CSS3 và HTML5 hay không. Thư viện không khắc phục được sự cố mà chỉ cung cấp một kiểu thay thế.
Đầu tiên, chúng ta sẽ tạo phiên bản riêng Modernizr, để không mang theo một lượng lớn javascript bên mình. Điều này có thể được thực hiện trên trang web của họ. Khi chúng ta đã chèn javascript vào tài liệu của mình, chúng ta cần xác định các quy tắc các lớp khác nhau cho một phong cách thay thế. Chúng tôi sẽ sử dụng hình ảnh cho những trình duyệt không hỗ trợ bán kính đường viền và độ dốc.
/* MODERNIZR FALLBACK */ .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-borderradius a.button, .no-borderradius a.button:visited, .no-generatedcontent a.button, .no-generatedcontent a.button:visited ( nền: url(images/sprite.png) no-repeat 0 0px; chiều cao: 32px; chiều rộng: 82px; ) .no-cssgradients a.button:hover, .no-borderradius a .button:hover, .no-generatedcontent a.button:hover ( nền: url(images/sprite.png) no-repeat 0 -32px; ) .no-cssgradients a.button:active, .no-borderradius a.button :active, .no-generatedcontent a.button:active ( nền: url(images/sprite.png) no-repeat 0 -64px; Bottom: 0; line-height: 35px; ) .no-cssgradients a.gray, . no-cssgradients a.gray:visited, .no-cssgradients a.gray:hover ( nền-position-x: 0; ) .no-cssgradients a.pink, .no-cssgradients a.pink:visited, .no-cssgradients a.pink:hover ( nền-position-x: -82px; ) .no-cssgradients a.blue, .no-cssgradients a.blue:visited, .no-cssgradients a.blue:hover ( nền-position-x: -164px; ) .no-cssgradients a.green, .no-cssgradients a.green:visited, .no-cssgradients a.green:hover ( nền-position-x: -246px; ) .no-cssgradients a.turquoise, .no- cssgradients a.turquoise:visited, .no-cssgradients a.turquoise:hover ( nền-position-x: -328px; ) .no-cssgradients a.black, .no-cssgradients a.black:visited, .no-cssgradients a .black:hover ( nền-position-x: -410px; ) .no-cssgradients a.darkgray, .no-cssgradients a.darkgray:visited, .no-cssgradients a.darkgray:hover ( nền-position-x: - 492px; ) .no-cssgradients a. yellow, .no-cssgradients a. yellow:visited, .no-cssgradients a. yellow:hover ( nền-position-x: -574px; ). , .no-cssgradients a.purple:hover ( nền-position-x: -656px; ) .no-cssgradients a.darkblue, .no-cssgradients a.darkblue:visited, .no- cssgradients a.darkblue:hover ( nền -position-x: -738px; ) .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-cssgradients a.button:hover, .no-cssgradients a .button:trước, .no- cssgradients a.button:after, .no-borderradius a.button, .no-borderradius a.button:visited, .no-borderradius a.button:hover, .no-borderradius a.button :trước, .no-borderradius a .button:after, .no-generatedcontent a.button, .no-generatedcontent a.button:visited, .no-generatedcontent a.button:hover, .no-generatedcontent a.button:trước , .no-generatedcontent a.button :sau (viền: 0; )
