Hiệu ứng ánh sáng cho chữ bằng CSS3

Ngày đăng: 16/12/2017 19:09 Chiều

Hiệu ứng ánh sáng cho chữ bằng CSS3 dùng trong website, thay thế hình gif

Xem thêm:

Mẫu website bất động sản

Trước kia, khi thiết kế website nói chung, thiết kế website wordpress nói riêng để làm hiệu ứng cho chữ bạn phải dùng ảnh gif, hay flash.

Công nghệ website, trình duyệt, thiết bị di động phát triển thì flash xem như tuyệt chủng bởi những bất lợi khi website làm hiệu ứng bằng flash.

CSS3 ra đời được thay thế cho flash, thân thiện với trình duyệt & thiết bị di động hơn. Hôm nay, HWP làm một ví dụ CSS3 làm hiệu ứng ánh sáng xẹt ngang chữ, mà trước đó phải làm ảnh gif hoặc file flash.

Hiệu ứng ánh sáng cho chữ bằng CSS3

Như bạn thấy hình trên, thì có một lớp ánh sáng xẹt ngang chữ. Hiệu ứng này nhằm nhấn mạnh một đoạn nội dung nào đó.

Đoạn HTML:

<div class=”box-name-slogan”>
<p class=”name”>CÔNG TY THIẾT KẾ WEBSITE WORDPRESS</p>
<p class=”slogan”>HWP.COM.VN</p>
</div>

Đoạn CSS:

.slogan{
color: rgba(255, 255, 255, 0.1);
-webkit-background-clip: text;
animation-name: shimmer;
animation-duration: 2s;
animation-iteration-count: infinite;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb(255, 204, 41)), color-stop(0.5, rgb(255, 255, 255)), to(rgb(255, 204, 41))) 0px 0px / 125px 100% no-repeat rgb(255, 204, 41); background-repeat: no-repeat; background-position: 0px 0px;
}

@-moz-keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
@-webkit-keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
@-o-keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
@keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}

Bạn thấy bài viết này thế nào?

Xem thêm bài viết khác: