Teks Title 3 Dimensi Dengan CSS

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:

1. Menghilangkan Daftar Artikel Pada Halaman Beranda
2. Membuat Artikel Terbaru Auto Slide Di Sidebar Blog
3. Membuat Profil Author Box Dengan CSS Kode
4. Pengenalan Elemen CSS Target
5. Contoh Bentuk-Bentuk Konsep Animasi
6. Pentingnya Atribut | Title Tag Untuk Optimasi SEO
7. Kenapa Alexa Rank Tak Kunjung Mengecil?
Close

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Teks Title 3 Dimensi Dengan CSS
Ditulis oleh= Devy
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 >>

http://sahabatblogger77.blogspot.com/2014/10/teks-title-3-dimensi-dengan-css.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77