ads
Home » » Membuat teks melingkar dengan CSS

Membuat teks melingkar dengan CSS

Written By Ramadhan Fnw on Apr 8, 2012 | 7:19 AM

  Assalamu'alaikum, misi mau posting nih udah jarang kayaknya saya bikin artikel. Alexa Rank blog saya pun kian menurun. haha :D
 

  Kesempatan posting kali ini saya mau share Cara Membuat Teks Melingkar dengan CSS , saya pernah mempraktikan cara ini pada postingan >> Belajar Blogazine
Sudah lihat kan, demo Teks Melingkar dengan CSS nya? Kalau mau tau kodenya, kira-kira kode untuk Teks Melingkar di postingan tadi seperti ini . . 
   #warped {position: relative; display: block; width:588px; height:519px;}

                     #warped>span[class^=w]:nth-of-type(n+0){display:block; position:absolute;
                     -moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50%
                     100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; }

                     #warped span{font-family:Georgia;font-size:38px;font-weight:regular;font-style:normal;
                     line-height:0.65; white-space:pre; overflow:visible; padding:0px;}

                     #warped .w0 {-moz-transform: rotate(2.49rad);-webkit-transform: rotate(2.49rad);-o-transform:
                     rotate(2.49rad);-ms-transform: rotate(2.49rad); transform: rotate(2.49rad);
                     width: 24px; height: 26px; left: 242.83px; top: 256.62px;}

                     #warped .w1 {-moz-transform: rotate(2.68rad);-webkit-transform: rotate(2.68rad);-o-transform:
                     rotate(2.68rad);-ms-transform: rotate(2.68rad); transform: rotate(2.68rad);
                     width: 18px; height: 26px; left: 223.75px; top: 270.26px;}

                     #warped .w2 {-moz-transform: rotate(2.82rad);-webkit-transform: rotate(2.82rad);-o-transform:
                     rotate(2.82rad);-ms-transform: rotate(2.82rad); transform: rotate(2.82rad);
                     width: 13px; height: 26px; left: 207.29px; top: 278.02px;}

                     #warped .w3 {-moz-transform: rotate(2.97rad);-webkit-transform: rotate(2.97rad);-o-transform:
                     rotate(2.97rad);-ms-transform: rotate(2.97rad); transform: rotate(2.97rad);
                     width: 19px; height: 26px; left: 183.92px; top: 283.04px;}

                     #warped .w4 {-moz-transform: rotate(3.15rad);-webkit-transform: rotate(3.15rad);-o-transform:
                     rotate(3.15rad);-ms-transform: rotate(3.15rad); transform: rotate(3.15rad);
                     width: 22px; height: 26px; left: 157.03px; top: 284.98px;}

                     #warped .w5 {-moz-transform: rotate(3.3rad);-webkit-transform: rotate(3.3rad);-o-transform:
                     rotate(3.3rad);-ms-transform: rotate(3.3rad); transform: rotate(3.3rad);
                     width: 9px; height: 26px; left: 143.12px; top: 283.21px;}

                     #warped .w6 {-moz-transform: rotate(3.48rad);-webkit-transform: rotate(3.48rad);-o-transform:
                     rotate(3.48rad);-ms-transform: rotate(3.48rad); transform: rotate(3.48rad);
                     width: 33px; height: 26px; left: 105.98px; top: 276.75px;}

                     #warped .w7 {-moz-transform: rotate(3.7rad);-webkit-transform: rotate(3.7rad);-o-transform:
                     rotate(3.7rad);-ms-transform: rotate(3.7rad); transform: rotate(3.7rad);
                     width: 18px; height: 26px; left: 86.09px; top: 263.45px;}

                     #warped .w8 {-moz-transform: rotate(3.87rad);-webkit-transform: rotate(3.87rad);-o-transform:
                     rotate(3.87rad);-ms-transform: rotate(3.87rad); transform: rotate(3.87rad);
                     width: 22px; height: 26px; left: 64.2px; top: 248.37px;}

                     #warped .w9 {-moz-transform: rotate(4.05rad);-webkit-transform: rotate(4.05rad);-o-transform:
                     rotate(4.05rad);-ms-transform: rotate(4.05rad); transform: rotate(4.05rad);
                     width: 17px; height: 26px; left: 50.08px; top: 230.41px;}

                     #warped .w10 {-moz-transform: rotate(4.21rad);-webkit-transform: rotate(4.21rad);-o-transform:
                     rotate(4.21rad);-ms-transform: rotate(4.21rad); transform: rotate(4.21rad);
                     width: 20px; height: 26px; left: 35.79px; top: 210.73px;}

                     #warped .w11 {-moz-transform: rotate(4.4rad);-webkit-transform: rotate(4.4rad);-o-transform:
                     rotate(4.4rad);-ms-transform: rotate(4.4rad); transform: rotate(4.4rad);
                     width: 21px; height: 26px; left: 25.31px; top: 187.3px;}

                     #warped .w12 {-moz-transform: rotate(4.57rad);-webkit-transform: rotate(4.57rad);-o-transform:
                     rotate(4.57rad);-ms-transform: rotate(4.57rad); transform: rotate(4.57rad);
                     width: 19px; height: 26px; left: 20.78px; top: 162.95px;}

                     #warped .w13 {-moz-transform: rotate(4.71rad);-webkit-transform: rotate(4.71rad);-o-transform:
                     rotate(4.71rad);-ms-transform: rotate(4.71rad); transform: rotate(4.71rad);
                     width: 9px; height: 26px; left: 24.5px; top: 144.01px;}

                     #warped .w14 {-moz-transform: rotate(4.89rad);-webkit-transform: rotate(4.89rad);-o-transform:
                     rotate(4.89rad);-ms-transform: rotate(4.89rad); transform: rotate(4.89rad);
                     width: 33px; height: 26px; left: 14.88px; top: 118.16px;}

                     #warped .w15 {-moz-transform: rotate(5.11rad);-webkit-transform: rotate(5.11rad);-o-transform:
                     rotate(5.11rad);-ms-transform: rotate(5.11rad); transform: rotate(5.11rad);
                     width: 18px; height: 26px; left: 31.16px; top: 89.01px;}

                     #warped .w16 {-moz-transform: rotate(5.26rad);-webkit-transform: rotate(5.26rad);-o-transform:
                     rotate(5.26rad);-ms-transform: rotate(5.26rad); transform: rotate(5.26rad);
                     width: 16px; height: 26px; left: 42.28px; top: 69.5px;}

                     #warped .w17 {-moz-transform: rotate(5.43rad);-webkit-transform: rotate(5.43rad);-o-transform:
                     rotate(5.43rad);-ms-transform: rotate(5.43rad); transform: rotate(5.43rad);
                     width: 20px; height: 26px; left: 53.97px; top: 51.05px;}

                     #warped .w18 {-moz-transform: rotate(5.57rad);-webkit-transform: rotate(5.57rad);-o-transform:
                     rotate(5.57rad);-ms-transform: rotate(5.57rad); transform: rotate(5.57rad);
                     width: 11px; height: 26px; left: 73.05px; top: 36.67px;}

                     #warped .w19 {-moz-transform: rotate(5.68rad);-webkit-transform: rotate(5.68rad);-o-transform:
                     rotate(5.68rad);-ms-transform: rotate(5.68rad); transform: rotate(5.68rad);
                     width: 9px; height: 26px; left: 85.97px; top: 27.56px;}

                     #warped .w20 {-moz-transform: rotate(5.82rad);-webkit-transform: rotate(5.82rad);-o-transform:
                     rotate(5.82rad);-ms-transform: rotate(5.82rad); transform: rotate(5.82rad);
                     width: 21px; height: 26px; left: 97.22px; top: 17.49px;}

                     #warped .w21 {-moz-transform: rotate(6rad);-webkit-transform: rotate(6rad);-o-transform:
                     rotate(6rad);-ms-transform: rotate(6rad); transform: rotate(6rad); width:
                     19px; height: 26px; left: 121.51px; top: 8.49px;}

                     #warped .w22 {-moz-transform: rotate(6.16rad);-webkit-transform: rotate(6.16rad);-o-transform:
                     rotate(6.16rad);-ms-transform: rotate(6.16rad); transform: rotate(6.16rad);
                     width: 16px; height: 26px; left: 145.04px; top: 4.02px;}

                     #warped .w23 {-moz-transform: rotate(6.33rad);-webkit-transform: rotate(6.33rad);-o-transform:
                     rotate(6.33rad);-ms-transform: rotate(6.33rad); transform: rotate(6.33rad);
                     width: 22px; height: 26px; left: 166px; top: 3.17px;}

                     #warped .w24 {-moz-transform: rotate(6.47rad);-webkit-transform: rotate(6.47rad);-o-transform:
                     rotate(6.47rad);-ms-transform: rotate(6.47rad); transform: rotate(6.47rad);
                     width: 9px; height: 26px; left: 192.82px; top: 5.67px;}

                     #warped .w25 {-moz-transform: rotate(6.62rad);-webkit-transform: rotate(6.62rad);-o-transform:
                     rotate(6.62rad);-ms-transform: rotate(6.62rad); transform: rotate(6.62rad);
                     width: 21px; height: 26px; left: 206.1px; top: 10.92px;}

                     #warped .w26 {-moz-transform: rotate(6.79rad);-webkit-transform: rotate(6.79rad);-o-transform:
                     rotate(6.79rad);-ms-transform: rotate(6.79rad); transform: rotate(6.79rad);
                     width: 18px; height: 26px; left: 229.91px; top: 20.98px;}

                     #warped .w27 {-moz-transform: rotate(6.93rad);-webkit-transform: rotate(6.93rad);-o-transform:
                     rotate(6.93rad);-ms-transform: rotate(6.93rad); transform: rotate(6.93rad);
                     width: 11px; height: 26px; left: 249.71px; top: 31.66px;}

                     #warped .w28 {-moz-transform: rotate(7.07rad);-webkit-transform: rotate(7.07rad);-o-transform:
                     rotate(7.07rad);-ms-transform: rotate(7.07rad); transform: rotate(7.07rad);
                     width: 19px; height: 26px; left: 260.73px; top: 44.83px;}

                     #warped .w29 {-moz-transform: rotate(7.21rad);-webkit-transform: rotate(7.21rad);-o-transform:
                     rotate(7.21rad);-ms-transform: rotate(7.21rad); transform: rotate(7.21rad);
                     width: 11px; height: 26px; left: 277.75px; top: 60px;}

                     #warped .w30 {-moz-transform: rotate(7.35rad);-webkit-transform: rotate(7.35rad);-o-transform:
                     rotate(7.35rad);-ms-transform: rotate(7.35rad); transform: rotate(7.35rad);
                     width: 19px; height: 26px; left: 284.48px; top: 76.85px;}

                     #warped .w31 {-moz-transform: rotate(7.51rad);-webkit-transform: rotate(7.51rad);-o-transform:
                     rotate(7.51rad);-ms-transform: rotate(7.51rad); transform: rotate(7.51rad);
                     width: 16px; height: 26px; left: 295.08px; top: 97.41px;}


Itu pun belum termasuk ID pemanggilannya, wahh jadi semakin ribet kalo mau otak-atik kode CSS sebanyak itu. hehe

Tapi tenang, ada solusinya. Mudah dan cepat. :D haha
Pertama, Kalian tinggal masuk ke sini
Lalu berkreasilah.. :D
Mudah kok,, silahkan deh coba sendiri. GOOD LUCK ;)
 


5
Share this article :

6 komentar:

mariana said...

mau cobain ni, bisa ngak ya? hehehe

BagiBagiBlog said...

Wuiih... ada Trik Menarik neh bikin Teks Melingkar.. MANTAAAFFF BANGEEET!!!
Kalo gitu Ayas ijin Nyobain deh Bang!!
MAKASI BANGET yach!
^_^

IFAN - EGP said...

Wah..
Patut dicoba, nih..
Thank's ya atas tutorialnya..
Semoga bermanfaat bagi semua :D

Rudy Azhar said...

Sebenarnya ada cara yang lebih simpel lagi, gunakan LetteringJS.

a'bar said...

maksih infonya sob....

Cucantooo said...


HAHAHAHAHAHAHA!!

VISIT SINI GAN!!

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Share Our Knowledge - All Rights Reserved
Template Modify by Creating Website Inspired Wordpress Hack
Proudly powered by Blogger