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ế Blogspot hiện nay.

Vậy ở bài ngày hôm nay, thinhnd.com sẽ chia sẻ lại cho bạn đọc thêm 1 trải nghiệm thú vị mà mình mới thấy trên website thaiaiti.com.Đây là 1 hiệu úng chữ đơn giản nhưng khá độc đáo. 
HƯỚNG DẪN TẠO HIỆU ỨNG CHỮ ĐỔI MÀU ĐỘC ĐÁO
Bước 1: Đăng nhập blogger -> Bố cục -> Thêm tiện ích -> HTML/Javascript 
Bước 2: Chèn đoạn CSS sau vào

<p class='tieudequanba'><b>Thinhnd Blog's</b><br/>Share your passion</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/AVvXsEiRABDU40lWrwOY0lKLW89-de6HEp-SwiVJEUJH44lK1STZ1Fl-NDBuMZZSMjbBEVPVR7oXz7e-QZYeeh9tbsz8K9WFUeyYAOC5YBPtzhkBA_oNcwY0-HnvNHfAt3Q06sd7rAYzanekmLn-/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>

Share Share Share Share Share