Membuat teks melingkar dengan CSS

  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