Thứ Hai, 28 tháng 12, 2015

hieu ung 1

Hiệu ứng chữ đáng kinh ngạc bằng CSS

Hiệu ứng chữ đáng kinh ngạc bằng CSS

Hiệu ứng chữ

Để tạo ra một website ấn tượng thì design, hay "bộ mặt" của trang web là cực kỳ quan trọng. Trong design nói chung thì tiêu đề, đầu đề lại là thứ đập vào mắt user đầu tiên, vì vậy gây ấn tượng bằng tiêu đề sẽ đem lại hiệu quả nhiều nhất.

Cách đây từ 5 năm đổ về trước, designer hay cặm cụi với Photoshop để tạo ra các hiệu ứng chữ đẹp, export ra thành file ảnh để nhúng vào web, hay dùng flash để tạo animation. Tuy nhiên với sự phát triển của HTML5 và CSS3 thì quan niệm và cách làm đã thay đổi hoàn toàn. Giờ đây chỉ với CSS (và JS với 1 chút nâng cao) thì đã có thể tạo ra rất nhiều hiệu ứng chữ đáng kinh ngạc.

Bản thân mình hay xem Codepen để học hỏi và lấy cảm hứng, và nhận ra có rất nhiều pen phải nói là quá đỉnh. Hôm nay mình sẽ liệt kê những pen đẹp nhất về hiệu ứng chữ. Bạn có thể click vào link trên đầu đề để xem cụ thể code của pen. Tất cả các pen ở đây đều chỉ dùng CSS và có thể có thêm JS.

Elastic Stroke

Elastic Stroke

Text Animation

text animation

Cosmos

alt text

Loading text

alt text

Squiggly Text

alt text

Elegant Shadow

alt text

Foggy Text

alt text

Signature

alt text

Glitch

alt text

Webkit Background Text

alt text

Glitchy 404

alt text

Dashed Shadow

alt text

Nếu các bạn còn thấy hiệu ứng đẹp nữa bằng CSS/JS thì chia sẻ nhé !

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa


{{like_count}}

kipalog

{{ comment_count }}

Bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
13 người follow

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!

hieu ung 1

0 nhận xét: