Một số giới hạn của Facebook

Hello anh em, hôm nay đi dạo trên Codepen thì mình đã vô tình phát hiện được một code hiệu ứng đẹp mắt mà anh em có thể dùng để trang trí cho Blog của mình, đoạn code này có dạng ảnh 3 cột và có hiệu ứng hover rất đẹp, nó có thể dùng làm label langding cho blog của bạn nếu bạn biết cách tùy biến.

Đoạn code

Để thêm vào blog , bạn hãy đặt đoạn code này vào nơi nào mà bạn thích ( có thể là dưới menu hoặc footer )

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(https://fonts.googleapis.com/css?family=Arial:700);
.snip1543 {
background-color: #fff;
    color: #ffffff;
    display: inline-block;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    margin: 10px 5px;
    max-width: 405px;
    min-width: 230px;
    overflow: hidden;
    position: relative;
    text-align: left;
    width: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.snip1543 *,
.snip1543 *:before,
.snip1543 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}
.snip1543 img {
  backface-visibility: hidden;
  max-width: 100%;
  vertical-align: top;
}
.snip1543:before,
.snip1543:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-color: #138882;
  opacity: 0.5;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}
.snip1543:before {
  -webkit-transform: skew(30deg) translateX(-80%);
  transform: skew(30deg) translateX(-80%);
}
.snip1543:after {
  -webkit-transform: skew(-30deg) translateX(-70%);
  transform: skew(-30deg) translateX(-70%);
}
.snip1543 figcaption {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  bottom: 0;
  padding: 25px 40% 25px 20px;
}
.snip1543 figcaption:before,
.snip1543 figcaption:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #138882;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  content: '';
  opacity: 0.5;
  z-index: -1;
}
.snip1543 figcaption:before {
  -webkit-transform: skew(30deg) translateX(-100%);
  transform: skew(30deg) translateX(-100%);
}
.snip1543 figcaption:after {
  -webkit-transform: skew(-30deg) translateX(-90%);
  transform: skew(-30deg) translateX(-90%);
}
.snip1543 h3,
.snip1543 p {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
}
.snip1543 h3 {
  font-family: 'Arial', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
}
.snip1543 p {
  font-size: 0.9em;
}
.snip1543 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.snip1543:hover h3,
.snip1543.hover h3,
.snip1543:hover p,
.snip1543.hover p {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 0.9;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.snip1543:hover:before,
.snip1543.hover:before {
  -webkit-transform: skew(30deg) translateX(-20%);
  transform: skew(30deg) translateX(-20%);
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}
.snip1543:hover:after,
.snip1543.hover:after {
  -webkit-transform: skew(-30deg) translateX(-10%);
  transform: skew(-30deg) translateX(-10%);
}
.snip1543:hover figcaption:before,
.snip1543.hover figcaption:before {
  -webkit-transform: skew(30deg) translateX(-40%);
  transform: skew(30deg) translateX(-40%);
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.snip1543:hover figcaption:after,
.snip1543.hover figcaption:after {
  -webkit-transform: skew(-30deg) translateX(-30%);
  transform: skew(-30deg) translateX(-30%);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

/* Demo purposes only */
body {
  text-align: center;
}</style>
<figure class="snip1543">
  <img src="https://www.uaf.nl/Portals/13/EasyDNNnews/180/roostermaker.jpg" alt="sample108" />
  <figcaption>
    <h3>Lập trình viên</h3>
    <p>Là người viết ra các chương trình máy tính. n..</p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1543 hover"><img src="https://www.uaf.nl/Portals/13/EasyDNNnews/180/roostermaker.jpg" alt="sample100" />
  <figcaption>
    <h3>Star Nhân IT</h3>
    <p>Là một người đẹp trai và cute.</p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1543"><img src="https://www.uaf.nl/Portals/13/EasyDNNnews/180/roostermaker.jpg" alt="sample101" />
  <figcaption>
    <h3>Ninh Thị Anh Thư</h3>
    <p>Người yêu của Nhân ý</p>
  </figcaption>
  <a href="#"></a>
</figure>
<script src='//static.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script >/* Demo purposes only */
$(".hover").mouseleave(
  function() {
    $(this).removeClass("hover");
  }
);
//# sourceURL=pen.js
   </script></b:if></b:if>

Chúc các bạn thành công