Tạo đường viền border hoạt hình chỉ với css cho blogspot

Nhiều khi bạn có nhu cầu trang trí cho nội dung nào đó trong bài viết trên blogspot, bạn có thể có nhiều lựa chọn như tạo nền, khung...và việc tạo một đường viền hoạt hình cũng có thể là một lựa chọn.

Vấn đề ở đây là bạn cần tạo ra một vùng chứa nội dung mà ở đó bạn có thể tùy biến cái khung bao bọc vùng chứa đó theo phong cách của riêng mình.

Xem thử demo:

1. Ở đâu Trăng có nhớ người
Ở đây đang có một người nhớ Trăng.

2. Nắng mưa là chuyện của trời
Tương tư là chuyện của tôi yêu nàng.

3. Trái tim hát lại câu thề
Bài thơ tôi lại nhớ về người dưng.

4. Đôi khi lỡ hẹn một giờ
Lần sau muốn gặp phải chờ trăm năm.

Để tạo được đường viền như demo bạn cần sử dụng css và HTML và có lẽ chỉ cần dán trực tiếp trong bài viết, nếu có nhu cầu trang trí một vùng nào đó trong template thì mới cần can thiệp vào chỉnh sửa mẫu.

Và sau đây là css.

<style>
  #contain-border {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;}

  #contain-border::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate 4s linear infinite;
  }

  #contain-border::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

.contain-border {
  border: 5px solid blue;
  border-radius: 10px; 
  padding-top: 35px;
  padding-bottom: 35px;
  width: 600px;/* Tùy căn chỉnh theo ý mình có thể là % */
  font-size: 20px;
  text-align: center;/* Tùy căn trái,phải,giữa cho nội dung*/
}
</style>

Sau đó bạn sử dụng HTML khi viết bài

<div class="contain-border" id="contain-border">
NỘI DUNG CỦA BẠN
  </div>

Sau đây là vài kiểu đường viền hoạt hình bạn có thể tham khảo.

B10

B11

B12

Với các kiểu đường viền từ B5 tới B12 trong đó class: containB là chung cho tất cả.
Sau đây là tất cả css.

#containB5 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;}

  #containB5::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate 4s linear infinite;
  }

  #containB5::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

#containB6 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;}

  #containB6::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -100%;
    top: -100%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate1 4s linear infinite;
  }

  #containB6::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }

@keyframes rotate1 {
  100% {
    transform: rotate(1turn);
  }
}

#containB7 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;}

  #containB7::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -60%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate2 4s linear infinite;
  }

  #containB7::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10px;
    top: 10px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }

@keyframes rotate2 {
  100% {
    transform: rotate(0.5turn);
  }
}

#containB8 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;}

  #containerB8::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 300%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate3 4s linear infinite;
  }

  #containB8::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }

@keyframes rotate3 {
  100% {
    transform: rotate(1turn);
  }
}

#containB9 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;}

  #containB9::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 80% 80%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#bdc3c7, #bdc3c7),
      linear-gradient(#2c3e50, #2c3e50), linear-gradient(#c33764, #1d2671),
      linear-gradient(#1d2671, #6dd5ed);
    animation: rotate4 4s linear infinite;
  }

  #containB9::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }

@keyframes rotate4 {
  100% {
    transform: rotate(1turn);
  }
}

#containB10 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;}

  #containB10::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -75%;
    top: -75%;
    width: 200%;
    height: 200%;
    background-color: #d02090;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 0 100%;
    background-image: linear-gradient(#7c1000, #7c1000),
      linear-gradient(#ff4605, #ffd729), linear-gradient(#f8a42f, #f8a42f),
      linear-gradient(#ea0000, #ea0000), linear-gradient(#50010a, #50010a);
    animation: rotate5 4s linear infinite;
  }

  #containB10::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 10px);
    background: white;
    border-radius: 5px;
  }

@keyframes rotate5 {
  100% {
    transform: rotate(1turn);
  }
}

#containB11 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;}

  #containB11::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -60%;
    top: -50%;
    width: 200%;
    height: 250%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#00f77b, #00f77b),
      linear-gradient(#c0cd50, #c0cd50), linear-gradient(#7df502, #81cc39),
      linear-gradient(#84a470, #887ba7), linear-gradient(#8b52de, #4e0169);
    animation: rotate6 4s ease infinite;
  }

  #containB11::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10px;
    top: 10px;
    width: calc(90% - 12px);
    height: calc(90% - 12px);
    background: white;
    border-radius: 5px;
  }

@keyframes rotate6 {
  100% {
    transform: rotate(1turn);
  }
}

#containB12 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;}

  #containB12::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -100%;
    top: -100%;
    width: 300%;
    height: 200%;
    background-color: #a4a4a4;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#121212, #121212),
      linear-gradient(#383836, #316e83), linear-gradient(#2c3e54, #468590),
      linear-gradient(#a8b4b2, #b3bf86);
    animation: rotate7 8s linear infinite;
  }

  #containB12::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }

@keyframes rotate7 {
  100% {
    transform: rotate(-2turn);
  }
}

  /* Class "containB" dùng chung cho các kiểu border */

.containB {
  border: 5px solid blue;
  border-radius: 10px;
  padding-top: 35px;
  padding-bottom: 35px;
  width: 580px;/* Tùy chỉnh */
  font-size: 20px;/* Tùy chỉnh */
  text-align: center;
}

Sau đây là các HTML tương ứng.

<div class="containB" id="containB5">
    B5
  </div>
  <div class="containB" id="containB6">
    B6
  </div>
  <div class="containB" id="containB7">
    B7
  </div>
  <div class="containB" id="containB8">
    B8
  </div>

  <div class="containB" id="containB9">
    B9
  </div>
  <div class="containB" id="containB10">
    B10
  </div>
  <div class="containB" id="containB11">
    B11
  </div>
  <div class="containB" id="containB12">
    B12
  </div>

Thủ thuật blogspot

Tạo đường viền border hoạt hình chỉ với css cho blogspot

Post a Comment

Tạo tiện ích điều hướng breadcrumbs cho blogspot

Tải về miễn phí mẫu blogger cao cấp Appiki - App Store không bản quyền chân trang

Tạo safelink random tự động get link trên blog chính cho template không phải Plus UI v2.6

Trang trí tết 2017 cho blogspot

Code Popup like fanpage xuất hiện 1 lần hỗ trợ giao diện Mobile cho Blogspot

Thủ thuật blogspot®