Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 82
          • 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 43

                    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
                      Bài đăng mới hơn Bài đăng cũ hơn