Tạo hiệu ứng ảnh từ chữ – Text Portrait Effect bằng CSS

38 Thích Comment
text_portrait_effect

Để 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:
  1. Do chỉ viết bằng HTML + CSS, do đó các bạn chỉ cần tạo file index.htmlmain.css, một file ảnh để cùng một thư mục, sau đó thêm thẻ headbody 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;
    }
  2. 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>
  3. 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)
    
    }
  4. 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 */
      }
  5. 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é.

Bình luận bằng facebook
Có thể bạn thích
Tác giả: Sharescript.net

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *