Teks Title 3 Dimensi Dengan CSS

Info informasi Teks Title 3 Dimensi Dengan CSS atau artikel tentang Teks Title 3 Dimensi Dengan CSS ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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);}







Bersponsor


              👉 Penerbit Content Placement Indonesia  


       👉  Artikel Kami Terbitkan Harga Terjangkau 


       👉  Jasa Content Placement 


       👉 Pasang Backlink Blogroll Premium 


       👉  Content Placement 50 Jaringan Backlink 

 
       👉  Jadi Agen Hanya 100 Ribu Selamanya 

       👉  Laptop Gaming Terbaik 




.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

Demikian artikel tentang Teks Title 3 Dimensi Dengan CSS ini dapat kami sampaikan, semoga artikel atau info tentang Teks Title 3 Dimensi Dengan CSS ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.