Effect Tulisan 3D dengan CSS3

By Girant_31

Waduh maaf neg bt sobat semua..
Ane telat updat.. Ane Lupa neg.. :D

Langsung az dech ya..

Kali ini ane akan sedikit share tentang membuat Effect Tulisan 3D dg CSS3.
Contohnya seperti ini :

INI ADALAH CONTOH TULISAN YG DITAMPILKAN PADA EFFECT 3D INI ADALAH CONTOH TULISAN YG DITAMPILKAN PADA EFFECT 3D INI ADALAH CONTOH TULISAN YG DITAMPILKAN PADA EFFECT 3D INI ADALAH CONTOH TULISAN YG DITAMPILKAN PADA EFFECT 3D

Atau Lihat Demo nya :

Demo Effect Tulisan 3D dengan CSS3Klik disini untuk melihat demo Effect Tulisan 3D dengan CSS3

Gimana sobat semua ??
Menarik kan???

Langsung az ke cara membuatnya.

Langkah 1
Cari kode ]]></b:skin> pada halaman tata letak / rancangan edit HTML.
Letakan kode dibawah ini tepat diatasnya.

+ lihat kode copy code print ?

.cube
{padding: 10px;
width: 180px;
height: 180px;
margin:50px 10px 10px 10px;
}
.leftFace div {
padding: 10px;
width: 180px;
height: 180px;
padding:10px 10px 10px 10px;
}
.leftFace {
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
background-color: #ccc;
}

.cube 
{padding: 10px;
width: 180px;
height: 180px;
margin:50px 10px 10px 10px;
}
.leftFace div {
padding: 10px;
width: 180px;
height: 180px;
padding:10px 10px 10px 10px;
}
.leftFace {
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
background-color: #ccc;
}

Langkah 2
Save template dan masukan ke gudang. :D

Langkah 3
Untuk mengimplementasikan nya (jiaaah gaya).
Sobat bisa langsung menerapkan di sidebar ataupun di postingan..
Suka-suka sobat az mw dmn.

Caranya :
Masukan kode dibawah ini pada postingan ataupun di sidebar.
Hanya saja untuk menerapkan di postingan, sobat Wajib menggunakan kolom Edit HTML.

copy code print ?

<div class="cube">
<div class="leftFace">
TULISAN YG AKAN DITAMPILKAN
</div>
</div>

<div class="cube">
<div class="leftFace">
TULISAN YG AKAN DITAMPILKAN
</div>
</div>

Ganti kode TULISAN YG AKAN DITAMPILKAN dengan tulisan yg sobat inginkan.

Langkah 4
Save dan terbitkan..
Lalu lihat hasilnya.

Selesai.
Selamat mencoba dan semoga bermanfaat.

Post Info
Comments
Related Posts
Share
Subscribe
Top Comments

Title
Posted By
On
Tag
Comments
Subscribe

: Effect Tulisan 3D dengan CSS3
: Agus Adi S. From Girant_31 Blog
: Rabu, Juni 16, 2010
: Css , Tips n Trik
: 42 People Commented
: RSS Feed or leave a response for this article, Here.

42 Comments:

----------------- Unknown Say.. On Juni 16, 2010

thx sob sharenya,,,bagus2....

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@3824568980426209069.0
My first line Comments

@3824568980426209069.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 16, 2010

Makasih mas..

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@7613088145640670488.0
My first line Comments

@7613088145640670488.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- ~Srex~ Say.. On Juni 16, 2010

Keren juga mas...jadi mirip tulisan2 di game komputer ato PS yaa...
ku save dulu, sewaktu-waktu ku aplikasikan deh....tengkyu...

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@2116534769667620543.0
My first line Comments

@2116534769667620543.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 16, 2010

Thanks jg mas..

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@4540745773842052812.0
My first line Comments

@4540745773842052812.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- tfd Say.. On Juni 16, 2010

hanya dan selalu bilang..mantafffff...!!!

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@3060178595160910362.0
My first line Comments

@3060178595160910362.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 16, 2010

Terimakasih mas..

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@653902601014177583.0
My first line Comments

@653902601014177583.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Sungai Awan Say.. On Juni 16, 2010

css ini buat macem macem ya

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@3448215860316116146.0
My first line Comments

@3448215860316116146.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 16, 2010

Iya mas..
asal masukan kode CSS nya dulu pada edit HTML.

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@8781397117597759558.0
My first line Comments

@8781397117597759558.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- uswah Say.. On Juni 16, 2010

kunjungan malam

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@5529955158433751509.0
My first line Comments

@5529955158433751509.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 16, 2010

Terimakasih atas kunjungan nya..

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@7605089771886964356.0
My first line Comments

@7605089771886964356.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- imtikhan Say.. On Juni 16, 2010

info baru nich
thank's sob
sukses selalu

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@6739584453902227393.0
My first line Comments

@6739584453902227393.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 16, 2010

Sukses jg mas..
Makasih ya..

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@7709233564052712787.0
My first line Comments

@7709233564052712787.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- secangkir teh dan sekerat roti Say.. On Juni 16, 2010

luar biasa...!
saya gak ada pikiran sampe disana

*kayanya calon master baru nih, hahaha!

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@8072275369552327664.0
My first line Comments

@8072275369552327664.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 16, 2010

Amiiiiiiin..

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@6908150643181266319.0
My first line Comments

@6908150643181266319.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Rizkyzone Say.. On Juni 16, 2010

wah penasaran nih aq sob seperti apa hasilnya, coba ah

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@1672004993282461072.0
My first line Comments

@1672004993282461072.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 16, 2010

Ya seperti itu mas.. hehehe..

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@6045176391307036568.0
My first line Comments

@6045176391307036568.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Nikmatnya Hidup Say.. On Juni 16, 2010

woh kodenya cuma dikit yah..... tinggal copas aja brarti,simple

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@1361242158179618572.0
My first line Comments

@1361242158179618572.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 16, 2010

Untuk yg sekarang sih simple mas..
ga kya yg kmarin2...

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@5754342018549263724.0
My first line Comments

@5754342018549263724.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- imtikhan Say.. On Juni 17, 2010

met pagi sob
berkunjung nich...
terima kasih

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@1517648863739674540.0
My first line Comments

@1517648863739674540.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 17, 2010

makasih mas....
sama2....

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@7070210842495288172.0
My first line Comments

@7070210842495288172.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Corat - Coret [Ria Nugroho] Say.. On Juni 17, 2010

eh bisa miring gtu tulisannya
kerennn 3Dnya

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@1247509223006263889.0
My first line Comments

@1247509223006263889.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 18, 2010

Thanks

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@3332908748776359977.0
My first line Comments

@3332908748776359977.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- TUKANG CoLoNG Say.. On Juni 17, 2010

jd enasaran nih ama situs barumu. judulnya xxx y? huhuy

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@1343649786309325391.0
My first line Comments

@1343649786309325391.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 17, 2010

silahkan berkunjung mas....
ditunggu kritikannya... hehe...

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@5729022618651669410.0
My first line Comments

@5729022618651669410.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Skydrugz Say.. On Juni 17, 2010

wow...

kyk di TV2

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@2433432516398493440.0
My first line Comments

@2433432516398493440.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 17, 2010

masa sih mas????

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@2098287489097219492.0
My first line Comments

@2098287489097219492.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Shudai Ajlani Say.. On Juni 17, 2010

oke sob aku kirim lewat email yaaa, aku minta email sobat. nanti aku kirim htmlnya :)

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@6126770686696941249.0
My first line Comments

@6126770686696941249.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 17, 2010

neh sob... Adila.alya@yahoo.com

ntar klo udah d kirim konfrmsi k koment ya sob...

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@3075437963186517069.0
My first line Comments

@3075437963186517069.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Rinda Say.. On Juni 17, 2010

waaaaa kerennya @_@ (speachless mode on)

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@8069559356021704501.0
My first line Comments

@8069559356021704501.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 18, 2010

Thanks

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@6479784300019916513.0
My first line Comments

@6479784300019916513.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Sungai Awan Say.. On Juni 17, 2010

Thanks gan kunjungannya.
Makin canggih aja css ini

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@5894595351932566398.0
My first line Comments

@5894595351932566398.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 18, 2010

Makasih jg mas..
Keep Silaturrahmi..

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@5854475937027873574.0
My first line Comments

@5854475937027873574.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- imtikhan Say.. On Juni 17, 2010

met malam sob
malam jum'at pahing nich...
matur nuwun.

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@639491806998079350.0
My first line Comments

@639491806998079350.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 18, 2010

Matur nuwun jg mas..
mf bru skarang ane komf..
Makasih mas atas kunjungan nya..

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@894665026044938718.0
My first line Comments

@894665026044938718.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Zippy Say.. On Juni 17, 2010

Selalu mantep nih artikelnya.
Keren deh.
Tapi kalo pake cara ini, bakalan berat gak loading Blognya?

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@4102561972182183036.0
My first line Comments

@4102561972182183036.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 18, 2010

Insya Allah ga mas..
Ini hanya pemanggilan CSS az dan tanpa menggunakan gambar..
dan ini lah kelebihan dari CSS mas..

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@8123244091161243778.0
My first line Comments

@8123244091161243778.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Dunia Hape Say.. On Juni 17, 2010

Sip bro.
Keren banget nih.
Bener2 beda.

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@162497541894507994.0
My first line Comments

@162497541894507994.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 18, 2010

Beda itu biasa loh mas kata org2 mah.. :D

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@1471265885082569148.0
My first line Comments

@1471265885082569148.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Shudai Ajlani Say.. On Juni 18, 2010

oke nanti aku kirim sob, sob ada award untuk sobat silahkan dicek yaaa :)

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@1787485602534957782.0
My first line Comments

@1787485602534957782.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 18, 2010

Ane tunggu ya mas..
Ok Makasih ya bt award nya..

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@946462762901396590.0
My first line Comments

@946462762901396590.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- imtikhan Say.. On Juni 18, 2010

pagi sob
mampir nich mo minta air minum....
terima kasih

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@4099268449349932340.0
My first line Comments

@4099268449349932340.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Juni 18, 2010

Oh silahkan mas..
disini banyak air ko mas.. hehe..

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@1872142187486562705.0
My first line Comments

@1872142187486562705.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

Komentar Yuuuk..

Silahkan berkomentar di postingan ini. (Gratis)
Jika Sobat ingin membalas komentar seseorang,
Sobat bisa menggunakan fasilitas reply dengan cara mengawali komentar Sobat pada baris pertama dengan:
@Kode Angka Komentar

Contohnya Penulisan Komentar:
@7203927038009495854.0
My first line Comments