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: