Dùng CSS để tạo hiệu ứng bắt mắt cho text, tại sao không?
Các website thường được trình bày bằng chữ viết và hình ảnh, tuy nhiên nếu bạn không sáng tạo, phá cách cách trình bày website của mình thì rất khó thu hút người truy cập. Bài viết này, Bizfly Cloud sẽ giới thiệu tới bạn cách dùng CSS để biến những text đơn điệu thành các chữ thật bắt mắt, đẹp lung linh.
Các kiểu dùng CSS để tạo hiệu ứng cho text đơn giản
Đầu tiên, bạn hãy nhìn mẫu chữ dưới đây và đoán xem đây là kiểu chữ nào nhé.
Đây là hiệu ứng text Retro Text được tạo ra bằng CSS.
Trong code html, bạn tạo ra một text nhé:
Ví dụ:
<h1 class='txtretroshadow'>Retro Text</h1>
Sau đó, bạn hãy thử thêm CSS cho đoạn text đó theo hướng dẫn này nhé:
.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;
}
Tada, vậy là bạn đã tạo hiệu ứng Retro text thành công rồi đó.
Tiếp theo, một cách dùng CSS để thêm hiệu ứng cho text cũng đơn giản mà hiệu quả không kém. Đó chính là Inset Shadow.
Text ban đầu ở code html như sau:
<h1 class='txtinsetshadow'>Inset Text</h1>
Để tạo hiệu ứng chữ chìm (Inset Shadow) cho text thì bạn thực hiện như hướng dẫn sau:
.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à đây là thành quả mà bạn nhận được.
CSS có thể tạo ra một hiệu ứng khác cũng không kém phần ấn tượng đó là Deep Shadow( Bóng đậm)
Trước hết bạn vẫn cần tạo text bằng code html:
<h1 class='txtdeepshadow'>Deep Shadow</h1>
Sau khi đã có text, thì phần việc còn lại là của CSS:
.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);
}
Sau khi thực hiện các thao tác thì bạn sẽ có text siêu ấn tượng và bắt mắt như trong hình minh họa:
Ngoài ra, CSS còn làm được nhiều hơn vậy, đó là Elegant Shadow (Bóng nghiêng)
Thao tác của hiệu ứng này cũng tương tự nhưng phần trên.
Bước 1: Tạo text ở code htmt:
<h1 class='txtelegantshadow'>Elegant Text</h1>
Bước 2: Thêm CSS vào text
.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;
}
Elastic stroke
Đây là một hiệu ứng chữ bằng CSS rất mới mẻ và thú vị.
Ví dụ:
HTML, BODY {
height: 100%;
}
$colors: #360745, #D61C59, #E7D84B, #EFEAC5, #1B8798;
BODY {
background: hsl(200,70,11);
background-size: .12em 100%;
font: 16em/1 Arial;
}
.text--line {
font-size: .5em;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
$max: 5;
$stroke-step: 7%;
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: $stroke-step $stroke-step * ($max - 1);
stroke-width: 3px;
animation: stroke-offset 9s infinite linear;
@for $item from 1 through $max {
$stroke-color: nth($colors, $item);
&:nth-child(#{$item}) {
stroke: $stroke-color;
stroke-dashoffset: $stroke-step * $item;
}
}
}
@keyframes stroke-offset {
50% {
stroke-dashoffset: $stroke-step * $max;
stroke-dasharray: 0 $stroke-step * $max*2.5;
}
}
Thành phẩm:
Ảnh trong chữ (Background linear-gradient)
Ví dụ dùng CSS để tạo hiệu ứng ảnh trong chữ thì bạn thao tác như sau:
HTML :
<div class="clip-text clip-text_one">ThangTV</div>
CSS :
body {
text-align: center;
background-color: #1d1d22;
}
.text {
font-size: 6em;
font-weight: bold;
line-height: 1;
position: relative;
display: inline-block;
margin: .25em;
padding: .5em .75em;
text-align: center;
color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: url(https://png.pngtree.com/thumb_back/fw800/back_pic/04/52/05/84585f8530e8274.jpg);
}
.clip-text:before {
content: "";
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: inherit;
position: absolute;
}
.clip-text:after {
content: "";
position: absolute;
z-index: -1;
top: .125em;
right: .125em;
bottom: .125em;
left: .125em;
background-color: #fff;
}
.clip-textGif {
background-image: url( https://media.giphy.com/media/JzqRWjBTKZXSE/giphy.gif);
text-transform: uppercase;
font-style: italic
}
Tổng kết
Cách tạo hiệu ứng bắt mắt cho text bằng CSS đều áp dụng được cả ở chữ in hoa và chữ thường.
Hãy thử làm theo hướng dẫn dùng CSS để tạo hiệu ứng cho text và thấy sự khác biệt nhé.
Theo Bizfly Cloud chia sẻ
>> Có thể bạn quan tâm: 6 Tips không thể bỏ qua để viết CSS tốt hơn
