CSS3 được coi là một cuộc cách mạng thực sự khi nói đến phát triển web. Các thuộc tính mới chứa trong CSS3 cho phép các nhà phát triển nâng cao trực quan các thiết kế của họ theo cách không chỉ ấn tượng theo nghĩa hình ảnh mà còn nhanh chóng và dễ dàng.

Web typography là một trong những điều chính đã thay đổi đáng kể với CSS3. Bạn có thể làm cho thiết kế của mình trông hấp dẫn với kiểu chữ và làm cho mọi thứ hấp dẫn trực quan. Khi nói đến thiết kế web, CSS sẽ giúp bạn có được nhiều hiệu ứng phông chữ khác nhau, bao gồm cả việc sử dụng các hiệu ứng như hoạt ảnh và cắt những thứ gia vị lên một chút.

Để giúp minh họa thêm điều này, chúng tôi đã tập hợp một danh sách các hiệu ứng đẹp mắt và đẹp mắt, tất cả đều có thể thực hiện được thông qua CSS và một số trong số đó cũng có một chút Javascript.

Hiệu ứng văn bản CSS để sử dụng trong các dự án của bạn

Elastic stroke CSS + SVG

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

The first one of these cool CSS text effects comes from Yoksel. She chose an amazing color scheme for this beautiful CSS text animation.

Text animation

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

The second one of these CSS text effects is from Yoann Helin. He created in CSS this effect that you may have seen on a lot of portfolio and presentation websites.

COSMOS

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

While this CSS text effect isn’t the most useful one, it still is impressive.

Here’s what the author used:

  • vw, vh, vmin units for responsiveness
  • flexbox to center everything
  • multiple box-shadows for the stars
  • keyframes animation for the planets
  • transform to rotate the planets

Loading CSS text effect

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

CSS Text filling with water

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

The next one of these CSS text effects is a text filling with water animation, for preloaders and such.

Advertisement

Squiggly Text Experiment

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

Yet another cool CSS text effect. This is a Squiggly text experiment created with SVG Filters by Lucas Bebber.

Animated Headlines

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

A collection of animated headlines, with interchangeable words that replace one another through CSS transitions.

CSS3 text-shadow effects

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

Opening type

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

Foggy text effect

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

Cinematic intro text effect (Webkit only – text mask). This is experimental, but still had to include it among these CSS effects.

SVG text mask

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

Animated signing of signature (SVG paths)

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

Use this pen to animate writing a signature with SVG stroke-dashoffset/stroke-dasharray and CSS transitions.

SVG Glitch

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

Vintage Typography

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

-webkit-background-clip:text CSS effect

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

Use -webkit-background-clip: text and -webkit-fill-text-color : transparent to apply a background to a text on webkit browser.

Set a color fallback for other browser.

3D CSS Typography

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

Renders best in Chrome. This technique does work in Firefox, but text stroke is not supported.

Colorful Glitchy 404

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

Hit The Floor Text Effect

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

Slashed CSS Effect

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

CSS Dashed Shadow

20 ví dụ tuyệt vời về hiệu ứng chữ CSS

Xem thêm bài viết liên quan
Xem thêm Thủ thuật website

Được đề xuất cho bạn

Hướng dẫn thêm Plugins chat message facebook vào website

Bài viết này mình sẽ hướng dẫn các bạn tích hợp thanh chat message facebook vào website củ…