Tạo Hiệu ứng Bắt Mắt Cho Text Bằng CSS - Viblo

Chào cả nhà, Thế là sau một tháng chúng ta lại gặp nhau trong bài viết mới của tháng. Trong bài viết lần này, tôi sẽ giới thiệu đến cả nhà cách sử dụng CSS3 một cách thật hữu ích đó là tạo ra một loạt các hiệu ứng đáng kinh ngạc cho các chữ viết. Trên website số lượng chữ viết thể hiện nội dung của website chiếm đa phần bên cạnh việc sử dụng hình ảnh đúng không nào, vậy làm sao để biến các chữ các text đơn điệu thành các chữ các text thật bắt mắt như các biển quảng cáo mà các bạn hay bắt gặp ngoài đường nào. Bên cạnh việc sử dụng Font-family cho nó thfi chúng ta hoàn toàn có thể kết hợp thêm css vào đó để tạo ra các text đẹp lung linh và đẹp đến bất ngờ, nhằm thu hút người xem website của chúng ta đó. Nào chúng ta hãy cùng đến với một hiệu ứng text đầu tiên nhé, ta gọi nó là Retro Text:

Ở code html, ta tạo ra một text nhé:

<h1 class='txtretroshadow'>Retro Text</h1>

Tiếp đến ta thêm CSS cho text này nào:

.txtretroshadow { text-align: center; font-size: 50px; color: #2c2c2c; background-color: #d5d5d5; letter-spacing: .05em; text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2); height: 100px; padding-top: 40px; }

Ta thu được kết quả như sau: Tiếp đến tôi muốn giới thiệu là hiệu ứng Inset Shadow. Ở code html, ta lại tạo ra một text:

<h1 class='txtinsetshadow'>Inset Text</h1>

Và đương nhiên là không thể thiếu CSS được rồi:

.txtinsetshadow { text-align: center; font-size: 50px; height: 100px; padding-top: 40px; color: #202020; background-color: #2d2d2d; letter-spacing: .1em; text-shadow: -1px -1px 1px #111, 2px 2px 1px #363636; }

và kết quả chúng ta thu được sẽ biến đổi thành: Bên cạnh hai hiệu ứng ở trên, chúng ta còn có hiệu ứng Deep shadow nữa đó, nào cùng khám phá với tôi nhé: Vẫn là code html:

<h1 class='txtdeepshadow'>Deep Shadow</h1>

Phù phép chút với CSS3:

.txtdeepshadow { text-align: center; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; font-size: 50px; height: 100px; padding-top: 40px; color: #e0dfdc; background-color: #333; letter-spacing: .1em; text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9); }

Woa, quá đẹp phải không nào, hãy nhìn kết quả bên dưới: Chưa dừng lại ở đó đâu, hãy cùng đến với hiệu ứng Elegant Shadow.

<h1 class='txtelegantshadow'>Elegant Text</h1>

lần này ta thử chuyển đổi hết text thành chữ in hoa để xem kết quả thế nào nhé

text-transform: uppercase;

Ở file CSS ta sẽ viết:

.txtelegantshadow { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; text-transform: uppercase; text-align: center; font-size: 50px; height: 108px; padding-top: 40px; color: #131313; background-color: #e7e5e4; letter-spacing: .15em; text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2; }

Hãy thử đi các bạn và hiệu ứng lần này cũng đáng để các bạn ngạc nhiên đó chứ: Vậy là chỉ với một vài thủ thuật CSS mà ta có thể phù phép biến những text đơn điệu thành những text bắt mắt phải không nào. Cảm ơn cả nhà đã cùng theo dõi bài viết của mình. Hy vọng bài viết sẽ hữu ích với các bạn!