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
3D text Dengan gradient dengan arah shadow ke bawah
3D text tanpa gradient dengan arah shadow ke bawah,kanan
3D text tanpa gradient dengan arah shadow ke atas,kiri
3D text tanpa gradient dengan arah shadow ke atas
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 :
- Jika sobat blogger tidak ingin menambahkan efek CSS3 Animation/Hover silahkan hapus kode
-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,
Sumber :
http://www.dode-xp.com/2011/11/text-3-dimensi-dengan-css3.html
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
0 komentar:
Posting Komentar