CSS3 tạo hiệu ứng chữ đổi màu độc đáo cho Web, Blogspot

Tweet

Hiện nay, việc ứng dụng CSS3 và HTML5 vào Website khá nhiều. Trước kia để làm 1 hiệu ứng hầu như phải sử dụng tới Javascrip, cho đến nay thì CSS3 đã được thay thế hầu hết với khả năng tương thích và tốc độ load nhanh. HTML5 & CSS3 đang chiếm lĩnh thị trường thiết kế Web, Blogspot hiện nay.
Vậy ở bài ngày hôm nay, Tác giả cũng muốn chia sẻ cho bạn đọc thêm 1 trải nghiệm thú vị với TEXT. Đây là 1 hiệu úng chữ đơn giản nhưng khá độc đáo.





Cách thực hiện khá đơn giản, bạn chỉ cần chèn đoạn code sau vào nơi cần hiển thị là ok:
<p class='tieudequanba'><b>Sản phẩm ThaiAiTi đã thực hiện</b><br/>Những sản phẩm &amp; dự án được ThaiAiTi thực hiện cho khách hàng
</p>
<style>
.tieudequanba {
float: left;
width: 100%;
text-align: center;
font: 18px 'Roboto Condensed',sans-serif;
line-height: 1.4;
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnRDitsbIsyonjZxfZI-DiDRgivMk4mU_ozL21cvCWzIFX9JfQjv5YUd9vOJb-oDa1J4cpDzgy2nxia-lbJ-tRg7q8lHwQerugcuEqijDKnFPFzzI6dSaUWhBgZgZvl4PKNj0WQXXDmWXA/s0/Titler_sanpham.png) no-repeat center 0px;
padding-top: 65px;
padding-bottom: 45px;
}
p.tieudequanba b {
font: 28px 'Roboto Condensed',sans-serif;
text-transform: uppercase;
background: #226BA5 -webkit-gradient(linear, left top, right top, from(#EC3C51), to(#F11150), color-stop(0.5, #F5FF00)) 0 0 no-repeat;
color: rgba(255, 255, 255, 0.1);
font-weight: bold;
position: relative;
-webkit-animation: shine 2s infinite;
-webkit-background-clip: text;
-webkit-background-size: 300px;
}
@-webkit-keyframes shine {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
</style>
Chúc bạn thành công. Nếu bạn chưa làm được hay có thắc mắc vui lòng để lại comment phía dưới