Teks Title 3 Dimensi Dengan CSS - Membuat tumpukan teks yang Anda tuliskan sebayak mungkin dengan mengatur besarnya nilai font dengan kemiringan yang tepat pada sumbu center, maka akan menghasilkan teks title dengan tampilan 3D (3 Dimensi). Hal ini sepintas mirip saat Membuat Efek Tulisan Dengan CSS Text Shadow, sehingga dengan mengatur nilai offset pada masing-masing sumbu, teks akan menampilkan efek bayangan (text-shadow), apabila hanya menggunakan fungsi CSS text-shadow seperti ini:


p.text {
  font-weight:680px;
  font-size:35px;
  background:#f9f9d7;
  color:#9a9d0b;
  text-shadow:1px 1px #404206,
              2px 2px #727415,
              3px 3px #727415,
              4px 4px #727415,
              5px 5px #727415,
              6px 6px #727415,
              7px 7px #404206,
              8px 8px 7px #000;
}

Hasilnya:


SAHABAT BLOGGER 77



Lihat perbedaan apa yang dapat dihasilkan jika kita menggunakan CSS transform:translate pada teks, efek miring pada teks hanya terjadi pada sisi left (kiri) dan sisi right (kanan), dan bayangan efek mengarah pada titik center (tengah), sehingga tampilan teks terlihat seperti nyata (3 Dimensi) karena yang Anda lakukan adalah menumpuk teks sebanyak mungkin dengan code CSS seperti ini:



<style type='text/css'>
/*import font-family:'Oswald' weight='700px'
design concept: Devy Indriyani
url: http://sahabatblogger77.blogspot.com
*/
@import url(http://fonts.googleapis.com/css?family=Oswald:700);
.container {
  -webkit-perspective: 2500px;
  -moz-perspective: 2500px;
  perspective: 2500px;
  margin-top: 50px;
  text-align: center;}

p.layer {
  font-family: "Oswald", sans-serif;
  height: 0px;
  font-size: 64px;letter-spacing:3px;
  text-decoration:underline;
/*tambahkan kode 'padding' untuk mengatur efek kemiringan*/
  color: aqua;}

.container > .layer:nth-of-type(0) {
  margin-top: -0px;
  margin-bottom: 0px;
  -webkit-transform: translateZ(0px);
  -moz-transform: translateZ(0px);
  transform: translateZ(0px);
  text-shadow: 0px 0px 0px transparent;}

.container > .layer:nth-of-type(1) {
  margin-top: -1px;
  margin-bottom: 1px;
  -webkit-transform: translateZ(8px);
  -moz-transform: translateZ(8px);
  transform: translateZ(8px);
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.0155);}

.container > .layer:nth-of-type(2) {
  margin-top: -2px;
  margin-bottom: 2px;
  -webkit-transform: translateZ(16px);
  -moz-transform: translateZ(16px);
  -ms-transform: translateZ(16px);
  -o-transform: translateZ(16px);
  transform: translateZ(16px);
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.031);}

.container > .layer:nth-of-type(3) {
  margin-top: -3px;
  margin-bottom: 3px;
  -webkit-transform: translateZ(24px);
  -moz-transform: translateZ(24px);
  transform: translateZ(24px);
  text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.0465);}

.container > .layer:nth-of-type(4) {
  margin-top: -4px;
  margin-bottom: 4px;
  -webkit-transform: translateZ(32px);
  -moz-transform: translateZ(32px);
  transform: translateZ(32px);
  text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.062);}

.container > .layer:nth-of-type(5) {
  margin-top: -5px;
  margin-bottom: 5px;
  -webkit-transform: translateZ(40px);
  -moz-transform: translateZ(40px);
  transform: translateZ(40px);
  text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.0775);}

.container > .layer:nth-of-type(6) {
  margin-top: -6px;
  margin-bottom: 6px;
  -webkit-transform: translateZ(48px);
  -moz-transform: translateZ(48px);
  transform: translateZ(48px);
  text-shadow: 0px 0px 18px rgba(0, 0, 0, 0.093);}

.container > .layer:nth-of-type(7) {
  margin-top: -7px;
  margin-bottom: 7px;
  -webkit-transform: translateZ(56px);
  -moz-transform: translateZ(56px);
  transform: translateZ(56px);
  text-shadow: 0px 0px 21px rgba(0, 0, 0, 0.1085);}
</style>

Hasilnya:




DEMO SHOW




Saya mengambil contoh penumpukan teks sebayak 7 teks title, jika Anda ingin menambahkan lebih banyak lagi tumpukan teks, Anda cukup tambahkan nilai pada type class='container' sebanyak yang Anda inginkan, namun jangan lupa untuk mengatur nilai kemiringan teks pada CSS transform:translateZ(0px), (8px), (16px) dengan selisih 8 pixel. Selanjutnya tinggal memanggil fungsi CSS diatas dengan perintah HTML seperti ini:


<div class='container'>
<p class='layer'>SAHABAT BLOGGER 77</p>
<p class='layer'>SAHABAT BLOGGER 77</p>
<p class='layer'>SAHABAT BLOGGER 77</p>
<p class='layer'>SAHABAT BLOGGER 77</p>
<p class='layer'>SAHABAT BLOGGER 77</p>
<p class='layer'>SAHABAT BLOGGER 77</p>
<p class='layer'>SAHABAT BLOGGER 77</p>
</div>


Jangan lewatkan artikel-artikel menarik dari SAHABAT BLOGGER 77, dan jadilah orang yang pertama untuk melihat hasil karya-karya saya pada Tombol Pilihan di bawah ini:


TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Teks Title 3 Dimensi Dengan CSS
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

19 komentar

  1. Unik dan menarik deh Mbak Devy, kalau soal yang keren pada blog
    Mbak Dey jagonya deh. Title blog saya bisa keren nih pakai trik ini :)

    BalasHapus
    Balasan
    1. Asyik dapat pertamax makasih Mbak,, o ya selamat hari
      Raya i Idul adha 1436 Hijriah semoga semakain sukses Studi/karirnya amin

      Hapus
    2. daripada menggunakan js untuk membuatnya, bisa gak jalan blog karena lelet, terlebih jika menempatkan kode js di halaman header,
      jadi saya menggunakan perintah CSS saja mas untuk membuat bentuknya menjadi menarik dan unik. jadi tidak perlu khawatir kalau loading menjadi berat.

      Hapus
    3. selamat hari raya idul adha juga mas, dari devy dan keluarga.

      amin.. sukses juga buat mas saud

      Hapus
  2. wah... keren sekali teks title 3 dimensi ini, apalagi menggunakan css yang notabene lebih ringan daripada menggunakan jquery, ijin praktek yia bos...

    BalasHapus
  3. aw, bagus banget hasilnya kak, sepertinya blog saya bakalan tambah keren tuh kalau logonya di ganti dengan tulisan 3 D ini...ditunggu hasil karyanya yea..

    BalasHapus
    Balasan
    1. ini benar koment Kang Lembu ato jagoan Kang Lembu ya.. , ? :o, ini benar KK Lembu khan..?

      Hapus
  4. seram2 kodenya Vy,.. tp hasilnya bisa seperti begitu ya..!, bahasa kode2 ini kebanyakan memakai bahasa asing,.. apa tidak bisa dirubah ke bahasa nasional kita, (b) ,

    BalasHapus
  5. sempurna hasilnya mbak, meskipun dengan css tapi bisa menghasilkan efek extrude (h)

    BalasHapus
  6. Selamat Hari Raya Idul Firti Mbakk :) mohon maaf lahir dan batin yaaahh dan kereeenn nihh mbakk Ilmu barunyaa hasilnya sempurna bangett :) hehe

    BalasHapus
  7. Boleh disedot neh ilmunya gan??? Terima kasih banget dapat pertamax lagi...

    Salam dari Pulau Dollar

    BalasHapus
  8. ilmu yang bermanfaat mas / mbak hehehe
    terimakasih infonya ..

    BalasHapus
  9. makin mantab kalo teksnya diberi efek kayak gitu :-b

    BalasHapus
  10. Wah keren mantap tipsnya :d

    BalasHapus
  11. Balasan
    1. OK dech mas, semoga sukses ya terapinnya..

      terimakasih untuk kunjungannya.

      Hapus
  12. Panjang bnget ya kode nya ya kak. Tapi sepertinya textnya bisa jadi keren ya..

    BalasHapus
  13. memang bagus sob, tapi sayang bikin loading blog melambat

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK