Text Effects Elastic Stroke Untuk Blogspot

Codepelajar – Elastic Stroke adalah teknik pembentukan garis yang terlihat “melar” atau “mengikuti” bentuk teks. Garis tersebut ditarik keluar dari teks, memberikan kesan seperti busur lentur yang mengelilingi teks sebagai garis pinggirnya. Desain dengan efek Elastic Stroke ini memberikan feel yang segar dan modern, serta memberikan kesan bahwa teks tersebut lebih hidup dan bergerak.

Script Kode Effects Elastic Stroke:

Kode ini terdiri dari 2 elemen yaitu CSS dan HTML dan anda perlu mengikuti arahan selanjutnya untuk menempatkan kode dibawah ini.

HTML

<svg viewBox="0 0 800 600">
  <symbol id="s-text">
    <text text-anchor="middle"
          x="50%" y="35%"
          class="text--line"
          >
      Hai
    </text>
    <text text-anchor="middle"
          x="50%"
          y="68%"
          class="text--line2"
          >
      Dang
    </text>
    
  </symbol>
  
  <g class="g-ants">
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
  </g>
  
  
</svg>

CSS

HTML,
BODY {
  height: 100%;
}

BODY {
  background: #082330;
  background-size: .12em 100%;
  font: 16em/1 Roboto;
}

.text--line {
  font-size: .5em;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.text-copy {
  fill: none;
  stroke: white;
  stroke-dasharray: 7% 28%;
  stroke-width: 3px;
  -webkit-animation: stroke-offset 9s infinite linear;
          animation: stroke-offset 9s infinite linear;
}
.text-copy:nth-child(1) {
  stroke: #0EF907;
  stroke-dashoffset: 7%;
}
.text-copy:nth-child(2) {
  stroke: #D61C59;
  stroke-dashoffset: 14%;
}
.text-copy:nth-child(3) {
  stroke: #E7D84B;
  stroke-dashoffset: 21%;
}
.text-copy:nth-child(4) {
  stroke: #FFF;
  stroke-dashoffset: 28%;
}
.text-copy:nth-child(5) {
  stroke: #2496EE;
  stroke-dashoffset: 35%;
}

@-webkit-keyframes stroke-offset {
  50% {
    stroke-dashoffset: 35%;
    stroke-dasharray: 0 87.5%;
  }
}

@keyframes stroke-offset {
  50% {
    stroke-dashoffset: 35%;
    stroke-dasharray: 0 87.5%;
  }
}

Cara Memasang Script Effects Elastic Stroke:

1. Buka Blog Lalu Edit Tema.

2. Silahkan pasang kode CSS tepat di atas kode </style> atau ]]></b:skin>.

3. Simpan dan lanjut untuk pemasangan HTML, Anda dapat menempatkannya di atas kode </head> atau di postingan dan dalaman yang sudah dibuat.

Pada dasarnya kode ini hanya untuk mempercantik suasana oada blog anda dan meningkatkan minat pengunjung karena dengan melihat suasana baru maka akan lebih mudah mata memandang.