Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Knockout Text Và 20 Ví Dụ Thực Tế Trong Website

Cách Tạo Knockout Text Và 20 Ví Dụ Thực Tế Trong Website


Ngày 7 Tháng 8 Năm 2020

Bài viết hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo chữ trong suốt bằng các thuộc tính phổ biến trong CSS như background-clip, mix-blend-mode... và SVG nhé!

Cách Tạo Knockout Text Bằng Background Clip CSS

Trước khi đi vào cách tạo component thì mình xin giới thiệu sơ qua về thuộc tính background-clip để giúp bạn nằm rõ và hiểu hơn nhé!
background-clip giúp bạn có thể kiểm soát được khoảng cách mở rộng background cho padding hay nội dung của một phần tử. Và nó được chia thành 4 giá trị cơ bản sau:

  • background-clip: border-box: là giá trị mặc định. Nó cho phép bạn mở rộng đến mép ngoài của đường viền.
  • background-clip: padding-box: Nó cho phép bạn mở rộng đến mép trong của đường viền.
  • background-clip:content-box: Nó cho phép bạn mở rộng đến cạnh của content box.
  • background-clip:inherit: Nó cho phép bạn kế thừa các thiết lập thuộc tính background-clip từ thằng cha.

Và để dễ hình dung bạn xem ví dụ khi chúng ta sử dụng các thuộc tính này nhé:

See the Pen background-clip by CSS-Tricks (@css-tricks) on CodePen.

Và để tạo được chữ trong suốt thì mình sẽ giới thiệu đến bạn thêm một giá trị mới là background-clip:text. Nó được hỗ trợ hầu hết trong các trình duyệt có tiền tố Webkit với nhiệm vụ chính là cắt một phần background thành dạng chữ. Đầu tiên chúng ta sẽ đi vào tạo cấu trúc phần tử HTML cho component này nhé!

<div class="container">
<h1>Chữ Trong Suốt Với Hình Nền</h1>
<h2>Niềm Vui Lập Trình</h2>
</div>

Bước tiếp theo, chúng ta sẽ sử dụng một số thuộc tính CSS sau đây để có thể tạo chữ trong suốt với ảnh nền nhé:

 background: ("Đường Dẫn Hình Ảnh") no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;

Và đoạn code CSS hoàn chỉnh là :

 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
h2{
  font-family: 'Roboto', sans-serif;
  font-size: 80px;
  font-weight: 800;
  line-height: 60px;
  background-image: url(https://images.pexels.com/photos/1269968/pexels-photo-1269968.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
  }
h1{
  font-size: 32px;
  color: #444;
}

Và kết quả cuối cùng bạn xem ở bên dưới nhé:

See the Pen Chữ Trong Suốt Với Hình Nền by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Tạo Knockout Text Bằng mix-blend-mode:screen

Thuộc tính này cho phép bạn có thể kết hợp, pha trộn các phần tử này lên trên các phần tử khác giống như là cách tạo kiểu cho layer ở trong Photoshop. Mình sẽ ra một bài nói kỹ về vấn đề này hơn. Còn bây giờ chúng ta sẽ đi vào cách tạo chữ trong suốt bằng thuộc tính này nhé:

HTML:

 <div class="container">
  <div class="noi_dung">HELLO WORLD</div>
</div>

Tiếp theo chúng ta thiết lập một số thuộc tính CSS cho component này thông qua đoạn mã dưới đây nhé:

CSS:

.container {
  background-image: url(https://res.cloudinary.com/dn4nxz7f0/image/upload/v1596771623/chu_trong_suot/pexels-suzy-hazelwood-1629236_1_xmbktt.jpg);
  background-size: cover;
  position: relative;
  height: 500px;
}
.noi_dung {
  background-color: white;
  color: black;
  font-size: 10vw;
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

Và kết quả cuối cùng bạn xem ở bên dưới nhé:

See the Pen Tao chu trong suot 2 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Tạo Knockout Text Bằng SVG

Trong phần này chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo chữ trong suốt với SVG thông qua đoạn code dưới đây nhé:

HTML

<div class="container">
<svg viewBox="0 0 200 25">
    <rect fill="#000" x="0" y="0" width="200" height="100" fill-opacity=".9" mask="url(#noi_dung)" />
    <mask id="noi_dung">
      <rect fill="#fff" x="0" y="0" width="200" height="100"></rect>
      <text y="20" fill="#000" text-anchor="middle" x="100" font-size="25">
        Hello World
      </text>
    </mask>
  </svg>
</div>

CSS

 .container{
        background: url(https://res.cloudinary.com/dn4nxz7f0/image/upload/v1596771623/chu_trong_suot/pexels-suzy-hazelwood-1629236_1_xmbktt.jpg);
        background-size: cover;
        padding: 20% 0;
}
svg {
     display: block;
}

Và kết quả cuối cùng bạn xem ở dưới đây nhé:

See the Pen tao chu trong suot voi svg by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Tạo Knockout Text Bằng Background Gradient

Nãy giờ chúng ta đã sử dụng hình ảnh để thiết lập background cho chữ, phần này chúng ta sẽ sử dụng linear-gradient để làm nền cho nội dung chữ nhé!

HTML

<p id="noi_dung">Hello World</p>

CSS

#noi_dung {
        background: linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670);
        background-attachment: fixed;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        font-size: 150px;
        font-weight: bold;
        text-align: center;
}

Và kết quả cuối cùng bạn xem ở dưới đây nhé:

See the Pen chu voi linear gradient by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Ví Dụ Khác Về Knockout Text

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Cách Tạo Background Clip Text CSS

Background Clip Text CSS

Kết quả bạn xem bên dưới nhé!

See the Pen -webkit-background-clip:text CSS effect by Jintos (@Jintos) on CodePen.

Nguồn

Thiết Kế SVG Text Clip Gradient

SVG Text Clip Gradient

Kết quả bạn xem bên dưới nhé!

See the Pen SVG Text Clip with Gradient & GIF by CY Park (@cypark) on CodePen.

Nguồn

Thiết Kế Knockout Text Animated Blobby CSS3

Knockout Text Animated Blobby CSS3

Kết quả bạn xem bên dưới nhé!

See the Pen An Animated Blobby Gooey Button by Leena Lavanya (@leenalavanya) on CodePen.

Nguồn

Cách Tạo Knockout Text HTML5 CSS3

Knockout Text HTML5 CSS3

Kết quả bạn xem bên dưới nhé!

See the Pen Knockout text by Ana Tudor (@thebabydino) on CodePen.

Nguồn

Thiết Kế CSS3 SVG Knock Out Text

CSS3 SVG Knock Out Text

Kết quả bạn xem bên dưới nhé!

See the Pen SVG Knock Out Text by Geoff Graham (@geoffgraham) on CodePen.

Nguồn

Thiết Kế CSS Transparent Text Through Background

CSS Transparent Text Through Background

Kết quả bạn xem bên dưới nhé!

See the Pen CSS Knockout Text by Preethi Sam (@rpsthecoder) on CodePen.

Nguồn

Thiết Kế Text Over Image CSS Responsive

Text Over Image CSS Responsive

Kết quả bạn xem bên dưới nhé!

See the Pen multiline, responsive knockout svg text by Nicole Strebel (@enolic) on CodePen.

Nguồn

Cách Tạo Transparent Knockout Fade-in Text

Transparent Knockout Fade-in Text

Kết quả bạn xem bên dưới nhé!

See the Pen Transparent Knockout Fade-in Text (Pure CSS) by George W. Park (@GeorgePark) on CodePen.

Nguồn

Thiết Kế CSS Responsive Video Knockout Text

Responsive Video Knockout Text

Kết quả bạn xem bên dưới nhé!

See the Pen Responsive Video Knockout Text (Pure CSS) by George W. Park (@GeorgePark) on CodePen.

Nguồn

Cách Tạo Text-Fill-Color Transparent

Text-Fill-Color Transparent

Kết quả bạn xem bên dưới nhé!

See the Pen Animated text fill by Daniel Riemer (@zitrusfrisch) on CodePen.

Nguồn

Thiết Kế Animated Gradient Knockout Text

Animated Gradient Knockout Text

Kết quả bạn xem bên dưới nhé!

See the Pen Animated Gradient Text by Shaw (@shshaw) on CodePen.

Nguồn

Cách Tạo Animation Transparent Text CSS

Animation Transparent Text CSS

Kết quả bạn xem bên dưới nhé!

See the Pen CSS3 font mask animation by Wifeo (@wifeo) on CodePen.

Nguồn

Cách Tạo CSS Background Text

CSS Background Text

Kết quả bạn xem bên dưới nhé!

See the Pen CSS is awesome! by Gayane (@gayane-gasparyan) on CodePen.

Nguồn

Thiết Kế Background-Clip Text

Background-Clip Text

Kết quả bạn xem bên dưới nhé!

See the Pen background-clip — week 12/52 by Mert Cukuren (@knyttneve) on CodePen.

Nguồn

Cách Tạo Text-Mask Animation Background

Text-Mask Animation Background

Kết quả bạn xem bên dưới nhé!

See the Pen Text-mask background moving on MouseMove - v2 by Robert Borghesi (@dghez) on CodePen.

Nguồn

Thiết Kế CSS Background Clip Text

CSS Background Clip Text

Kết quả bạn xem bên dưới nhé!

See the Pen CSS : Background Clip by Amir (@sxrdev) on CodePen.

Nguồn

Thiết Kế CSS Text Mask Animation

CSS Text Mask Animation

Kết quả bạn xem bên dưới nhé!

See the Pen Be happy! by Elena Nazarova (@nazarelen) on CodePen.

Nguồn

Thiết Kế Background Clip Text Animation

Background Clip Text Animation

Kết quả bạn xem bên dưới nhé!

See the Pen Clipping gif to text by Shireen Taj (@TajShireen) on CodePen.

Nguồn

Cách Tạo Text Mask Với Blend Mode CSS3

Text Mask Với Blend Mode CSS3

Kết quả bạn xem bên dưới nhé!

See the Pen Text Mask with Blend Modes by Mandy Michael (@mandymichael) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những cách tạo chữ trong suốt hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!