Final Effect tulisan 3D

21.16 | Filed under , | Posted by Girant_31

Masih ingat dengan artikel blog ini tentang Effect Tulisan 3D dengan CSS3 ??
dimulai dari part 1 trus dilanjut dengan part 2 nya.. 

Kini Final dari effect kedua trik tersebut ditambah satu effect lagi,
yang akhirnya membentuk sebuah kubah 3D seperti ini.



Atau bisi dilihat demo nya.

Demo Final Effect tulisan 3DKlik disini untuk melihat demo Final Effect tulisan 3D

Sama halnya dengan trik sebelumnya, point penting nya hanya membulak-balik posisinya saja.
dengan mengatur SkewY dan SkewX nya, ditambah penempatan satu bentuk sisi lagi diatasnya.

Agar lebih mudah difahami baca lagi artikel blog ini tentang Effect tulisan 3D sebelumnya part 1 trus dilanjut dengan part 2 nya.

bagi yang sudah menerapkan trick ini sebelumnya,
ane sarankan agar menghapus kode/script yg sudah dipakai,
agar memudahkan dalam pengimplementasian nantinya.


Langkah 1
Masukan kode/script dibawah ini di atas kode ]]></b:skin> 
pada halaman Rancangan Edit HTML.
.cube {
        position: relative;
        top: 80px;
}
.rightFace,
.leftFace,
.topFace div {
        padding: 10px;
        width: 180px;
        height: 180px;
}
.rightFace,
.leftFace,
.topFace {
        position: absolute;
}
.leftFace {
        -webkit-transform: skewY(30deg);
        -moz-transform: skewY(30deg);
        background-color: #EEFC9B
}
.rightFace {
        -webkit-transform: skewY(-30deg);
        -moz-transform: skewY(-30deg);
        background-color: #9BFCDD;
        left: 200px;
}
.topFace div {
        -webkit-transform: skewY(-30deg) scaleY(1.16);
        -moz-transform: skewY(-30deg) scaleY(1.16);
        background-color: #FC9BFB;
        font-size: 0.862em;
}
.topFace {
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        top: -158px;
        left: 100px;
}

Langkah 2
Save template sobat, lalu masuk ke halaman Rancangan Elemen Laman.
dan tambahkan gadget HTML/Java Script jika sobat ingin memasang Effect tulisan 3D ini di sidebar.
dan jika sobat ingin memasang nya di postingan, sobat masuk pada kolom Edit HTML untuk menaruh kode nya.
Dan inilah kode pemanggil dari kode diatas yang sudah dipasang :

<div class="cube">
<div class="topFace">
<div>
Isi conten dari sisi atas
</div>
</div>
<div class="leftFace">
Isi conten dari sisi kiri
</div>
<div class="rightFace">
Isi conten dari sisi kanan
</div>
</div>

Isikan conten yang sobat kehendaki dengan mengganti tulisan/kode diatas pada
Baris 4 untuk isi conten di sisi atas.
Baris 8 untuk isi conten di sisi kiri.
Baris 11 untuk isi conten di sisi kanan.

Langkah 3
Save.. lalu lihat hasilnya.
Effect nya akan membentuk sebuah kubah 3D.

Source Code Final Effect tulisan 3DKlik disini untuk mengambil source code Final Effect tulisan 3D

Oya sobat juga dapat berkreasi sendiri dengan mengedit atau mengutak atik kode CSS nya
pada langkah pertama, baik itu kode warna, ukuran widht atau pun yang lain nya.

Selamat mencoba dan berkreasi..
Semoga bermanfaat.

Posted by Girant_31 on 21.16. Filed under , . You can follow any responses to this entry through the RSS 2.0. Feel free to leave a response

15 komentar for "Final Effect tulisan 3D"

  1. Adib from kompinter
    28 Juni 2010 pukul 22.00

    keren sob alngsung aq coba..makin keren aja ni

  3. Girant_31
    28 Juni 2010 pukul 22.12

    @8893730018325946841.0
    Ane keduanya.. :D

  4. Ferdinand
    29 Juni 2010 pukul 21.35

    Waduh udah lama ga kesini hhe....ketinggalan nie aku hha.......Wah tutornya mantazb Sob........IKutan ntoba ah........Oiya sekalian Konfirmasi nama Sob buat Sertifikat Sob.......Semangat N met aktivitas!!!

  5. ariefborneo
    30 Juni 2010 pukul 01.06

    maaf mas telat mampir nya!!!!mantap tutor nya mas...thnxss nsukses selalu

  6. TUKANG CoLoNG
    30 Juni 2010 pukul 03.36

    haloo brader..lama nih gag kesini. wah makin cadas aja tutor nya..:D

  7. Coretan Felix
    30 Juni 2010 pukul 05.26

    wah, jadinya bagus kang
    berpengaruh pada load blog gak kang?

  8. imtikhan
    30 Juni 2010 pukul 23.18

    bagus infonya...
    kapan2 tak coba sob
    terima kasih n salam blogger

  9. oketrik
    1 Juli 2010 pukul 09.32

    mantab dah css3-nya bagi-bagi donk ilmunya... ^_^

  10. Girant_31
    2 Juli 2010 pukul 07.13

    @965784056682676082.0
    makasih kunjungannya...

  11. Girant_31
    2 Juli 2010 pukul 07.25

    @5294606724635086703.0
    monggo mas...
    makasih kunjungannya........

  12. Girant_31
    2 Juli 2010 pukul 07.25

    @3519013520319268754.0
    biasa aja mas...
    wah... makasih kunjungannya iia...

  13. Girant_31
    2 Juli 2010 pukul 07.30

    @2879710846066224085.0
    sama2 mas... makasih juga sudah berkunjung kemari...

  14. Girant_31
    2 Juli 2010 pukul 08.00

    @4342078866627612153.0
    Ga mas.. ini hanya penggunaan effect CSS az mas..

  15. Girant_31
    2 Juli 2010 pukul 08.02

    @7032395284284161882.0
    Wah suka merendah neg..
    Justru ane yg seharusnya minta diajarin neg ma oketrik..

   

Leave a reply