Hiệu ứng chữ tuyệt đẹp chỉ với CSS và SVG cho blogspot

Hiệu ứng chữ tuyệt đẹp chỉ với CSS và SVG cho blogspot
Trang trí cho chữ trên blogspot cũng là một thủ thuật blogspot khi thiết kế một blogspot.Có rất nhiều hiệu ứng có thể được áp dụng như sử dụng javascript hoặc chỉ thuần css3 hay là chỉ với css....
Đã có nhiều bài hướng dẫn hiệu ứng này nhưng sử dụng scss hoặc mã php nên khi áp dụng vào blogspot gặp một chút khó khăn.
Dưới đây là phần hướng dẫn tạo Hiệu ứng chữ tuyệt đẹp chỉ với CSS + SVG cho blogspot.

Demo



Để áp dụng hiệu ứng chữ với CSS+SVG cần thực hiện qua 2 bước.

Bước 1: Thêm css vào blogspot(bước này đơn giản nên không hướng dẫn)
svg { 
display:block;
font:6.5em "Montserrat"; 
width: auto; 
max-width:600px; 
height: auto; 
margin: 0 auto
}
.text-copy { 
fill: none; 
stroke: white; 
stroke-dasharray: 6% 29%; stroke-width: 5px; 
stroke-dashoffset: 0%; animation: stroke-offset 5.5s infinite linear;
}
.text-copy:nth-child(1) { stroke: #4D163D; 
animation-delay: -1; 
}
.text-copy:nth-child(2) { stroke: #BD0034; 
animation-delay: -2s;
}
.text-copy:nth-child(3) { stroke: #fff; 
animation-delay: -3s; 
}
.text-copy:nth-child(4) { stroke: #fff; 
animation-delay: -4s;
}
.text-copy:nth-child(5) { stroke: #FDB731; 
animation-delay: -5s; }
@keyframes stroke-offset { 
100% {stroke-dashoffset: -35%;} }
.cloud { padding:0}
.cloud li {list-style: none;display: inline;}
.cloud li>a { color :gray; }
.cloud li>a:hover { color : white; }
.cloud li:nth-of-type(3n + 1) {font-size: 1.25em;}
.cloud li:nth-of-type(4n+3) {font-size: 1.5em;}
.cloud li:nth-of-type(5n - 3) {font-size: 1em;}

Bạn có thể thay đổi mã màu và kích thước phông chữ cũng như phông chữ để có được kiểu chữ hợp lý và vừa ý.

Bước 2: Thêm mã SVG

Vào trong chỉnh sửa mẫu thêm mã bên dưới vào vị trí bạn muốn hiển thị(Thay chữ Thủ thuật blogspot thành chữ của bạn) và nên để nó tại vị trí có nền tối hoặc tự tạo nền màu tối thông qua css.

<svg viewBox='0 0 960 180'>
          <symbol id='s-text'><text text-anchor='middle' x='50%' y='80%'>Thủ thuật blogspot</text></symbol>
          <g class='g-ants'>
           <use class='text-copy' xlink:href='#s-text'/>
           <use class='text-copy' xlink:href='#s-text'/>
           <use class='text-copy' xlink:href='#s-text'/>
           <use class='text-copy' xlink:href='#s-text'/>
           <use class='text-copy' xlink:href='#s-text'/>
          </g>
         </svg>

Chúc bạn thành công.
Tdb Blogspot - Thủ thuật blogspot
Facebook Comments
Blogger Comments