Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Chữ Trong Suốt Cho Trang Web

Cách Tạo Chữ Trong Suốt Cho Trang Web


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

Cách Tạo Chữ Trong Suốt Cho Trang Web

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 Chữ Trong Suốt 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 Chữ Trong Suốt 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 Chữ Trong Suốt Với 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 Chữ Trong Suốt Với Màu Nền 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.

Một Sộ Ví Dụ Khác Về Chữ Trong Suốt

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.

-webkit-background-clip:text CSS effect

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

SVG Text Clip with Gradient & GIF

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

An Animated Blobby Gooey Button

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

Knockout text

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

SVG Knock Out Text

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

CSS Knockout Text

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

multiline, responsive knockout svg text

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

Transparent Knockout Fade-in Text (Pure CSS)

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

Responsive Video Knockout Text (Pure CSS)

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

Knockout text with animated background

See the Pen Knockout text with animated background by Kev Durber (@kdurber) on CodePen.

Animated text fill

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

Animated Gradient Text

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

CSS3 font mask animation

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

CSS is awesome!

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

background-clip

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

Text-mask background moving on MouseMove

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

CSS : Background Clip

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

Be happy!

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

Clipping gif to text

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

Text Mask with Blend Modes

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

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ẻ!