Tạo hiệu ứng chữ cho blogspot với css3 - WAPCHIASE24H /* Sitemap by Showdzgn.com */
Tạo hiệu ứng chữ cho blogspot với css3

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYc1QIVWwPM5CwcJU1pOFkp9ZunXWVof6IvrL3QRvOXT77v95cvTfyNkzcGllSPMl6WrehrjNq97HhgzWIwG0hwTjDDhJwO8_PqAlJMrtwp10UbJi3DdPmffNCWjYxtop4AKxejZoCZeiy/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>



Hiệu ứng 5

Tạo hiệu ứng cho chữ trên blogspot

Thêm cho đối tượng cần chạy màu một class, ở đây là "color-text-amt"

.color-text-amt{
    line-height: 42px;
    font-size: 30px;
    text-align: center;
    background: linear-gradient(179deg, #00004d 0%, #5333ed 49%, #2cd4d9 100%);
    color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 10s BeProud linear infinite;}
@keyframes BeProud {100% { background-position: 100vw 0px }}
@keyframes scroll{10%{margin-top:0}30%{margin-top:0}40%{margin-top:-40px}60%{margin-top:-40px}70%{margin-top:-80px}90%{margin-top:-80px}100%{margin-top:0}}

Trong đó:

Thay đổi giá trị màu sắc muốn thay đổi

linear-gradient(179deg, #00004d 0%, #5333ed 49%, #2cd4d9 100%)

Tốc độ dịch chuyển

animation: 10s BeProud linear infinite;

ở đây là 10 giây
Chào các bạn đến với blog truyện tổng hợp của mình nhé !
  • Facebook
  • WhatsApp
  • Instagram
  • Subscribe Our Newsletter

    Posting Terkait

    0 Response to "Tạo hiệu ứng chữ cho blogspot với css3"

    Đăng nhận xét

    Giới thiệu bản thân

    Thống kê

    Đăng nhận xét

    Menu mobi

    NHÃN

    8vui.top (1) Anime (1) Anime641 (1) Bác sĩ window (6) Bts (1) Canhme (1) Choionline (1) chuyện thú vị (1) Code bán hosting cPanel (1) Code banghoi (1) Code blog php (6) code bot like (2) Code Dinhluyen (1) Code Forum JohnCMS 6.1.2 Mod By Chuối (1) Code Forum JohnCMS Vinajohn v2 (1) Code game Đại Anh Hùng (1) Code game Gunny (1) Code game Naruto (1) Code Link Protect Groups Facebook By Chuoi (1) Code MXH JohnCMS Userviet v3 (1) Code ovigame (1) Code sim (1) code tin tức (1) Code Vnhihi (1) Code Wap Game JohnCMS LOL (1) Date a live (2) Diendanvn (1) Dnfamily (1) emoji facebook blogger (1) Game (1) Gocpho (3) Hadpro (3) Hi4u (1) Imzik Template (1) Johncms (83) Johncms mod twitter (1) KB Template (1) Lebalongit (1) leminhut (1) M3v (1) Mefun (2) Modjohncms (1) MrT79 (1) nhanhnao code (1) nukeviet (2) olaVn (1) Phieubac code (2) phonho (1) Sao (1) Scam (2) scoure code upload (3) Source Web Chat Realtime ReactJS + Firebase (1) Star An Blog (1) Star Năm It (1) Start cường it (2) Sword art online (1) Teaavartar (1) Teen10x (1) Templat (1) template anime (10) Template blogger (185) template code đây rồi (2) template facebook (2) template nghĩa rồng blog (2) Template NPC (1) template phim (25) Template php (152) Template rút gọn link (1) Template shop bán nick lmht (1) template shop bán nick ngọc rồng (4) template star sinh blog (1) template star tuấn it (1) template thảo blogger (1) Template truyện (4) template TV (2) Template Vietblogger (1) Template wordpess (4) template youtube (1) tenki no ko (5) Tên Tiếng Nhật (2) Tết (1) Thanhstar code (1) Thủ thuật (287) Tin anime (67) Tin tức hay (1) Toàn siêu nhân (2) Top 10 anime hấp dẫn dựa trên tác phẩm văn học nổi tiếng (2) TuoiTre4v (1) Văn hoá Nhật Bản (4) Văn Huy ít (1) Vietfun (1) VietVina (1) Việt hoá (1) Vina4u (4) Vina4z (2) Vinajohn (2) Vinajohn vina (1) vlogstips (1) Vnbay code (1) Vnstar (1) Vnteam code (2) Vnteen code (1) Vtjohn (1) Wapchiase24h (1) Xenforo (1) Ya4r (1) Yeudehon (1) Youkoso Jitsuryoku Shijou Shugi (1) Z777 (2) Zzui 1.5 (1)

    Topst

    Đang tìm kiếm...

    Trang

    Recent Posts

    Liên kết website

    Website có sử dụng nguồn video được chia sẻ từ PhimMoi, Bilutv, Phimbathu,KPhim, Youtube... chúng tôi không giữ bản quyền về bất cứ nội dung trên website.

    Business

    [3,Demo,post-tag]

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Quảng cáo

    Quảng cáo bài viết