HIỆU ỨNG ĐỔI MÀU CHỮ BẰNG CSS3

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.

Ảnh minh họa

Cách thực hiện rất đơn giản , các bạn chỉ cần dán đoạn code sau vào nơi cần hiển thị và save lại là xong

<p class='tieudequanba'><b>iChiaSe.Biz</b><br/>Thiết Kế Web/Blogger Chuyên nghiệp
</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/AVvXsEg_BJlFHr7n0QQVUxPWq-oJQImTTLIJmxDpMRA1g0rQRuzurzAWmfubkpXteYWo5CwHfUR51E3ECdlxQkYyKujPu8SY4RUH3vPRp11HEqJfkXgsjK4F_EKMcgtKKaueUI24PdNkJgHaYY1I/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>

Nguồn : ThaiAiTi.Com