Cách sử dụng hiệu ứng hình ảnh CSS3 - núm vú

CSS3 cho phép bạn áp dụng một số hiệu ứng đặc biệt thú vị cho các trang HTML5 của bạn. Những hiệu ứng này có thể được áp dụng cho bất kỳ phần tử nào, nhưng chúng thường được áp dụng cho hình ảnh và tiêu đề. Lưu ý rằng những điều này vẫn được coi là thử nghiệm, vì vậy việc triển khai trình duyệt thay đổi.

Độ trong suốt

CSS3 đã hỗ trợ đầy đủ cho độ mờ được điều chỉnh. Điều này được phản ánh bằng một vài cách. Thứ nhất, bất kỳ phần tử nào có thuộc tính có thể được thiết lập từ 0 (toàn vẹn trong suốt) đến1 (hoàn toàn không rõ ràng).

Đây là một div với phần minh bạch một phần chồng lên một hình ảnh.

Mã toàn bộ cho trang này rất dễ thực hiện:

độ mờ đục. html body {background-image: url ("apoyo. jpg"); background-repeat: không lặp lại;} h1 {color: rgba (0, 0, 0,.3);} #box {position: absolute; trên cùng: 350px; còn lại: 100px; chiều cao: 100px; chiều rộng: 100px; đường viền: 1px đỏ đậm; màu nền: màu trắng; độ mờ:. 3;}

Trình chiếu Opacity

Tất cả mã là các công cụ HTML và CSS2 thông thường, ngoại trừ thuộc tính cuối cùng. Thuộc tính opacity lấy một giá trị điểm nổi giữa 0 và 1. Zero (0) hoàn toàn trong suốt và một (1) hoàn toàn không rõ ràng.

Lưu ý rằng ví dụ sử dụng mẫu chính minh bạch khác được hỗ trợ bởi CSS - tiêu đề sử dụng mô hình RGBA để thêm độ trong suốt alpha vào một màu. Nói chung, sử dụng alpha khi bạn muốn thêm tính minh bạch một phần vào một màu riêng. Độ mờ có thể được sử dụng cho toàn bộ phần tử, thậm chí phức tạp như hình ảnh hoặc video.

Tất cả các phiên bản trình duyệt gần đây hỗ trợ độ mờ mà không yêu cầu các tiền tố cụ thể của nhà cung cấp. Các trình duyệt cũ hơn đơn giản chỉ hiển thị phần tử là mờ đục hoàn toàn, vì vậy bất cứ điều gì dưới một phần tử minh bạch một phần có thể không nhìn thấy được đối với các trình duyệt cũ hơn.

Phản ánh

Sự phản chiếu là một trong những yếu tố hình ảnh bổ sung khá nhiều cho một trang khi được thực hiện tốt. Mặc dù nó không phải là một phần chính thức của đặc tả CSS3, đó là một công nghệ đầy hứa hẹn. Hiện tại chỉ có các trình duyệt dựa trên WebKit (có nghĩa là Safari, iPhone / iPad và Chrome) hỗ trợ khả năng này. Tuy nhiên, nó cho thấy rằng hứa hẹn rằng một số hình thức của khả năng này có thể sẽ xuất hiện trong các trình duyệt khác tại một số điểm.

Áp dụng CSS sau để tạo bất kỳ phần tử nào với lớp phản chiếu có phản ánh đẹp trong các trình duyệt được hỗ trợ:

-webkit-box-reflect: below 2px;

Các phản xạ cơ bản khá đơn giản:

1. Áp dụng thuộc tính "Thu gọn lại trang web".

   Thật không may, không có phiên bản chung chung, cũng không có thuộc tính được nhân đôi bởi các trình duyệt khác.

2. Chỉ định nơi mà sự phản chiếu được đặt.

   Thông thường sự phản xạ đi xuống phía dưới phần tử chính, nhưng nó cũng có thể ở trên, bên trái, hoặc bên phải.

3. Cho biết chiều rộng khoảng cách.

   Sự phản chiếu có thể được đặt ngay bên cạnh nguyên tố ban đầu, nhưng thường thì nó có vẻ tốt hơn với một khoảng cách nhỏ. Khoảng cách thường được đo bằng pixel.

Điều này sẽ tạo ra sự phản chiếu rất tốt.

Tuy nhiên, phản xạ thường không trùng lặp hoàn hảo với pixel. Chúng có xu hướng biến mất theo khoảng cách. WebKit cho phép bạn thêm một gradient vào một sự phản chiếu. Trong trường hợp này, gradient đi từ đục hoàn toàn (trắng) đến hoàn toàn trong suốt (trong suốt).

. phản chiếu (-bộ gương hộp phản chiếu: dưới 2px 

-chức tuyến mạng-tuyến tính-gradient (phía dưới, trắng, minh bạch 40%, trong suốt);}

Phần tiêu chuẩn của phản xạ cũng giống như trước ví dụ, nhưng nó bao gồm một gradient làm mờ sự phản chiếu đến độ trong suốt.

1. Tạo một gradient tuyến tính.

   Các gradient cho một sự phản chiếu gần như tuyến tính. Lưu ý rằng gradient không phải là một quy tắc CSS mới, nhưng chỉ đơn giản là một tham số trong quy tắc phản chiếu hiện tại.

2. Làm cho gradient di chuyển từ dưới lên trên.

   Sử dụng để chỉ gradient bắt đầu ở trên cùng, và để cho biết gradient bắt đầu ở phía dưới. Các giá trị này biểu diễn trên cùng và dưới cùng của hình ảnh hình ảnh ban đầu chứ không phải sự phản chiếu (tất nhiên sẽ bị đảo ngược). Thông thường, gradient của bạn bắt đầu ở dưới cùng của hình ảnh gốc (ở phía trên của hình phản chiếu).

3. Bắt đầu với độ mờ hoàn toàn.

   Phần dưới cùng của hình ảnh ban đầu là phần trên của hình được phản chiếu, và phần trên của hình phản chiếu phải hoàn toàn mờ đục. Độ dốc này không thực sự về màu sắc, nhưng về những phần phản xạ có thể nhìn thấy được. Đặt màu ban đầu sang màu trắng làm cho phần trên của phản xạ hoàn toàn mờ đục.

4. Kết thúc với độ mờ hoàn toàn.

   Phần trên cùng của hình ảnh ban đầu (phía dưới của sự phản chiếu) phải hoàn toàn trong suốt, do đó hãy kết thúc gradient với từ khoá màu đặc biệt trong suốt (tương đương với rgba 255, 255, 255, 0).

5. Thêm một điểm dừng màu để điều chỉnh phai.

   Thêm một điểm dừng màu để cho biết nơi nào trong sự phản chiếu mà bạn muốn hình ảnh bắt đầu mờ dần.

Lưu ý rằng hình ảnh được phản ánh không được tính như một phần tử riêng biệt cho các mục đích bố trí trang, vì vậy văn bản và các nội dung khác sẽ chảy ngay trên đầu phản chiếu của bạn.

Phản xạ thường được áp dụng cho hình ảnh, nhưng chúng có thể được áp dụng cho bất kỳ phần tử, ngay cả video!

Có thể có được hiệu ứng phản chiếu trong các trình duyệt khác bằng cách sử dụng thông minh các thuộc tính chuyển đổi và dốc. Tuy nhiên, bây giờ, có lẽ sẽ an toàn nhất để dự trữ hiệu ứng này trong trường hợp bạn biết người dùng sẽ sử dụng một trình duyệt được hỗ trợ hoặc khi hiệu ứng phản chiếu không hoàn toàn cần thiết.