Nút CSS. Lợi ích. Styles. thẩm mỹ

Có lẽ không có một trang web là không phải không có tham chiếu của nó vào trang nút khác. Mọi người đều muốn mang nó đến sự chú ý của bạn trang web, và đồng thời sử dụng một loạt các phương tiện. Trong thiết kế web trong đó bao gồm thiết kế các nút, mà khác nhau theo các thông số khác nhau - cả về kích thước và hình dạng, và các hiệu ứng và vân vân.

nút CSS là thuận tiện nhất. Đối với thời điểm này họ hoàn toàn có thể thay đổi phong cách. Và, tất nhiên, nó mang lại cơ hội bổ sung cho thiết kế của trang web như một toàn thể.

Để bắt đầu, để tránh nhầm lẫn và hiểu lầm, nó là cần thiết để hiểu một số khái niệm.

CSS, đó là

CSS, có nghĩa là trong bản dịch "Cascading Style Sheets", hiện nay một trong những công nghệ chính trên Internet. Nếu không có ngôn ngữ này khó có khả năng chi phí ít nhất một trang web.

CSS-mã - một hướng dẫn cho các trình duyệt có chứa các thông tin như các yếu tố hiển thị trên trang và ở đâu để làm điều đó.

Dễ dàng để lưu trữ các hướng dẫn trong một file riêng biệt với .css mở rộng. Mặt khác, họ có thể được đặt vào đầu html-tài liệu.

Nút trên trang web. Những gì nó là

Button, hoặc đồ họa cho điều hướng của trang web nên thu hút sự chú ý của người truy cập để thấy rằng cô đang che giấu thông tin cần thiết, và ngoài ra, nó muốn nhấn chuột. Khi nó đủ sáng và nổi bật, nó sẽ được chú ý. Nút này có thể lôi kéo khách, ví dụ, để lại bình luận trên trang web, hoặc gửi yêu cầu để đăng ký nhận bản tin thú vị, và, tất nhiên, chỉ đơn giản là chuyển phần người sử dụng yêu cầu của trang web.

Buttons là tĩnh, hoạt hình, năng động, âm thanh và không có nó.

Chúng có thể được đặc biệt tạo ra, ví dụ, trong Photoshop, và tải lên một hình ảnh vào trang web, và có thể dễ dàng và nhanh chóng đưa ra với họ trong CSS.

nút CSS

Thực hiện các nút rất dễ dàng. Ưu điểm lớn nhất của việc sử dụng chúng là họ bất cứ lúc nào, chỉ cần một vài giây, bạn có thể thay đổi không còn nhận ra.

Như chúng ta đã biết, có ba điểm chính:

• nghỉ ngơi khi không làm bất cứ điều gì với nó, như chỉ duyệt trang;
• vị trí di chuột con trỏ trên nó;
• và kích hoạt khi nhấp vào.

Các nút đầy đủ hiển thị chính xác trong các trình duyệt như Firefox, Safari, Opera, Chrome. Đồng thời trong Internet Explorer 9, nút sẽ không được hiển thị đầy đủ. Ví dụ, quanh góc, bóng văn bản và đột quỵ xung quanh nút sẽ không được hiển thị ở đây do thực tế rằng các đặc tính này không được hỗ trợ bởi trình duyệt này. Tuy nhiên, nói chung, CSS-nút cho trang web có vẻ tốt trong phiên bản này của trình duyệt. Trong Internet Explorer 8 và các phiên bản khác dưới thứ tám tại nút sẽ không được khối lượng nhìn thấy được, nhưng cùng một lúc, để duy trì sự xuất hiện của gradient.

Nếu chúng ta so sánh các nút ở dạng hình ảnh và nút CSS, sự khác biệt là không gian trên máy chủ sẽ hoàn toàn không liên quan. Nhưng nút CSS sẽ làm giảm số lượng yêu cầu đến máy chủ, nhưng nó sẽ là một lợi thế rõ ràng so với các nút như một hình ảnh.

Nó chỉ ra rằng ngay cả khi sự hỗ trợ của một số thuộc tính CSS trong Internet Explorer và không, các nút này sẽ vẫn trông đoạt hơn hình ảnh đơn giản, bởi vì điều duy nhất mà sẽ mất người dùng trong Internet Exporer, vì vậy để xem nó tính thẩm mỹ của công nghệ hiện đại trên Web -Thiết kế. Nhưng nó là khá phi vật thể khiếm khuyết.

Đối với mỗi vị trí được đưa ra phong cách riêng của mình. Những phong cách được viết bằng một tập tin .css đặc biệt hoặc giữa các thẻ đầu trong trang rất.

Đặt một nút trên trang web

Giữa mã thẻ nội dung bằng văn bản:

ở đâu

id = "button2" ở đây là tên được gán cho nút,

href = http: // site / bài viết / 175.988 /% E2% 80% 9D% D0% 93% D0% 98% D0% 9F% D0% 95% D0% A0% D0% A1% D0% A1% D0% AB % D0% 9B% D0% 9A% D0% 90% E2% 80% 9D được đưa ra một liên kết trực tiếp vào tài liệu mong muốn,

TEXT - văn bản in sẽ được hiển thị trên nút.

Phong cách cho các nút

1. nút CSS Style được ghi riêng trong tài liệu hoặc trong trang riêng của mình:

2. Đầu nút bằng văn bản CSS khi họ đang nghỉ ngơi:

3. Thông số tiếp theo được ghi lại, tương ứng với các nút khi con trỏ cho thấy nó. Nếu trong trường hợp này, chỉ thay đổi màu sắc và độ bóng, và phong cách, mọi thứ vẫn giữ nguyên, ngoại trừ màu sắc và bóng:

4. Và lựa chọn cuối cùng là vị trí của các nút được nhấn con trỏ trên nó. Thông thường trong trường hợp này chỉ có một sự thay đổi tối thiểu, chẳng hạn như màu sắc, như trong trường hợp này:

CSS - nút đẹp

Để tạo ra một gradient, bạn có thể sử dụng các nút. Tốt nhất là đầu tiên vẽ nút trong bất kỳ trình soạn ảnh, chẳng hạn như Photoshop, để bạn biết chính xác những gì nó sẽ xảy ra cuối cùng. Nếu bạn sử dụng Photoshop, sau đó nó bước đầu đã có một số gradient, nhưng ngoài ra, bạn có thể tải ngày càng nhiều, các loại mà muốn có được trên trang web.

Thử nghiệm với CSS-mã và thay đổi thông số khác nhau, nó có thể thay đổi các nút đẹp CSS, và bằng cách lựa chọn, để đạt được kết quả mong muốn.

Các tham số này bao gồm:

- màu sắc của văn bản trên nút;

- kích thước của văn bản và các nút;

- nút màu gradient;

- nút góc bán kính;

- và màu sắc của đột quỵ cô.

Nói đúng ra, bạn có thể một cách an toàn, không sợ hãi, để thử nghiệm và chọn lựa chọn tốt nhất. Mặc dù số lượng nhỏ các thông số, bạn có thể tạo rất đa dạng trong các nút phong cách của họ.