Sở hữu css "minh bạch" - một cách đơn giản để làm cho trang web thiết kế thú vị

Ngày nay, việc tạo ra các thiết kế trang web trở thành một hình thức nghệ thuật. Đây không chỉ là một tập hợp các yếu tố trang của một màu nhất định và kích thước, phông chữ của các phong cách khác nhau và tranh vẽ theo chủ đề. Để làm cho trang web của bạn khác biệt so với những người khác, để thu hút sự chú ý của khách tham quan và trực tiếp nó đến các yếu tố nhất định, sử dụng một số lượng lớn các phương pháp và công cụ. Trong số đó có một css tài sản rất phổ biến - tính minh bạch. Kỹ thuật này khá thời trang và quyến rũ, và do đó được sử dụng thường xuyên. Tính minh bạch có thể cung cấp cho đối tượng các trang khác nhau của trang web - khối văn bản hoặc toàn bộ hình ảnh, ví dụ. Nó cũng đạt được theo những cách khác nhau. Chúng ta hãy xem xét chúng dưới đây.

Thông số xác định các yếu tố của sự minh bạch

Các thông số để điều chỉnh tính minh bạch của các yếu tố của một vài. Chúng được sử dụng tùy thuộc vào mục tiêu cụ thể, cũng như trình duyệt, đó là theo thiết kế "điều chỉnh". Chúng bao gồm các thuộc tính sau:

• opacity;
• lọc;
• PNG hình ảnh làm nền.

giá trị tài sản css "minh bạch" được thay đổi như sau: số càng cao, càng thấp mức độ minh bạch của nguyên tố này. Opacity, nó thay đổi từ 0 đến 1, trong bộ lọc - từ 10 đến 100. Và sau này được sử dụng cho trình duyệt Interet Explorer, và tất cả tài sản opacity áp dụng khác.

Tính minh bạch hình ảnh (thay đổi)

Hãy bắt đầu với các tùy chọn sẽ xuất hiện trong suốt khi bạn di chuyển mục bằng cách kéo chuột.

Chúng ta hãy xem xét làm thế nào để xác định tính minh bạch của hình ảnh. CSS cung cấp hai tùy chọn. Để làm điều này, bạn phải đăng ký trực tiếp trong mã html-tài liệu như sau:

1. Xác định đường dẫn đến hình ảnh.
2. Chúng tôi xác định các thông số của tính minh bạch khi con trỏ thì không. Để làm điều này, chúng tôi sử dụng các thuộc tính của onmouseover và onmouseout, mà quy định về giá trị của độ mờ đục, và bộ lọc.

Các đặc tính tương tự có thể được quy định tại css-tài liệu và mã nguồn để thêm một tham chiếu đến nó. Kết quả lần lượt ra giống nhau.

Tính minh bạch của văn bản và trang khối

Đối với các văn bản hoặc khối (trong suốt div), css cung cấp tùy chọn của nó, tương tự như việc tạo ra một hình ảnh trong suốt, bạn phải sử dụng kết nối css-file, trong đó các thông số mong muốn được thiết lập. Bạn có thể đi và là một cách đơn giản hơn. Khi bạn thiết lập các khối kiểu div style hoặc văn bản p kê toa html-code sau vào onmouseover và onmouseout yếu tố. Cả hai lựa chọn làm việc và tạo ra kết quả mong muốn.

liên tục trong suốt

Trong một số trường hợp, tính minh bạch của một đối tượng, một yếu tố thiết kế hoặc văn bản mà bạn muốn thiết lập trên cơ sở liên tục. Trong trường hợp này, giải pháp thậm chí còn đơn giản hơn khi bạn di con trỏ chuột.

yếu tố css cho tính minh bạch sẽ được đưa ra bởi các mã sau đây. Trong div style khối định giá trị cho nền (ví dụ # ff8800), opacity (ví dụ, 0.5) và chiều rộng (chiều rộng) và đệm (padding).

Đối với hình ảnh giá trị mã được xây dựng và lọc opacity, và chỉ định đường dẫn đến hình ảnh.

RGBA-method

Có những lựa chọn khác cho việc sử dụng này css tài sản: tính minh bạch có thể được áp dụng cho các màu cơ bản của bất kỳ yếu tố thiết kế. Nó sử dụng phương pháp RGBA. Ba chữ cái đầu tiên đại diện cho các màu cơ bản (đỏ, phân hạch, xanh dương), và cuối cùng - alpha, thiết lập mức độ minh bạch. Sử dụng RGBA định dạng quy định minh bạch, chỉ nó vào chữ số cuối cùng. Ví dụ, như: background: rgba (240,2,33,0.4035).

phần kết luận

Do đó, bằng cách sử dụng trong quá trình làm việc trên thiết kế trang web tính năng đơn giản nhưng hiệu quả css "minh bạch", bạn có thể làm cho nó yếu tố với nỗ lực tối thiểu thú vị hơn và đáng chú ý hơn. Các phương án được mô tả là các tính năng tùy chỉnh minh bạch sẽ giúp bạn với điều này.