Hiệu ứng di chuột ngược css. Hiệu ứng di chuột ban đầu cho hình ảnh trong CSS3 thuần túy

Trước hết, đối với những người không hiểu rõ về chủ đề này hoặc không hiểu biết về chủ đề này, tôi sẽ giải thích ngắn gọn về hiệu ứng di chuột là gì. nó các loại khác nhau hiệu ứng (chú thích bật lên, chú giải công cụ, chuyển tiếp mượt mà, chuyển đổi, xoay, phóng đại, dịch chuyển, v.v., v.v.) được áp dụng cho các phần tử của trang web khi bạn di chuột qua chúng bằng con trỏ chuột. Những hiệu ứng này có thể được thực hiện bằng cách sử dụng các plugin jQuery khác nhau và CSS3 thuần túy.
Hôm nay tôi đã chuẩn bị một số lượng lớn các hiệu ứng di chuột ban đầu cho các hình ảnh được tạo bằng CSS3 mà không cần kết nối các thư viện javascript. Tôi sẽ không nói về những ưu điểm và nhược điểm của việc triển khai hiệu ứng di chuột trong CSS3 thuần túy, đây là một chủ đề khác, chỉ cần xem các ví dụ và nếu cần, hãy sử dụng cái bạn thích trên trang web của bạn. Tất cả các hiệu ứng được trình bày trong phần tổng quan đều được cung cấp kèm theo một ví dụ demo và tài liệu chi tiết kèm theo các nguồn. Các sách hướng dẫn hầu hết đều ở dạng tư sản, nhưng mọi thứ đều ít nhiều mang tính trực quan.

Chỉ muốn thu hút sự chú ý của bạn đến thực tế là tất cả các ví dụ này sẽ chỉ hoạt động chính xác trong các trình duyệt hiện đại hỗ trợ thuộc tính CSS3.

Để không phá vỡ bức tranh tổng thể, anh ấy không làm sai lệch tên của các hiệu ứng bằng bản dịch máy (trừ một số), anh ấy đã để nguyên bản gốc của các tựa game như cách gọi của nhà phát triển.

Cao hiệu ứng thú vị khi di chuột qua hình ảnh thu nhỏ, sử dụng các đường mảnh trong thiết kế và kiểu chữ. Một số loại hiệu ứng khác nhau để xuất hiện chú thích cho hình ảnh, chuyển đổi 3D mềm mại và không xâm phạm, và chuyển tiếp mượt mà của các yếu tố giả. Chỉ hoạt động trong các trình duyệt hiện đại.

iHover là một bộ sưu tập các hiệu ứng di chuột thuần túy CSS3 ấn tượng với hỗ trợ Bootstrap 3. Scss CSS(tệp), dễ dàng sửa đổi với các biến. Mã là mô-đun, không cần phải bao gồm toàn bộ tệp. Hơn 30 hiệu ứng khác nhau trong một gói. Mọi thứ đều được ghi lại khá tốt và các hiệu ứng rất dễ sử dụng. Tất cả những gì bạn phải làm là sắp xếp mã đánh dấu HTML một cách chính xác và bao gồm Tệp CSS làm việc.

Tạo một số hiệu ứng di chuột đơn giản nhưng phong cách cho chú thích hình ảnh. Ý tưởng là làm cho tiêu đề, tên tác giả và nút liên kết xuất hiện đáng kể khi di chuột qua các hình thu nhỏ. Đối với một số hiệu ứng, các chuyển đổi 3D trực quan được sử dụng.

Một hiệu ứng chuyển tiếp rất đơn giản, không có bất kỳ chuông và còi đặc biệt nào, một hình ảnh hoàn toàn tròn trong khung, biến đổi bằng cách thay đổi tiêu điểm khi di chuột và thế là xong.

Hiệu ứng di chuột cho hình thu nhỏ CSS3

Nhà phát triển định vị tác phẩm của mình như một ví dụ về thư viện hình ảnh với các hiệu ứng chuyển tiếp khi các chú thích (caption) xuất hiện cho hình thu nhỏ. Hỗ trợ mạnh mẽ cho các trình duyệt hiện đại được tuyên bố, bao gồm IE 9+. Tất nhiên, rất khó để gọi nó là một phòng trưng bày chính thức, nhưng hiệu ứng của sự xuất hiện của chữ ký khá thú vị.

Một bộ khác Quy tắc CSSđể tạo hiệu ứng biến đổi ngoạn mục khi di chuột qua các hình thu nhỏ tròn hoàn hảo. Gói này chứa 7 loại chuyển đổi CSS3, tài liệu hướng dẫn rất chi tiết về cách thiết lập và sử dụng. Các hiệu ứng được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Xoay hình thu nhỏ khi di chuột

Hiệu ứng đơn giản của việc xoay các hình thu nhỏ tròn khi bạn di chuột qua chúng bằng con trỏ chuột giống như bạn có thể thấy trên blog của tôi, trong thông báo về các bài đăng trên trang chính. Được triển khai trong một vài dòng mã css.

Được dịch theo nghĩa đen: "Hiệu ứng tình dục khi di chuột qua các hình ảnh." Tất nhiên, bạn sẽ khó nhận thấy điều gì đó quá gợi cảm trong hiệu ứng này, trừ khi bạn có trí tưởng tượng bạo lực, nhưng hiệu ứng này thú vị theo cách riêng của nó và rất đáng để chú ý.

Năm hiệu ứng di chuột khác nhau cho hình ảnh. Chú thích bật lên trong ba biến thể, rèm cửa ở dạng thay đổi mức độ trong suốt và xoay theo chuyển động ngang.

4 Loại hiệu ứng hoạt hình cho chú thích hình ảnh, được triển khai độc quyền bằng CSS3. Các vị trí mờ dần và hiệu ứng chuyển tiếp khác nhau, một hiệu suất khá tiêu chuẩn. Để hiểu cách hoạt ảnh hoạt động, hãy xem nguồn một trang demo, tôi không tìm thấy bất kỳ tài liệu riêng biệt nào.

Hình thu nhỏ nằm trong thư viện với nhiều lần xuất hiện phụ đề khác nhau, xoay, mờ dần, bật lên và hơn thế nữa. Tài liệu về cách sử dụng và cấu hình khá khan hiếm, nhưng bạn có thể tìm ra nếu bạn thực sự muốn.

Hiệu ứng này không đại diện cho bất cứ điều gì đặc biệt, một sự thay đổi tầm thường về độ sáng của hình ảnh khi di chuột, ngoại trừ các yếu tố hoạt ảnh được thêm vào. Bạn sẽ phải tự mình tìm ra các chi tiết của việc triển khai bằng cách mở rộng mã nguồn của bản demo.

Một bộ 10 hiệu ứng di chuột khác cho hình ảnh, nhiều sửa đổi khác nhau đối với hình thu nhỏ khi di chuột, thu phóng, xoay, xoay, làm mờ, v.v.

Hiệu ứng hoạt ảnh biên giới

Các hiệu ứng khác nhau để làm sinh động khung xung quanh hình ảnh, trông khá hấp dẫn, có hướng dẫn chi tiết về cách thiết lập và sử dụng.

Hiệu ứng di chuột CSS3 gốc được áp dụng để hiển thị hiệu quả chú thích hình thu nhỏ khi di chuột. Bộ quy tắc CSS bao gồm 10 hiệu ứng khác nhau mà bạn có thể sử dụng riêng những bức tranh khác nhau... Các hiệu ứng thực sự ấn tượng, đặc biệt là khi bạn nhận ra rằng tất cả đều được thực hiện bằng CSS3. Hướng dẫn chi tiết, sẽ giúp bạn tìm ra những gì.

Ý tưởng là tạo một SVG làm hình nền cho một số loại chữ và biến thành hình dạng khác khi di chuột. Như vậy, bạn có thể làm cho bộ các lựa chọn khác nhau, trong ví dụ, ba loại hiệu ứng chuyển tiếp được hiển thị. Điều thú vị khi sử dụng SVG là chúng ta có thể thay đổi kích thước biểu mẫu để vừa với vùng chứa mẹ.

Hình ảnh trượt

Bản chất của hiệu ứng này là hình ảnh di chuyển lên xuống để tạo ra một chữ ký. Nếu bạn làm việc với các tham số kiểu, tôi nghĩ bạn có thể đạt được các hiệu ứng khá đẹp mắt, nhưng theo mặc định, mọi thứ trông rất đơn giản.

Với hiệu ứng này, mọi thứ đều đơn giản, chú thích cho ảnh trượt ra trên cùng bên phải hoặc từ trái xuống dưới cùng, dưới dạng dải băng với nền tối mờ, mọi thứ rất đơn giản để tạo lại bằng cách sử dụng thuộc tính css.

Một giải pháp thú vị, các tiểu cảnh được trình bày dưới dạng tối, khi bạn di chuột vào đó, các hình ảnh hiện ra và chữ ký hiện lên trên nền sáng.

Chú thích hình ảnh xuất hiện từ góc và mở rộng theo đường chéo trên toàn bộ khu vực của hình ảnh.

Một số chưa giải pháp thú vịđể triển khai chú thích bật lên cho hình thu nhỏ của hình ảnh. Trong trình chỉnh sửa trực tuyến, bạn có thể thử nghiệm với các tham số và đạt được kết quả ấn tượng hơn.

Bộ dụng cụ hiệu ứng đẹp khi di chuột qua hình thu nhỏ, các loại hình và thiết kế chú thích cho hình ảnh. Các đường mảnh đối lập với nền hơi tối tạo ra các khối thông tin dễ đọc.

Hình dạng kỳ lạ và hiệu ứng thu phóng kết hợp với hiệu ứng hoạt hình của chú thích cho hình ảnh thu nhỏ.

Hiệu ứng tuyệt vời của lớp phủ các biểu tượng trên hình thu nhỏ trong các biến thể giao diện khác nhau. Ví dụ sử dụng biểu tượng (+) được phác thảo trong một vòng tròn bằng cách sử dụng bán kính đường viền: trong CSS, bạn cũng có thể sử dụng các biểu tượng phông chữ để làm cho bảng bật lên nhiều thông tin hơn.

6 Chú thích hình ảnh

6 Tùy chọn để xuất hiện phụ đề bật lên cho hình ảnh khi di chuột bằng CSS3. Bài chi tiết về triển khai và cấu hình, các nguồn có sẵn để tải xuống.

Cách tạo một số hiệu ứng di chuột qua phụ đề tinh tế và hiện đại.

Tìm hiểu cách tạo một số hiệu ứng di chuột đơn giản nhưng phong cách cho chú thích hình ảnh. Ý tưởng là có một lưới các số liệu và áp dụng hiệu ứng di chuột cho các mục sẽ hiển thị chú thích với tiêu đề, tác giả và nút liên kết.

Hiệu ứng Di chuột CSS3 nhận biết hướng với jQuery

Tạo hiệu ứng di chuột nhận biết hướng bằng cách sử dụng CSS3 và jQuery.

Tìm hiểu cách tạo hiệu ứng di chuột nhận biết hướng bằng cách sử dụng một số tính năng tốt của CSS3 và jQuery. Ý tưởng là có một lớp phủ nhỏ trượt lên trên một số hình thu nhỏ theo hướng mà chúng ta đang đến bằng chuột.

Hiệu ứng Di chuột vòng tròn với Chuyển tiếp CSS

Hướng dẫn về cách tạo các hiệu ứng di chuột khác nhau trên các vòng tròn với chuyển tiếp CSS và xoay 3D

Bộ nút CSS này bao gồm một số kiểu và hiệu ứng đơn giản, sáng tạo và tinh tế để truyền cảm hứng cho bạn. Các hiệu ứng có thể được nhìn thấy khi di chuột vào một số nút và nhấp vào những nút khác. Hầu hết, các chuyển đổi CSS được sử dụng nhưng cũng sử dụng các hoạt ảnh CSS va cho một số nút JavaScript để thêm / bớt các lớp hiệu ứng được sử dụng.

Hiệu ứng Di chuột biểu tượng

Một tập hợp các hiệu ứng di chuột biểu tượng tròn đơn giản với các hiệu ứng chuyển tiếp và hoạt ảnh CSS để bạn tùy hứng.

Đây là một bộ sưu tập các hiệu ứng di chuột biểu tượng đơn giản. Tạo hiệu ứng tinh tế và phong cách bằng cách sử dụng chuyển tiếp CSS và hoạt ảnh trên các neo và các phần tử giả của chúng.

Ý tưởng tách việc trình bày thông tin khỏi mã tạo và xử lý nó đã trở nên hoàn toàn mới. Đó là một quyết định mạnh mẽ tại một thời điểm, nhưng thời điểm này không được công nhận đầy đủ sau đó. Khi lập trình tách khỏi một máy tính duy nhất, nhưng không giành chiến thắng trong mạng nội bộ hoặc một vùng miền riêng biệt, và ngay lập tức lan rộng khắp nơi, chỉ khi đó thì việc trình bày thông tin (về mặt thiết kế) và làm việc với nó (về mã) là hai mặt trong cùng một mặt phẳng.

Ba khía cạnh của việc xây dựng địa điểm

Từ quan điểm chính thức, có ba thành phần chính (trong các chiêu bài cú pháp khác nhau) tạo nên một trang web: mã PHP, mã JavaScript và mô tả kiểu CSS. Hoàn toàn không quan trọng cách đặt tên của thành phần này hoặc thành phần đó và phiên bản nào được sử dụng, phiên bản đánh dấu HTML được sử dụng và phiên bản trình duyệt là gì. Ngày nay, khả năng tương thích không được coi trọng, bởi vì tại mọi thời điểm nó có liên quan: cái gì được mã hóa và cái gì được mã hóa có thể được hiển thị và thực thi.

Nếu các ngôn ngữ trước đây tranh giành ý tưởng thì ngày nay các nhà sản xuất tiêu chuẩn trong lĩnh vực công nghệ Internet và trình duyệt lại thích đấu tranh một cách trống rỗng.

Cá nhân và công cộng

Có rất nhiều phương tiện thông qua Internet (máy tính, máy tính xách tay, máy tính bảng, điện thoại thông minh), cũng có rất nhiều trình duyệt. Không có gì đảm bảo rằng một thiết bị duy nhất sẽ hiển thị trang web ở dạng mà nhà phát triển đã tạo ra nó. Những nỗ lực sau này không phải lúc nào cũng đạt được mục tiêu và cung cấp cho thiết kế web một sự đa dạng duy nhất, đó là sự thống nhất của việc hiển thị thực thể, bất cứ nơi nào nó được mở cho khách truy cập.

Bằng cách tách biệt cá nhân và công chúng, chỉ sử dụng những gì phù hợp với công chúng, bạn có thể đạt được thành công đáng kể trong thiết kế. Vẻ đẹp, khoảnh khắc nghệ thuật và thiết kế web là số phận của các chuyên gia và tài năng tương ứng. CSS là mã, mặc dù khá đặc biệt. Công việc của anh ta là mô tả các phong cách (các tùy chọn để hiển thị thông tin). Với sự ra đời của các thiết bị di động, CSS đã được tải bằng mã hóa thực sự dưới dạng các truy vấn phương tiện truyền thông. Vì vậy, lựa chọn tái hôn giữa thiết kế và mã không phải là viển vông như cách đây vài năm.

Nhà phát triển, khi phát triển các kiểu CSS, dựa trên kinh nghiệm đã được chứng minh của chính mình và dựa trên các cấu trúc CSS hoạt động trên hầu hết các trình duyệt, làm hài lòng phần lớn khách truy cập trang web. Bạn nên tận dụng tối đa lợi ích đầu tiên và tối thiểu của điều thứ hai, khi đó sẽ có nhiều cơ hội nhận được kết quả hoạt động hầu như mọi lúc và mọi nơi.

Quy tắc đầu tiên: hy vọng vào tiêu chuẩn, nhưng đừng tự mình mắc sai lầm

CSS: hover là khi con chuột di chuột qua một phần tử trang. Khi con chuột nhấp vào một phần tử, nó sẽ hoạt động, nhưng khi con trỏ di chuyển sang một bên, nó có thể thay đổi lại và hiển thị ở trạng thái hoạt động. “: Hover”, “active” và “visit” là các lớp giả được sử dụng phổ biến nhất khi mô tả kiểu.

Rất thuận tiện để không phải lo lắng về những điều vặt vãnh như việc di chuyển chuột qua các phần tử trong mã trang web. Bằng cách cung cấp hai mô tả trong bảng mô tả kiểu:

background-color: xanh lá cây;

Nhận nó khi bạn di chuột qua phần tử thay đổi tự động tô màu văn bản từ đen sang trắng và thay đổi nền của phần tử này thành màu xanh lá cây. Các lớp giả có thể được áp dụng cho bất kỳ phần tử nào và đạt được nhiều hiệu ứng hình ảnh.

Quy tắc thứ hai: khi tin tưởng các tiêu chuẩn, hãy được hướng dẫn bởi mã của bạn

Mọi thứ sẽ ổn nếu tiến trình vẫn ở mức máy tính và máy tính xách tay được trang bị chuột và tiến bộ di độngđã không dẫn đến sự xuất hiện của điện thoại thông minh, máy tính bảng và các thiết bị di động khác mà rất khó để kết nối một thiết bị như vậy.

Mặt khác, chỉ trên các thiết bị được trang bị màn hình cảm ứng đặc biệt mới có thể thao tác trực tiếp các ngón tay của bạn trên màn hình cảm ứng, như đã trở nên phổ biến trên điện thoại thông minh, máy tính bảng và các thiết bị tương tự.

Có một sự khác biệt đáng kể và: di chuột hoàn toàn không hoạt động ở đây như chúng tôi mong muốn. Bạn không thể làm gì nếu không có mã ở đây và việc sử dụng các truy vấn phương tiện không giải quyết được tất cả các vấn đề.

Khả năng tương thích quá đắt trong thời hiện đại thế giới thông tin, do đó, để đảm bảo chức năng thích hợp của trang web trong yêu cầu thiết lậpđể thiết kế web và triển khai chức năng, nên tập trung vào các trường hợp sử dụng cần thiết tối thiểu: CSS hover, CSS hover focus, CSS hover active (đã truy cập). Càng nhiều mã (cả bên trong trình duyệt và trên máy chủ) kiểm soát thiết kế web càng tốt. Một chương trình là kiểm soát, sẽ tốt hơn khi kiểm soát này không đầu hàng các tiêu chuẩn hiện hành, từ đó bạn thường không biết những gì mong đợi.

Các nút và các phần tử trang khác

Cái nút di chuột qua CSS- một giải pháp tuyệt vời, nhưng lớn hơn mỗi phần tử của trang là một "nút". Trang web trước hết phải tồn tại và nếu điều này không được bao gồm trong mã, nếu nhiệm vụ là tạo ra một trang web phát triển phù hợp với lĩnh vực ứng dụng và hành động có tính đến hành vi của khách truy cập, thì ít nhất bằng cách sử dụng các kiểu CSS, bạn có thể tạo sự sống động cho các phần tử của trang.

Nó là thuận tiện để sử dụng các hiệu ứng di chuột. Với sự trợ giúp của họ, bạn có thể dễ dàng cung cấp độ trực tiếp cho các trang, nhưng mã không biết con chuột đang làm gì trên màn hình nếu không thể theo dõi chuyển động của nó trong đó. Theo quan điểm này, nghĩa là, khi mã điều khiển chuyển động của chuột (= chuyển động của ngón tay trên điện thoại thông minh), nó có thể làm nổi bật phần tử hoặc biến đổi phần tử đó một cách độc lập. Điều này không liên quan gì đến lớp giả, nhưng nó cho toàn quyền kiểm soát mã phía trên hình thức bên ngoài của trang, cho phép bạn hiển thị đầy đủ các thiết bị khác nhau trong các trình duyệt khác nhau.

Cạm bẫy trong bảng định kiểu

Không thể nói rằng tiêu chuẩn trong lĩnh vực mô tả phong cách CSS không biết chúng đang làm gì, nhưng không thể tranh luận rằng chúng hoàn toàn tương tác với các tiêu chuẩn khác trong lĩnh vực lập trình Internet.

Kiểu và lớp giả có thể được mô tả ở giai đoạn mã hóa trang, tại thời điểm máy chủ tạo trang và trong động: đã có trong trình duyệt, bạn có thể dễ dàng tạo phong cách mới và thay đổi cái hiện có.

Sử dụng AJAX khi không cần tạo lại trang để hiển thị phản ứng với hành động của người truy cập và chỉ cần thay đổi phần tử của nó hoặc một vài phần tử thêm một chút "hạt tiêu" là đủ. "Tình bạn" của các mã - những gì đã có trong trình duyệt (JavaScript) và những gì trên máy chủ (PHP) - là rất nhiều tác giả (lập trình viên) của trang web.

Không chỉ hiển thị các phần tử của nó trên trang mà khả năng nhận thức sâu hơn của họ về mã phụ thuộc đáng kể vào cách thức thực thi thuật toán của tương tác này. Nói một cách đơn giản, các lớp giả (đặc biệt) rất tốt cho tĩnh, giống như một chiếc du thuyền đang chèo trong vùng biển trong xanh với gió nhẹ - mọi thứ đều hiển nhiên, dễ tiếp cận và có thể kiểm soát được. Nếu thời tiết thay đổi, gió lớn hơn hoặc du khách gây ra tình huống bất trắc, có thể nhanh chóng lao vào đá ngầm và mất khách.

Tiêu chuẩn và mô phỏng của nó

Hover có thể được mô phỏng bằng JavaScript bằng cách sử dụng các sự kiện onmouseover và onmouseout. Thường thì đây là nơi tất cả kết thúc. Từ quan điểm của lẽ thường, khi nó đến về việc tạo ra một trang web thực sự hoạt động, tốt hơn là bạn nên giữ quyền kiểm soát hơn là phó mặc cho các tiêu chuẩn hoang đường thay đổi ngoài ý muốn và mong muốn của nhà phát triển.

Đôi khi bạn có thể đọc một cái gì đó như “ cơ hội cho có sẵn ngay cả trong IE ”, nhưng bạn có thể đọc thường xuyên hơn về mô tả phong cách nào được nhận biết bởi trình duyệt này hoặc trình duyệt đó. Ít thường xuyên hơn, bạn có thể tìm hiểu về sự khác biệt của JavaScript trong các trình duyệt nhất định.

Đánh giá cao kinh nghiệm tích lũy, ngưỡng mộ khả năng của "Chrome" và "Opera", chỉ trích sự chậm chạp và ì ạch của trình duyệt từ nhà sản xuất (không thể nào quên, thân yêu với trái tim của mỗi lập trình viên IE của Microsoft: "Tốt cũ trình duyệt web IE chỉ có kẻ lười biếng mới không mắng mỏ. Hoặc một người chỉ biết chơi Klondike trên máy tính ”,- trích dẫn từ một tác giả Internet không rõ danh tính), bạn nên tuân theo ý nghĩa vàng: sử dụng thứ gì đó hoạt động ở mọi nơi và luôn luôn.

Mọi người cần tiền để làm việc, khi họ cần hồi hộp, họ thường đến văn phòng đăng ký hoặc nhà hát, nhưng không đến Internet.

Thi đua và kiểm soát

Trước đó, khi công việc lập trình đang phát triển, theo thói quen, người lớn tuổi phải lắng nghe và viết đúng. Ngày nay có quá nhiều người cao niên, mọi thứ thay đổi quá nhanh, và nếu bạn lắng nghe mọi người, thì sẽ không đủ thời gian cho công việc rất đơn giản, cho một trang web ít chức năng.

Trước hết, lập trình là kiểm soát và trong trường hợp tiêu chuẩn đặt ra các quy tắc một cách thiên lệch hoặc bạn có thể mong đợi một sự thay đổi mạnh mẽ trong quy tắc, việc loại bỏ nó và xuất hiện một quy tắc mới, thì quyết định tốt nhất luôn là không thực hiện bất kỳ quyết định, nhưng để triển khai chức năng cần thiết của trang web với mã tối thiểu có thể, nhưng thực sự hoạt động ...

Hiệu ứng di chuột mang lại cho bất kỳ trang web nào một giao diện năng động và sống động. Thường được sử dụng cho họ Mã JavaScript, nhưng với sự ra đời của CSS3, bạn chỉ có thể sử dụng các công cụ tạo kiểu.

Các hiệu ứng được hiển thị trong tài liệu này hoạt động trong các trình duyệt hiện đại. Hỗ trợ IE phụ thuộc vào phiên bản và cần được kiểm tra kỹ lưỡng trước khi sử dụng nó trong một dự án thực tế.

Giật lên

Hiệu ứng này hoạt động tuyệt vời khi bạn có nhiều phần tử được căn chỉnh theo chiều ngang. Kéo con trỏ chuột dọc theo thước như vậy sẽ tạo ra một làn sóng.

Nó rất dễ dàng để làm. Đối với mỗi phần tử, một trường được xác định và khi bạn di con trỏ chuột, kích thước của trường sẽ giảm. Biên độ ban đầu là 15px và giảm xuống còn 2px, điều này làm cho bức ảnh bị "nảy lên". Hiệu ứng này cũng có thể được sử dụng cho văn bản trong danh sách.

Thuộc tính chuyển đổi được sử dụng như một tiện ích bổ sung ở đây vì hiệu ứng trông tuyệt vời nếu không có nó. Nó mang lại một hiệu ứng mượt mà.

CSS

Ex1 img (border: 5px solid #ccc; float: left; margin: 15px; -webkit-transfer: margin 0,5 giây easy-out; -moz-transfer: margin 0,5 giây easy-out; -o-transfer: margin 0,5 giây easy-out;) .ex1 img: hover (margin-top: 2px;)

Khi di chuột bằng con trỏ chuột, mỗi hình ảnh từ từ tăng kích thước và khi mất tiêu điểm, hình ảnh sẽ trở lại kích thước ban đầu.

Đối với hiệu ứng này, một tập hợp các hình ảnh có kích thước 400x133 px được sử dụng. Sau đó, chúng được giảm kích thước trong mã CSS xuống còn 300x100 px và được mở rộng khi di chuột. Căn giữa theo chiều ngang được sử dụng và hình ảnh có kích thước mới có thể làm hỏng mọi thứ, vì vậy giá trị lề âm bằng một nửa chiều rộng sẽ được áp dụng.

CSS

#container (width: 300px; margin: 0 auto;) # ex2 img (height: 100px; width: 300px; margin: 15px 0; -webkit-chuyển đổi: tất cả 1 giây dễ dàng; -moz-chuyển đổi: tất cả 1 giây dễ dàng; -o -transition: tất cả dễ dàng trong 1 giây;) # ex2 img: hover (height: 133px; width: 400px; margin-left: -50px;)

Hiệu ứng này rất giống với sử dụng JavaScript khi bạn di chuột qua một đối tượng, một đối tượng khác sẽ xuất hiện. Để có được nó, hình ảnh và văn bản được đặt trong một vùng chứa div, sau đó mọi thứ được chuyển sang trái để cả hai phần tử đều ở cùng một mức. Sau đó, chúng tôi áp dụng các thuộc tính màu sắc: trong suốt và line-height: 0px vì phần tử div... Điều này đặt văn bản lên trên div và ẩn nó.

Để hiển thị văn bản khi di chuột, chúng tôi chỉ cần thay đổi màu sắc và chiều cao của dòng. Điều này tạo ra hiệu ứng của một màn hình hiển thị theo tỷ lệ của văn bản.

CSS

# ex3 (width: 730px; height: 133px; line-height: 0px; color: transparent; font-size: 50px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; text-biến: chữ hoa; -webkit-chuyển đổi: dễ dàng 0,5 giây; -moz-chuyển đổi: tất cả 0,5 giây dễ dàng; -o-chuyển đổi: tất cả 0,5 giây dễ dàng;) # ex3: hover (line-height: 133px; color: # 575858;) # ex3 img (float: left; margin: 0 15px;)

Đây là một trong những hiệu ứng đơn giản nhưng rất thú vị cho bộ sưu tập hình thu nhỏ. Nó dựa trên việc tạo ra một mảng hình ảnh và xoay hình ảnh mà phía trên đặt con trỏ chuột.

Đối với hiệu ứng này, nhiều cái mới được sử dụng, cụ thể cho trình duyệt cụ thể Thuộc tính CSS vì vậy sử dụng trong các trình duyệt cũ hơn sẽ không thành công. Bộ sưu tập sử dụng bóng đổ, chuyển tiếp và chuyển đổi.

Nếu có mong muốn đa dạng hóa hơn nữa hiệu ứng, thì bạn có thể sử dụng bộ chọn giả để xoay hình ảnh ở các góc khác nhau và theo các hướng khác nhau.

CSS

# ex4 (width: 800px; margin: 0 auto;) # ex4 img (margin: 20px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba (0,0,0.0.2); - moz-box-shadow: 4px 4px 4px rgba (0,0.0,0.2); box-shadow: 4px 4px 4px rgba (0,0.0,0.2); -webkit-chuyển đổi: tất cả 0,5 giây dễ dàng thực hiện; -moz-chuyển đổi: tất cả dễ dàng 0,5 giây; -o-chuyển đổi: tất cả 0,5 giây dễ dàng;) # ex4 img: hover (-webkit-biến đổi: xoay (-7deg); -moz-biến đổi: xoay (-7deg); - o-biến đổi: xoay (-7deg);)

Đây là một hiệu ứng tuyệt vời và phức tạp. Ban đầu, các hình ảnh có một chút trong suốt, sau đó khi bạn di chuột qua chúng, độ trong suốt bị loại bỏ hoàn toàn và có ánh sáng xung quanh và phản chiếu (chỉ dành cho trình duyệt Webkit).

CSS

# ex5 (width: 700px; margin: 0 auto; min-height: 300px;) # ex5 img (margin: 25px; opacity: 0.8; border: 10px solid #eee; / * Transform * / -webkit-transfer: all 0.5 s dễ dàng; -moz-chuyển đổi: tất cả dễ dàng 0,5 giây; -o-chuyển tiếp: tất cả 0,5 giây dễ dàng; / * Phản chiếu * / -webkit-hộp-phản chiếu: dưới 0px -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, from (trong suốt), color-stop (.7, trong suốt), to (rgba (0,0,0,0.1))));) # ex5 img: hover (opacity: 1; / * Reflection * / -webkit-box -reflect: dưới 0px -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, từ (trong suốt), dừng màu (.7, trong suốt), đến (rgba (0,0,0,0.4))); / * Phát sáng * / -webkit-box-shadow: 0px 0px 20px rgba (255,255,255,0,8); -moz-box-shadow: 0px 0px 20px rgba (255,255,255,0,8); box-shadow: 0px 0px 20px rgba (255,255,255,0,8) ;)

Phần kết luận

Năm hiệu ứng được hiển thị chỉ là một ví dụ nhỏ những gì bạn có thể làm với CSS. Hãy thử nghiệm. Bằng cách kết hợp các yếu tố đơn giản với nhau, bạn có thể nhận được một kết quả ấn tượng.

Từ tác giả: một vài hướng dẫn về cách tạo hiệu ứng di chuột qua CSS thuần túy gắn với hướng của con trỏ. Các bài học dành cho những người có ít nhất kiến ​​thức cơ bản về HTML và ở trình độ nâng cao biết CSS / SASS.

Tuyên bố từ chối trách nhiệm

Các hiệu ứng không hoạt động trong các trình duyệt cũ hơn, chúng yêu cầu trình duyệt có khả năng hiển thị các chuyển đổi 3D. Tôi đã thử nghiệm các hiệu ứng trong phiên bản mới nhất trình duyệt Chrome, Firefox và Safari.

Tôi cũng sử dụng thư viện AutoPrefixer tuyệt vời để tự động thay thế tiền tố của nhà cung cấp. Đi tới cài đặt CodePen của bạn tại Tab CSS và chọn AutoPrefixer.

Hiệu ứng di chuột thị sai

Giới thiệu

Nhà thiết kế của tôi và tôi tình cờ gặp trang chủĐịa điểm Lễ hội Kikk trở lại năm 2015, các thẻ có hiệu ứng thị sai khi di chuột đã được triển khai trên đó. Chúng tôi thích nó và muốn tạo lại hiệu ứng này trong dự án của mình. Tuy nhiên, do bản chất của mã, chúng tôi không thể sử dụng JS. Tôi bắt đầu tìm kiếm các giải pháp CSS thuần túy và tìm thấy một điều thú vị.

Dấu ngã toàn năng

Một trong những bộ chọn CSS yêu thích của tôi là dấu ngã (~), chọn phần tử gần nhất phù hợp với bộ chọn nhưng đến sau phần tử đầu tiên. Ví dụ, ul ~ p sẽ chọn p phần tử trong đoạn mã dưới đây:

Tôi nghĩ rằng điều này có thể được sử dụng để tạo hiệu ứng di chuột định hướng cho khá nhiều thứ!

Kết cấu

Cấu trúc liên kết khá đơn giản - một vùng chứa với một tập hợp các thẻ và một hộp chứa nội dung của thẻ. Tất cả các thuộc tính href phải có cùng một URL.

Vì chúng tôi không có JS sẽ cảnh báo chúng tôi về hướng di chuyển của chuột và vị trí của con trỏ, chúng tôi sẽ sử dụng các liên kết để chia thẻ thành các vùng phát hiện. Ví dụ: nếu con trỏ chạm vào một liên kết Số 1 từ trên xuống, sau đó chuột vào vùng phát hiện số 1 trước khi vào số 3 và số 4.

Ví dụ: nếu chúng tôi đi vào vùng phát hiện số 1 (trên cùng bên trái), điểm gốc biến đổi phải là góc phải ở phía dưới, I E. góc đối diện. Điểm mấu chốt là góc bị ảnh hưởng sẽ di chuyển ra xa chúng ta và phần còn lại của các góc về phía chúng ta.

Kết thúc chạm

Để hoàn thành hiệu ứng thị sai của chúng tôi, hãy thêm đường viền vào thẻ, đường viền này cũng sẽ uốn cong khi bạn di chuột qua liên kết. Kỹ thuật này có thể được áp dụng cho các phần tử khác trong thẻ.

// border styles.card (position: relative; .border (biến đổi-origin: center center; position: tuyệt đối; top: 12px; left: 12px; width: calc (100% - 24px); height: calc (100% - 24px); border: 2px solid white;)) // parallax effect.container (a (&: hover, &: focus (~ .card (.border (converter: translateZ (24px);))) // đẩy đường viền quay lại nhấp chuột &: hoạt động (~ .card (.border (biến đổi: không có;)))))

Tất cả những gì còn lại là (1) thêm hiệu ứng chuyển tiếp vào thẻ để làm mịn các góc và (2) xóa các kiểu liên kết để chúng không hiển thị. Tôi muốn đặt opacity thành 0 để tránh nhầm lẫn. Để tránh chồng chéo do xoay thẻ, tôi cũng di chuyển liên kết di chuột về phía trước.

Kết quả

Dưới đây là phiên bản hoàn chỉnh của hiệu ứng thị sai khi di chuột. CodePen... Chuyển đổi hộp kiểm để xem vị trí của các liên kết. Để cải thiện hiệu ứng thị sai, tôi quyết định thêm một số liên kết khác.

Hiệu ứng di chuột trên ví dụ về một khối lập phương

Giới thiệu

Đĩa đơn Bơi dành cho Người lớn 2016- một trang web khác có hiệu ứng di chuột ấn tượng, có tính đến hướng của con trỏ. Bằng cách nhấp vào biểu tượng lịch ở bên trái góc trên lịch 3D sẽ mở ra, trong đó mỗi ngày được trình bày dưới dạng một hình khối xoay tùy thuộc vào hướng của con trỏ. Ý tưởng tuyệt vời!

Tôi ngay lập tức nhận ra rằng một hiệu ứng tương tự có thể được thực hiện với dấu ngã. Tôi đã có một hình khối lập phương mà tôi có thể dễ dàng thay đổi để phù hợp với các liên kết và hiệu ứng di chuột thị sai.

Nền tảng

Bây giờ bạn có thể bắt đầu tạo cơ sở của khối lập phương được tham chiếu. Bạn cần tạo một thùng chứa bên ngoài, bốn hình tam giác sẽ vừa với một hình vuông và một thùng chứa bên trong có sáu phần tử - bốn trống và hai có nội dung. Tôi thích thứ tự này: trên, dưới, trái, phải, trước, sau.

Để tạo liên kết tam giác, bạn có thể sử dụng Clippy... Để tương thích với Firefox, bạn cũng cần có đường dẫn clip SVG. Các liên kết phải có giá trị translateZ dương (được đưa ra phía trước), nếu không chúng sẽ ẩn sau khối lập phương.

Chúng tôi sử dụng một biến có giá trị 12px để xác định chiều rộng, chiều cao và các phép biến đổi cho khối lập phương. Để phân biệt các mặt của khối lập phương, chúng tôi sử dụng các sắc thái khác nhau của cùng một màu để mô phỏng ánh sáng. Mặt sau hoàn toàn màu trắng.

Chúng tôi xoay khối lập phương một chút để bạn có thể thấy rằng tất cả các mặt được đặt đúng vị trí. Nếu bạn nhìn vào phép biến đổi, bạn có thể thấy rằng tất cả các mặt của khối lập phương đều có giá trị translateZ âm. Có nghĩa là, tất cả các mặt ngoại trừ mặt trước đều ở phía sau.

Bản chất của các phép biến đổi 3D là nếu bạn không di chuyển toàn bộ hình khối về phía trước, thì một phần của nó có thể bị cắt bỏ. lai lịch... Bạn có thể di chuyển khối lập phương về phía trước để không gặp vấn đề này. Vì tôi đã có một khối lập phương nên tôi hầu như không chạm vào nó. Viết nhận xét nếu bạn gặp bất kỳ khó khăn nào với việc tạo một khối lập phương.

Hiệu ứng di chuột

Tiếp theo, bạn cần thêm một vòng quay di chuột. Hiệu ứng có thể được tạo kiểu theo cách bạn muốn, nhưng phương pháp thực tế nhất mà tôi tìm thấy là dựa trên chuột. Nếu chuột đi vào khối lập phương từ bên trái, khối lập phương sẽ xoay từ trái sang phải. Tất cả các lượt phải là 180deg / 0,5turn hoặc tương đương âm. Chúng tôi cũng sẽ thêm một quá trình chuyển đổi để làm cho khối lập phương xoay một cách chính xác.

Đánh bóng

Có hai điều cần đánh bóng:

Hình tam giác dưới cùng lật ngược văn bản phía sau.

Di chuột quá nhạy: sự chuyển đổi giữa các hình tam giác gây ra những lượt rẽ không cần thiết.

Với văn bản, cách dễ nhất là xoay mặt sau sang phải mà không chuyển tiếp mượt mà sang mặt chính. Vì lý do nào đó, việc thay đổi hình tam giác dưới cũng ảnh hưởng đến hình trên. Do đó, bạn cần thêm một nút vặn bổ sung cho cả hai hiệu ứng khi di chuột.

Khó khăn hơn để khắc phục độ nhạy của các hiệu ứng khi di chuột. Giải pháp là làm cho liên kết hiện tại chiếm hết không gian của ba liên kết còn lại (toàn bộ chiều rộng / chiều cao, xóa clip-path, di chuyển về phía trước), nhưng sau đó hiệu ứng góc cạnh thú vị biến mất (khi bạn nhanh chóng kéo chuột dọc theo một đường cong trên khối lập phương). Cuối cùng, tôi đã giải quyết được vấn đề - tôi đặt thời gian trễ khi chuyển đổi để bản sửa lỗi sẽ không hoạt động nếu con trỏ trên khối không kéo dài hơn một giây. Trì hoãn không loại bỏ tất cả các vấn đề, nhưng làm giảm bớt phần lớn.

Kết quả

Phần kết luận

Có rất nhiều hiệu ứng di chuột thú vị mà bạn có thể tạo bằng dấu ngã, chuyển đổi và chuyển tiếp mượt mà. Nhà thiết kế của tôi đã nảy ra ý tưởng tạo ra một bể cá trong đó cá sẽ bơi theo hướng ngược lại với con trỏ. Bạn có thể tạo hiệu ứng gợn sóng của nước, bạn có thể xoay hình ảnh với sự thay đổi và bạn cũng có thể tạo hoạt ảnh với chuyển động mờ. Viết bình luận nếu bạn đã sử dụng kỹ thuật này!

Trước hết, đối với những người chưa hiểu rõ về chủ đề này hoặc chưa hiểu về chủ đề này, tôi sẽ giải thích ngắn gọn nó là gì. Đây là các loại hiệu ứng khác nhau (chú thích bật lên, chú giải công cụ, chuyển tiếp mượt mà, chuyển đổi, xoay, thu phóng, bù đắp, v.v.) được áp dụng cho các phần tử của trang web khi bạn di chuột qua chúng bằng con trỏ chuột. Những hiệu ứng này có thể được thực hiện bằng cách sử dụng các plugin jQuery khác nhau hoặc thuần túy.
Hôm nay tôi đã chuẩn bị một số lượng lớn các hiệu ứng di chuột ban đầu cho các hình ảnh được tạo bằng CSS3 mà không cần kết nối các thư viện javascript. Tôi sẽ không nói về những ưu điểm và nhược điểm của việc triển khai hiệu ứng di chuột trong CSS3 thuần túy, đây là một chủ đề khác, chỉ cần xem các ví dụ và nếu cần, hãy sử dụng cái bạn thích trên trang web của bạn. Tất cả các hiệu ứng được trình bày trong phần tổng quan đều được cung cấp kèm theo một ví dụ demo và tài liệu chi tiết kèm theo các nguồn. Các sách hướng dẫn hầu hết đều ở dạng tư sản, nhưng mọi thứ đều ít nhiều mang tính trực quan.

Chỉ muốn thu hút sự chú ý của bạn đến thực tế là tất cả các ví dụ này sẽ chỉ hoạt động chính xác trong các trình duyệt hiện đại hỗ trợ thuộc tính CSS3.

Để không phá vỡ bức tranh tổng thể, anh ấy không làm sai lệch tên của các hiệu ứng bằng bản dịch máy (trừ một số), anh ấy đã để nguyên bản gốc của các tựa game như cách gọi của nhà phát triển.

Một hiệu ứng rất thú vị khi di chuột qua các hình ảnh thu nhỏ, sử dụng các đường mảnh trong thiết kế và kiểu chữ. Một số loại hiệu ứng khác nhau để xuất hiện chú thích cho hình ảnh, chuyển đổi 3D mềm mại và không xâm phạm, và chuyển tiếp mượt mà của các yếu tố giả. Chỉ hoạt động trong các trình duyệt hiện đại.

iHover là một bộ sưu tập ấn tượng của các hiệu ứng di chuột thuần túy CSS3, với hỗ trợ Bootstrap 3. Được xây dựng với Scss CSS (tệp), có thể dễ dàng sửa đổi với các biến. Mã là mô-đun, không cần phải bao gồm toàn bộ tệp. Hơn 30 hiệu ứng khác nhau trong một gói. Mọi thứ đều được ghi lại khá tốt và các hiệu ứng rất dễ sử dụng. Tất cả những gì bạn cần làm là đánh dấu HTML một cách chính xác và liên kết tệp CSS để hoạt động.

Tạo một số hiệu ứng di chuột đơn giản nhưng phong cách cho chú thích hình ảnh. Ý tưởng là làm cho tiêu đề, tên tác giả và nút liên kết xuất hiện đáng kể khi di chuột qua các hình thu nhỏ. Đối với một số hiệu ứng, các chuyển đổi 3D trực quan được sử dụng.

Một hiệu ứng chuyển tiếp rất đơn giản, không có bất kỳ chuông và còi đặc biệt nào, một hình ảnh hoàn toàn tròn trong khung, biến đổi bằng cách thay đổi tiêu điểm khi di chuột và thế là xong.

Hiệu ứng di chuột cho hình thu nhỏ CSS3

Nhà phát triển định vị tác phẩm của mình như một ví dụ về thư viện hình ảnh với các hiệu ứng chuyển tiếp khi các chú thích (caption) xuất hiện cho hình thu nhỏ. Hỗ trợ mạnh mẽ cho các trình duyệt hiện đại được tuyên bố, bao gồm IE 9+. Tất nhiên, rất khó để gọi nó là một phòng trưng bày chính thức, nhưng hiệu ứng của sự xuất hiện của chữ ký khá thú vị.

Một bộ quy tắc CSS khác để tạo hiệu ứng biến đổi ấn tượng khi di chuột qua các hình thu nhỏ hoàn toàn tròn. Gói này chứa 7 loại chuyển đổi CSS3, tài liệu hướng dẫn rất chi tiết về cách thiết lập và sử dụng. Các hiệu ứng được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Xoay hình thu nhỏ khi di chuột

Hiệu ứng đơn giản của việc xoay các hình thu nhỏ tròn khi bạn di chuột qua chúng bằng con trỏ chuột giống như bạn có thể thấy trên blog của tôi, trong thông báo về các bài đăng trên trang chính. Được triển khai trong một vài dòng mã css.

Nếu dịch sát nghĩa là: "Hiệu ứng tình dục khi bạn di chuột qua." Tất nhiên, bạn sẽ khó nhận thấy điều gì đó quá gợi cảm trong hiệu ứng này, trừ khi bạn có trí tưởng tượng bạo lực, nhưng hiệu ứng này thú vị theo cách riêng của nó và rất đáng để chú ý.

Năm hiệu ứng di chuột khác nhau cho hình ảnh. Chú thích bật lên trong ba biến thể, rèm cửa ở dạng thay đổi mức độ trong suốt và xoay theo chuyển động ngang.

4 Loại hiệu ứng hoạt hình cho chú thích hình ảnh, được triển khai độc quyền bằng CSS3. Các vị trí mờ dần và hiệu ứng chuyển tiếp khác nhau, một hiệu suất khá tiêu chuẩn. Để hiểu cách hoạt động của hoạt ảnh, hãy xem mã nguồn của trang demo, tôi không tìm thấy bất kỳ tài liệu riêng biệt nào.

Hình thu nhỏ nằm trong thư viện với nhiều lần xuất hiện phụ đề khác nhau, xoay, mờ dần, bật lên và hơn thế nữa. Tài liệu về cách sử dụng và cấu hình khá khan hiếm, nhưng bạn có thể tìm ra nếu bạn thực sự muốn.

Hiệu ứng này không đại diện cho bất cứ điều gì đặc biệt, một sự thay đổi tầm thường về độ sáng của hình ảnh khi di chuột, ngoại trừ các yếu tố hoạt ảnh được thêm vào. Bạn sẽ phải tự mình tìm ra các chi tiết của việc triển khai bằng cách mở rộng mã nguồn của bản demo.

Một bộ 10 hiệu ứng di chuột khác cho hình ảnh, nhiều sửa đổi khác nhau đối với hình thu nhỏ khi di chuột, thu phóng, xoay, xoay, làm mờ, v.v.

Các hiệu ứng khác nhau để làm sinh động khung xung quanh hình ảnh, trông khá hấp dẫn, có hướng dẫn chi tiết về cách thiết lập và sử dụng.

Hiệu ứng di chuột CSS3 gốc được áp dụng để hiển thị hiệu quả chú thích hình thu nhỏ khi di chuột. Bộ quy tắc CSS bao gồm 10 hiệu ứng khác nhau mà bạn có thể sử dụng riêng cho các hình ảnh khác nhau. Các hiệu ứng thực sự ấn tượng, đặc biệt là khi bạn nhận ra rằng tất cả đều được thực hiện bằng CSS3. Hướng dẫn chi tiết sẽ giúp bạn tìm ra những gì.

Ý tưởng là tạo một SVG làm hình nền cho một số loại chữ và biến thành hình dạng khác khi di chuột. Do đó, bạn có thể thực hiện nhiều tùy chọn khác nhau, trong ví dụ, ba loại hiệu ứng chuyển tiếp được hiển thị. Điều thú vị khi sử dụng SVG là chúng ta có thể thay đổi kích thước biểu mẫu để vừa với vùng chứa mẹ.

Hình ảnh trượt

Bản chất của hiệu ứng này là hình ảnh di chuyển lên xuống để tạo ra một chữ ký. Nếu bạn làm việc với các tham số kiểu, tôi nghĩ bạn có thể đạt được các hiệu ứng khá đẹp mắt, nhưng theo mặc định, mọi thứ trông rất đơn giản.

Với hiệu ứng này, mọi thứ đều đơn giản, chú thích cho ảnh trượt ra trên cùng bên phải hoặc từ trái xuống dưới cùng, dưới dạng dải băng với nền tối mờ, mọi thứ rất đơn giản để tạo lại bằng cách sử dụng thuộc tính css.

Một giải pháp thú vị, các tiểu cảnh được trình bày dưới dạng tối, khi bạn di chuột vào đó, các hình ảnh hiện ra và chữ ký hiện lên trên nền sáng.

Chú thích hình ảnh xuất hiện từ góc và mở rộng theo đường chéo trên toàn bộ khu vực của hình ảnh.

Một số giải pháp thú vị hơn để triển khai chú thích bật lên cho hình thu nhỏ của hình ảnh. Trong trình chỉnh sửa trực tuyến, bạn có thể thử nghiệm với các tham số và đạt được kết quả ấn tượng hơn.

Tập hợp các hiệu ứng đẹp mắt khi di chuột vào ảnh thu nhỏ, nhiều kiểu xuất hiện và thiết kế chú thích cho ảnh. Các đường mảnh đối lập với nền hơi tối tạo ra các khối thông tin dễ đọc.

Hình dạng kỳ lạ và hiệu ứng thu phóng kết hợp với hiệu ứng hoạt hình của chú thích cho hình ảnh thu nhỏ.

Hiệu ứng tuyệt vời của lớp phủ các biểu tượng trên hình thu nhỏ trong các biến thể giao diện khác nhau. Ví dụ sử dụng biểu tượng (+) được phác thảo trong một vòng tròn bằng cách sử dụng bán kính đường viền: trong CSS, bạn cũng có thể sử dụng các biểu tượng phông chữ để làm cho bảng bật lên nhiều thông tin hơn.

Ví dụ về cách tạo hiệu ứng trang trình bày trực quan để hiển thị chú thích thể tích cho hình ảnh chỉ bằng cách sử dụng CSS3 và HTML5.

6 Chú thích hình ảnh

6 Tùy chọn để xuất hiện phụ đề bật lên cho hình ảnh khi di chuột bằng CSS3. Bài học chi tiết về cách thực hiện và cấu hình, có nguồn để tải về.

Và cuối cùng, cuối cùng, có thể nói, tôi không thể không đề cập đến cách đơn giản nhất để tạo phụ đề bật lên cho hình thu nhỏ bằng cách sử dụng CSS3.