Để tiếp tục các bài viết tạo các element chỉ bằng CSS thì trong bài viết này mình xin giới thiệu đến các bạn hiệu ứng ảnh được tạo nên bởi các chữ (hoặc ký tự). Hiệu ứng trông khá là thú vị, các bạn có thể thêm vào trang web của mình để tạo sự thích thú cho người dùng.
Hướng dẫn thực hiện:
- Do chỉ viết bằng HTML + CSS, do đó các bạn chỉ cần tạo file index.html và main.css, một file ảnh để cùng một thư mục, sau đó thêm thẻ head và body vào file index.html (các bạn có thể xem mẹo để thực hiện nhanh bước này trong bài viết trước, xem tại đây):
index.html:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Text Portrait Effect</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> </head> <body> </body> </html>main.css: Các bạn lần lượt import font mà các bạn muốn sử dụng, ở đây mình dùng font Poppins, style cho thẻ body như dưới đây:
@import url('https://fonts.googleapis.com/css?family=Poppins'); body{ margin: 0; padding: 0; font-family: 'Poppins', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; background: #262626; } - Thêm thẻ một p vào trong phần body, nội dung của thẻ p tùy ý, sao độ dài của nội dung phủ kín màn hình hiển thị. Để giảm thiểu sự dài dòng của bài viết, mình chỉ trích một đoạn nội dung như sau:
<body> <p class="noselect">Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis et esse quam reprehenderit tenetur! Minima iste rem ratione necessitatibus sed, asperiores aliquam eum quas dolor vitae libero laboriosam incidunt? Qui. aliqu Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis et esse quam reprehenderit tenetur! Minima iste rem ratione necessitatibus sed, asperiores aliquam eum quas dolor vitae libero laboriosam incidunt? Qui. aliqu Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis et esse quam reprehenderit tenetur! Minima iste rem ratione necessitatibus sed, asperiores aliquam eum ... </p> </body> - Trong phần main.css style cho thẻ p như sau, tại đây các bạn thay đổi tên file ảnh thành ảnh mà mình muốn hiển thị nhé, ví dụ bill_gate_1366x768.jpg:
p{ font-size: 10px; line-height: 10px; background: url(bill_gate_1366x768.jpg); background-attachment: fixed; -webkit-background-clip: text; -webkit-text-fill-color: rgba(255, 255, 255, 0.1, green, blue, alpha) } - Như vậy là các bạn đã hoàn thành xong tác phẩm của mình, nếu muốn tắt việc select text trên trang web thì các bạn có thể thêm class .noselect cho thẻ p:
<p class="noselect">Lorem ipsum dolor...
.noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } - Như vậy là các bạn đã làm xong hiệu ứng ảnh từ chữ.
Các bạn có thể xem video hướng dẫn tại đây:
Xem demo và download tại đây nhé.