×

Tạo hiệu ứng cho chữ trên blogspot với CSS3

Đôi khi cũng cần trang trí một chút cho blog để thêm phần sịnh động và tạo điểm nhấn.Phương thức trang trí thì nhiều vô kể nhưng việc sử dụng thuần CSS bao giờ cũng được người thiết kế template ưu tiên hơn so với việc sử dụng javascript để tăng tốc độ load trang.

Dưới đây là vài hiệu ứng chỉ sử dụng css để trang trí cho chữ trên blogspot

Hiệu ứng 1

Chồng gần không lấy

+ CSS:

.container{
  margin:0;
  padding:20px 0;
  background: #000;
  display:flex;
  justify-content:center;
  align-items:center;
}
.hieu-ung-1{
  font-family:Arial, sans-serif;
  font-size: 2em;
  text-transform: uppercase;
  padding:20px 0;
  background:linear-gradient(90deg , #000 , #fff , #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
 
}
@keyframes animate{
  0%{
    background-position: -500%;
    
  }
  100%{
    background-position: 500%;
  }
}

+ HTML:

<div class="container">
  <div class='hieu-ung-1'>Chồng gần không lấy</div>
 </div>

Hiệu ứng 2

tdb
blogspot

+ CSS:

.container2 {
 background-color: #4AA6FB;
 text-align: center;
 color: #FFF;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 letter-spacing: 1px;
}

.hieu-ung-2 {
 background-image: url(https://4.bp.blogspot.com/-g9CR76XCoUs/XMkYD66ElGI/AAAAAAAAEFE/sr_1RlHaOQsB6eOt-b25gKCNeXn_siyhgCLcBGAs/s1600/giphy.gif);
 background-size: cover;
 color: transparent;
 -moz-background-clip: text;
 -webkit-background-clip: text;
 text-transform: uppercase;
 font-size: 90px;
 font-weight: bolder;
 line-height: .95;
 margin: 10px 0;
}

+ HTML:

<div class="container2">
 <div class='hieu-ung-2'>Tdb<br/>Blogspot</div>
</div>

Hiệu ứng 3

CODEPEN

+CSS:

.title3 {
  position: relative;
  color: #262626;
  padding: 20px 50px;
}
 
.title3:before {
  background: #262626;
  color: white;
  content: 'CODEPEN';
  overflow: hidden;
  position: absolute;  
  top: 0;  
  left: 0;
  padding: 20px 50px;
    -webkit-clip-path: polygon(0% 0% , 30% 0%, 30% 100%, 0% 100%);  
  clip-path: polygon(0% 0% , 30% 0%, 30% 100%, 0% 100%);
  animation: slide 4s 1s linear infinite; 

} 
           
@keyframes slide {      
  50% {     
    -webkit-clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 70% 100%); 
  } 
}  

/* Unnecessary code */ 
.container3 {
  background: #f90;
  font-family: sans-serif;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  height:30vh;
  font-size: 50px;
   
}

+ HTML:

<div class='container3'>
<div class="title3">CODEPEN</div>
</div>

Hiệu ứng 4

CodePen

+ CSS:

.container4 {
  background: #000000;
  margin:0;
  padding:20px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  height: 140px;
}

.tdb {
  
  color: #000;
  font-size:100px;
  letter-spacing: 5px;
  text-align: center;
  text-transform: uppercase;
  animation: move linear 2000ms infinite;  
}

@keyframes move {
  0% {
    text-shadow:
      4px -4px 0 hsla(0, 100%, 50%, 1), 
      3px -3px 0 hsla(0, 100%, 50%, 1), 
      2px -2px 0 hsla(0, 100%, 50%, 1), 
      1px -1px 0 hsla(0, 100%, 50%, 1),
      -4px 4px 0 hsla(180, 100%, 50%, 1), 
      -3px 3px 0 hsla(180, 100%, 50%, 1), 
      -2px 2px 0 hsla(180, 100%, 50%, 1), 
      -1px 1px 0 hsla(180, 100%, 50%, 1)
    ;
  }
  25% {    
    text-shadow:      
      -4px -4px 0 hsla(180, 100%, 50%, 1), 
      -3px -3px 0 hsla(180, 100%, 50%, 1), 
      -2px -2px 0 hsla(180, 100%, 50%, 1), 
      -1px -1px 0 hsla(180, 100%, 50%, 1),
      4px 4px 0 hsla(0, 100%, 50%, 1), 
      3px 3px 0 hsla(0, 100%, 50%, 1), 
      2px 2px 0 hsla(0, 100%, 50%, 1), 
      1px 1px 0 hsla(0, 100%, 50%, 1)      
    ;
  }
  50% {
    text-shadow:
      -4px 4px 0 hsla(0, 100%, 50%, 1), 
      -3px 3px 0 hsla(0, 100%, 50%, 1), 
      -2px 2px 0 hsla(0, 100%, 50%, 1), 
      -1px 1px 0 hsla(0, 100%, 50%, 1),
      4px -4px 0 hsla(180, 100%, 50%, 1), 
      3px -3px 0 hsla(180, 100%, 50%, 1), 
      2px -2px 0 hsla(180, 100%, 50%, 1), 
      1px -1px 0 hsla(180, 100%, 50%, 1)
    ;
  }
  75% {
    text-shadow:
      4px 4px 0 hsla(180, 100%, 50%, 1), 
      3px 3px 0 hsla(180, 100%, 50%, 1), 
      2px 2px 0 hsla(180, 100%, 50%, 1), 
      1px 1px 0 hsla(180, 100%, 50%, 1),
      -4px -4px 0 hsla(0, 100%, 50%, 1), 
      -3px -3px 0 hsla(0, 100%, 50%, 1), 
      -2px -2px 0 hsla(0, 100%, 50%, 1), 
      -1px -1px 0 hsla(0, 100%, 50%, 1)      
    ;
  }
  100% {
    text-shadow:
      4px -4px 0 hsla(0, 100%, 50%, 1), 
      3px -3px 0 hsla(0, 100%, 50%, 1), 
      2px -2px 0 hsla(0, 100%, 50%, 1), 
      1px -1px 0 hsla(0, 100%, 50%, 1),
      -4px 4px 0 hsla(180, 100%, 50%, 1), 
      -3px 3px 0 hsla(180, 100%, 50%, 1), 
      -2px 2px 0 hsla(180, 100%, 50%, 1), 
      -1px 1px 0 hsla(180, 100%, 50%, 1)
    ;
  }  
}

+ HTML:

<div class="container4">
  <div class='tdb'>CodePen</div>
 </div>

2 nhận xét:

Ads in post custom

Ads in post custom1

Ads in post custom2

Ads in post custom3