Beberapa Teks Indah yang Dibuat dengan CSS

Teks indah atau tipografi akan membuat desain website anda akan terlihat menarik. Dalam desain web, CSS membantu untuk memberikan gaya untuk merancang termasuk berbagai efek di teks atau tipografi. Dengan CSS, Anda dapat menggunakan kliping dan menambahkan animasi teks hal bumbu sedikit.

Untuk menggambarkan ini, saya akan memberikan contoh efek menabjubkan pada CSS dan keren yang dimungkinkan dengan CSS (beberapa dengan sedikit bantuan dari kode Javascript).

1.Shop Talk logo
Shop Talk logo dibuat oleh Hugo hanya menggunakan CSS. logo terlihat mirip dengan aslinya, lengkap dengan tekstur yang tepat.Untuk Codenya seperti dibawah ini :

2.Slashed effect
Ide ini oleh Robert Messerle memberikan efek pisau diiris, dilakukan dengan kurang dari 70 baris CSS.
Code untuk membuat effect ini :
Jade :

.slashed
  .top(title='Slashed')
  .bot(title='Slashed')

Stylus :

@import "nib"

html, body {
  height: 100%;
  overflow: hidden;
}
body {
  transform: rotate(-5deg);
  background: radial-gradient(center, crimson, darken(crimson, 60%));
}
.slashed {
  absolute: top 0 left 0 right 0 bottom 0;
  text-shadow: 3px 3px 3px rgba(black, 0.5);
  .top, .bot {
    text-align: center;
    font: 62px/100px arial;
    text-transform: uppercase;
    text-align: center;
    overflow: hidden;
    color: white;
    &:before {
      content: attr(title);
      transform: rotate(5deg);
    }
  }
  .top {
    absolute: top 0 left 5px right 0 bottom 50%;
    &:before {
      absolute: bottom -50px left 0 right 0;
    }
  }
  .bot {
    absolute: top 50% left 0 right 5px bottom 0;
    &:before {
      absolute: top -50px left 0 right 0;
    }
  }
}

Hasilnya akan seperti ini :

3.Hit The Floor
Efek 3D ini adalah bermain sederhana pada teks-bayangan, tapi dengan hasil yang mengagumkan.
Silahkan anda coba untuk membuatnya :
Masukan di code HTML :

<div class="hit-the-floor">404</div>

Code CSS :

.hit-the-floor {
color: #fff;
font-size: 12em;
font-weight: bold;
font-family: Helvetica;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

.hit-the-floor {
  text-align: center;
}

body {
  background-color: #f1f1f1;
}

Javascript :

//Silence is Golden

Hasilnya akan seperti ini :

4.CSS Text-FX
Moklik menambahkan efek cahaya yang redup untuk teks, memberikan Anda berkedip intermiten yang memperingatkan bahaya dari jauh.

Sebenarnya masih banyak lagi effect Teks yang bisa kita buat untuk dihalaman website kita seperti effect teks Background Clip Text,SVG text mask,Elastic stroke Animation,di pertemuan berikutnya saya akan memberikan code effect-effect teks kembali. semoga bermanfaat 🙂

Beberapa Teks Indah yang Dibuat dengan CSS

Kategori