Pada kesempatan kali ini saya akan share "
Text 3 Dimensi Dengan CSS3",, cara membuat text 3 dimensi ini dengan CSS3 hasil modifikasi dan ditambah dengan CSS Animation,, sobat blogger bisa melihat contoh/demo "
Text 3 Dimensi Dengan CSS3" bisa dilihat di blog ini dibagian headernya blog ini .
sebelum sobat mencoba "
Text 3 Dimensi Dengan CSS3"
3D text tanpa gradient dengan arah shadow ke bawah
#footer_container h2.footer_title {
font-weight: 800;
text-transform: uppercase;
font-size: 100px;
line-height: 0.9em;
margin-bottom: 10px;
display: block;
position: relative;
-webkit-transition: all 0.12s ease-out;
-moz-transition: all 0.12s ease-out;
-o-transition: all 0.12s ease-out;
transition: all 0.12s ease-out;
color:#8BC2C5;
text-shadow: 0px 1px 5px #000, 0px 2px #000, 0px 3px #000, 0px 4px #000, 0px 5px #000, 0px 6px #000, 0px 7px #000, 0px 8px 10px #000;
}
#footer_container h2.footer_title:hover {
color: #B19FD9;
text-shadow: 0px 1px 5px #000, 0px 2px #000, 0px 3px #000, 0px 4px #000, 0px 5px #000, 0px 6px #000, 0px 7px #000, 0px 8px #000 , 0px 9px #000 , 0px 10px #000 , 0px 11px #000 , 0px 12px #000 , 0px 13px #000 , 0px 14px #000 , 0px 15px #000 , 0px 16px #000 , 0px 17px 10px #000;
}
3D text Dengan gradient dengan arah shadow ke bawah
#footer_container h2.footer_title {
font-weight: 800;
text-transform: uppercase;
font-size: 100px;
line-height: 0.9em;
margin-bottom: 10px;
display: block;
position: relative;
-webkit-transition: all 0.12s ease-out;
-moz-transition: all 0.12s ease-out;
-o-transition: all 0.12s ease-out;
transition: all 0.12s ease-out;
color:#8BC2C5;
text-shadow: 0px 1px 5px #000, 0px 2px #000, 0px 3px #000, 0px 4px #000, 0px 5px #000, 0px 6px #000, 0px 7px #000, 0px 8px 10px #000;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}
#footer_container h2.footer_title:hover {
color: #B19FD9;
text-shadow: 0px 1px 5px #000, 0px 2px #000, 0px 3px #000, 0px 4px #000, 0px 5px #000, 0px 6px #000, 0px 7px #000, 0px 8px #000 , 0px 9px #000 , 0px 10px #000 , 0px 11px #000 , 0px 12px #000 , 0px 13px #000 , 0px 14px #000 , 0px 15px #000 , 0px 16px #000 , 0px 17px 10px #000;
}
3D text tanpa gradient dengan arah shadow ke bawah,kanan
#footer_container h2.footer_title {
font-weight: 800;
text-transform: uppercase;
font-size: 100px;
line-height: 0.9em;
margin-bottom: 10px;
display: block;
position: relative;
-webkit-transition: all 0.12s ease-out;
-moz-transition: all 0.12s ease-out;
-o-transition: all 0.12s ease-out;
transition: all 0.12s ease-out;
color:#8BC2C5;
text-shadow: 1px 1px 5px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000, 5px 5px #000, 6px 6px #000, 7px 7px #000, 8px 8px 10px #000;
}
#footer_container h2.footer_title:hover {
color: #B19FD9;
text-shadow: 1px 1px 5px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000, 5px 5px #000, 6px 6px #000, 7px 7px #000, 8px 8px #000 , 9px 9px #000 , 10px 10px #000 , 11px 11px #000 , 12px 12px #000 , 13px 13px #000 , 14px 14px #000 , 15px 15px #000 , 16px 16px #000 , 17px 17px 10px #000;
}
3D text tanpa gradient dengan arah shadow ke atas,kiri
#footer_container h2.footer_title {
font-weight: 800;
text-transform: uppercase;
font-size: 100px;
line-height: 0.9em;
margin-bottom: 10px;
display: block;
position: relative;
-webkit-transition: all 0.12s ease-out;
-moz-transition: all 0.12s ease-out;
-o-transition: all 0.12s ease-out;
transition: all 0.12s ease-out;
color:#8BC2C5;
text-shadow: -1px -1px 5px #000, -2px -2px #000, -3px -3px #000, -4px -4px #000, -5px -5px #000, -6px -6px #000, -7px -7px #000, -8px -8px 10px #000;
}
#footer_container h2.footer_title:hover {
color: #B19FD9;
text-shadow: -1px -1px 5px #000, -2px -2px #000, -3px -3px #000, -4px -4px #000, -5px -5px #000, -6px -6px #000, -7px -7px #000, -8px -8px #000 , -9px -9px #000 , -10px -10px #000 , -11px -11px #000 , -12px -12px #000 , -13px -13px #000 , -14px -14px #000 , -15px -15px #000 , -16px -16px #000 , -17px -17px 10px #000;
}
3D text tanpa gradient dengan arah shadow ke atas
#footer_container h2.footer_title {
font-weight: 800;
text-transform: uppercase;
font-size: 100px;
line-height: 0.9em;
margin-bottom: 10px;
display: block;
position: relative;
-webkit-transition: all 0.12s ease-out;
-moz-transition: all 0.12s ease-out;
-o-transition: all 0.12s ease-out;
transition: all 0.12s ease-out;
color:#8BC2C5;
text-shadow: 0px -1px 5px #000, 0px -2px #000, 0px -3px #000, 0px -4px #000, 0px -5px #000, 0px -6px #000, 0px -7px #000, 0px -8px 10px #000;
}
#footer_container h2.footer_title:hover {
color: #B19FD9;
text-shadow: 0px -1px 5px #000, 0px -2px #000, 0px -3px #000, 0px -4px #000, 0px -5px #000, 0px -6px #000, 0px -7px #000, 0px -8px #000 , 0px -9px #000 , 0px -10px #000 , 0px -11px #000 , 0px -12px #000 , 0px -13px #000 , 0px -14px #000 , 0px -15px #000 , 0px -16px #000 , 0px -17px 10px #000;
}
kemudian cssnya sobat blogger taruh di template sobat blogger,jika sudah pilih salah satu, sobat blogger masukan kode html dibawah ini
<div id="footer_container"><h2 class="footer_title">TB-Tutor</h2>
Keterangan:
-Nama Text bisa sobat ganti, yang bertuliskan TB-Tutor.
-Ukuran font/jenis tulisan,bisa sobat blogger rubah sesuai kemauan sobat blogger masing-masing.
-Bila sobat blogger ingin menambahkan efek CSS3 Gradient, sobat blogger hanya perlu menambahkan kode dibawah ini :-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
- Jika sobat blogger tidak ingin menambahkan efek CSS3 Animation/Hover silahkan hapus kode
#footer_container1 h2.footer_title1:hover { isi dari CSS }
-jika sobat blogger ingin mengganti warna text/tulisan,ganti kode HEX di color:#8BC2C5; pada css #footer_container h2.footer_title untuk warna text sebelum di hover dan kode HEX di color: #B19FD9; untuk warna text setelah di hover.
-jika sobat blogger ingin ganti warna shadow atau bayangan pada text dan mengganti arah shadow,sobat tinggal ganti hex dan pixel pada css text shadow.
Contoh :text-shadow: 0px 1px #000,0px adalah arah text shadow/bayangan Horizontal = bila diubah ke angka lebih dari 1,maka shadow/bayangan akan kearah kanan,sedangkan bila diubah ke angka kurang/negatif dari -1,maka shadow akan kearah Kiri.1px adalah arah shadow Vertikal=bila diubah ke angka lebih dari 1,maka shadow akan kearah bawah,sedangkan bila diubah ke angka kurang/negatif dari -1,maka shadow akan kearah atas.#000= warna shadow text,sobat bisa ganti warna'a(HEX)
Demikian tutorial dan penjelasan tentang 3D Text Css3 dari saya.selamat mencoba,dan jangan lupa tinggalkan komentarnya
Sumber :
http://www.dode-xp.com/2011/11/text-3-dimensi-dengan-css3.html
TB - TUTOR - hai Sobat TB - pada kesempatan ini saya akan sharing tentang Membuat Blockquote ( POSTINGAN DI KOLOMIN ) . Tadi Sobat saya Yuswan Menannyakan ini dan ian menyuruh saya untuk membuat dan mudah mudahan ini bermanfaat
