Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 24
        • Thủ thuật Blogspot 69
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

                    Tạo hiệu ứng splash ripple giống template mặc định

                    Các mẫu template mặc định mới sử dụng hiệu ứng splash ripple rất đẹp mắt, nếu bạn cũng muốn sử dụng hiệu ứng này trong mẫu template của bạn thì làm theo các bước sau

                    Tạo hiệu ứng splash ripple giống template mặc định

                    1. Tạo css trong <b:skin>

                    Copy
                    .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:#aaaaaa;
                      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 0.4s linear;
                      animation:ripple-effect 0.4s 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);
                      }
                    }

                    Thay màu của class .splash background:#aaaaaa; thành màu mà bạn muốn

                    2. Chèn script mặc định của Blogger trước </body>

                    <b:template-script async='true' name='indie' version='1.0.0'/>

                    Ít hôm nữa mình sẽ lọc lấy đoạn script trong này

                    3. Cách sử dụng

                    + Hiệu ứng góc tròn: thêm class flat-icon-button ripple ví dụ <a class='flat-icon-button ripple'></a>

                    + Hiệu ứng góc vuông: thêm class flat-button ripple ví dụ <a class='flat-button ripple'></a>

                    4. Demo

                    DOWNLOAD   
                    Nội dung chính