Tạo bài viết

Tạo hiệu ứng ripple material khi click đẹp và đơn giản cho Blogspot

Đối với các Template mặc định của Blogspot trong phiên bản mới thì có một hiệu ứng khi click rất đẹp là splash ripple, hay còn gọi là material click.

Trong bài viết này mình sẽ hướng dẫn các bạn mang hiệu ứng đó lên tất cả các template khác.

Các bước thực hiện

Thêm CSS vào trước ]]></b:skin>
.flat-icon-button {
background: transparent;
border: 0;
outline: none;
padding: 8px;
cursor: pointer;
box-sizing: content-box;
display: inline-block;
line-height: 0
}
.flat-icon-button,
.flat-icon-button .splash-wrapper {
border-radius: 50%
}
.flat-icon-button .splash.animate {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s
}
.flat-button {
cursor: pointer;
border-radius: 2px;
padding: 8px
}
.ripple {
position: relative
}
.ripple>* {
z-index: 1
}
.splash-wrapper {
bottom: 0;
left: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 0
}
.splash {
background: rgba(0, 0, 0, .3);
border-radius: 100%;
display: block;
opacity: .9;
position: absolute;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0)
}
.splash.animate {
-webkit-animation: ripple-effect .5s linear;
animation: ripple-effect .5s linear
}
@-webkit-keyframes ripple-effect {
100% {
opacity: 0;
-webkit-transform: scale(2.5);
transform: scale(2.5)
}
}
@keyframes ripple-effect {
100% {
opacity: 0;
-webkit-transform: scale(2.5);
transform: scale(2.5)
}
}
Thêm script này vào trước </body>
<b:template-script async='true' name='indie' version='1.0.0'/>

Cách sử dụng

Hiệu ứng vuông: thêm class ripple vào bất cứ element nào.
Hiệu ứng tròn: thêm class ripple flat-icon-button vào bất cứ element nào.

Demo

CLICK ME!







Đối với các Template mặc định của Blogspot trong phiên bản mới thì có một hiệu ứng khi click rất đẹp là splash ripple, hay còn gọi là material click.

Trong bài viết này mình sẽ hướng dẫn các bạn mang hiệu ứng đó lên tất cả các template khác.

Các bước thực hiện

Thêm CSS vào trước ]]></b:skin>
.flat-icon-button {
background: transparent;
border: 0;
outline: none;
padding: 8px;
cursor: pointer;
box-sizing: content-box;
display: inline-block;
line-height: 0
}
.flat-icon-button,
.flat-icon-button .splash-wrapper {
border-radius: 50%
}
.flat-icon-button .splash.animate {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s
}
.flat-button {
cursor: pointer;
border-radius: 2px;
padding: 8px
}
.ripple {
position: relative
}
.ripple>* {
z-index: 1
}
.splash-wrapper {
bottom: 0;
left: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 0
}
.splash {
background: rgba(0, 0, 0, .3);
border-radius: 100%;
display: block;
opacity: .9;
position: absolute;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0)
}
.splash.animate {
-webkit-animation: ripple-effect .5s linear;
animation: ripple-effect .5s linear
}
@-webkit-keyframes ripple-effect {
100% {
opacity: 0;
-webkit-transform: scale(2.5);
transform: scale(2.5)
}
}
@keyframes ripple-effect {
100% {
opacity: 0;
-webkit-transform: scale(2.5);
transform: scale(2.5)
}
}
Thêm script này vào trước </body>
<b:template-script async='true' name='indie' version='1.0.0'/>

Cách sử dụng

Hiệu ứng vuông: thêm class ripple vào bất cứ element nào.
Hiệu ứng tròn: thêm class ripple flat-icon-button vào bất cứ element nào.

Demo

CLICK ME!








Tôi thích viết Blog để chia sẻ trãi nghiệm của chính mình. Tôi làm việc về Digital Marketing (SEO, Google Adwords, Facebook) và hy vọng sẽ có cơ hội hợp tác với bạn trong tương lai. Cùng chia sẻ kinh nghiệm mình có được