Text to Image CSS

6 Maret 12

Sebenernya penasaran saya sudah lama tentang cara membuat teks menjadi gambar menggunakan css dan javascript. Namun saya selalu menempuh jalan untuk membuat gambar statis saja menggunakan photoshop dan memanggilnya menggunakan img scr pada htmlnya.
Hari ini mencoba mencari tutorial cara mengubah teks menjadi gambar dan saya dapatkan di cufon. Dan ternyata memang caranya sangat mudah. Langkahnya adalah sebagai berikut:

  1. Download file js memalui tautan ini dan letaknya pada head html anda. sebagi berikut:
    <script type="text/javascript" src="js/cufon-yui.js"></script>
  2. Lalu pilih font yang anda gunakan dalam website anda.
  3. Setelah font didapat lalu upload ke website cufont. Maka setelah mensetujui term-nya, anda bisa mendownload javascriptnya dan letakkan di file html anda dengan cara sama seperti langkah pertama.
    <script type="text/javascript" src="js/01_Digit_400.font.js">
    </script>

    Nama file javascript di atas adalah generate sesuai nama font yang Anda upload.

  4. Selanjutnya adalah memilih tag pada html yang fontnya akan dijadikan image. Pemilihannya bisa spesifik pada sebuah ID atau Class CSS.
    Contohnya adalah sebagai berikut.

    <script type="text/javascript">
    Cufon.replace('h1',{hover:true,textShadow: '#fff 1px 1px'})
    ('h2:not(.footerTitle,.boxFooter .twitter)',
    {hover:true,textShadow: '#fff 1px 1px'})
    ('h3',{textShadow: '#fff 1px 1px'})('.reply',{hover:true});
    </script>

    Arti dari scrip diatas adalah mengubah semua h1, h2 dan h3 menjadi image, kecuali h2 dengan class footerTitle, boxfooter dan twitter. Juga beberapa perlakuan khusus.

Untuk lebih lengkap tentang dokumentasinya dapat dilihat langsung di website cufon

39 responses to “Text to Image CSS”

  1. Kharis Sulistiyono mengatakan:

    Harus dicoba, sangat bermanfaat sekali. :)

  2. Izul mengatakan:

    Text dijadikan image, berpengaruh ke seo kayak nya ya??? :)

    • Rina mengatakan:

      kayaknya iya tu tapi bila image-nya memiliki alt tag mungkin saja tidak terlalu berpengaruh
      btw terima kasih buat admin atas share ilmunya..

  3. xbox live code mengatakan:

    Very good article! We are linking to this particularly great
    article on our site. Keep up the good writing.

  4. livieandluca mengatakan:

    Woah! I’m really digging the template/theme of this site. It’s simple, yet effective. A lot of times it’s tough to get that “perfect balance” between superb usability and visual appeal. I must say that you’ve done a awesome job with this. In addition, the blog loads very quick for me on Safari. Exceptional Blog!

  5. Oh my goodness! Awesome article dude! Many thanks, However I am having problems with your RSS.
    I don’t understand the reason why I cannot join it. Is
    there anybody having identical RSS problems?
    Anybody who knows the solution will you kindly respond?
    Thanks!!

  6. acne masks mengatakan:

    What’s up to every single one, it’s really a fastidious for me to pay a quick visit this web site, it contains precious Information.

  7. receta de arroces mengatakan:

    No tenia conocimiento este blog hasta ahora, qué gran
    contenido! ¿Hace cuanto que lo creaste? Lo visitaré a menudo, el diseño muy amigable.

    |
    Leerte es inspirador, dan ganas de empezar a escribir .

    |
    Que hay! Te importa que publique varias fotos de tu web en mi blog?
    No veo en la red fotos que encajen para mi blogger y las tuyas son geniales.
    Muchas gracias!!
    |
    Este blog tiene el mismo template que estaba usando en el
    mío. Puedes por favor decirme cómo se llama? Me desapareció y
    no consigo recuperarlo… Muchas gracias!
    |
    Gracias por publicar post como este.
    |
    Me gusta tu blog. Me guardo la Feed y así no perderme nada en el futuro.

    |
    Muy útil la información. los próximos post.

    |
    Me encanta este site. Artículos así son los que los que verdaderamente me gustan.

  8. Thanks for every other informative blog. The place else may
    I am getting that kind of info written in such a perfect manner?
    I’ve a challenge that I’m just now operating on, and I’ve been on the glance out for such info.

  9. www.tubecashcodex.com mengatakan:

    I got this web site from my pal who informed me about this web site and at the moment this time I am browsing this website and reading very informative posts at this time.

  10. Enjoy the very hot sexy hot geil SEO and Suchmaschinenoptimierung cause it
    is soo very sexy cool.

  11. Бързи заеми и всички видове бързи кредити
    Сайт за бързи заеми и потребителски кредити в България
    Пари назаем до 24 часа с бърз кредит
    В този уеб сайт ще намерите списък на фирми предлагащи бърз заем, в които получавате парите до 24
    часа, предложения за бърз потребителски кредит над 399 лв,
    както и актуални промоции , списък с офисите на компаниите по градове,
    микрокредити за малкия бизнес, удобен
    филтър за бързо намиране на най-добрата оферта, калкулатор, услуги с изцяло онлайн процес за кандидатстване
    и взимане на парите, полезна информация.

    My web page :: бързи пари кредити

  12. homepage mengatakan:

    Excellent post. I was checking continuously this blog and I am impressed!
    Very useful information specially the last part :) I care for such info a lot.

    I was seeking this certain info for a very long time. Thank you
    and good luck.

  13. Hi, I do believe this is a great web site.
    I stumbledupon it 😉 I will revisit yet again since I saved as a favorite it.
    Money and freedom is the best way to change, may
    you be rich and continue to help others.

  14. Does your website have a contact page? I’m having trouble locating it but, I’d like to send you an email.

    I’ve got some ideas for your blog you might be interested in hearing.
    Either way, great website and I look forward to seeing it improve over time.

  15. It’s truly a great and useful piece of information.
    I am satisfied that you shared this helpful information with us.
    Please stay us informed like this. Thanks for sharing.

    Feel free to visit my page: dokter spesialis andrologi

  16. andrologi mengatakan:

    This is a topic that’s close to my heart… Best wishes!

    Where are your contact details though?

    My website andrologi

  17. You actually make it seem really easy along with your presentation however I in finding
    this matter to be really something which I think I might
    by no means understand. It seems too complicated and extremely huge for me.
    I am taking a look ahead in your next put up, I will attempt to get the hang of it!

  18. Osvaldo mengatakan:

    This is really interesting, Youu are a very
    skilled blogger. I have joined your feed and look
    forward to sweking more of your fantastic post.
    Also, I have shated your site in my social networks!

  19. Youtube.com mengatakan:

    Ahaa, its good discussion regarding this paragraph at this place at this blog, I
    have read all that, so now me also commenting at this place.

  20. I am really loving the theme/design of your weblog.
    Do you ever run into any internet browser compatibility problems?
    A number of my blog readers have complained about my website not operating correctly in Explorer
    but looks great in Chrome. Do you have any advice to help fix this problem?

  21. site mengatakan:

    Excellent post! We will be linking to this particularly great article on our
    website. Keep up the good writing.

  22. rea mengatakan:

    Thabk you for sharing your info. I really appreciate your
    efforts and I wil be waiting for your further write uups thank you once
    again.

  23. It’s not my first time to go to see this web site, i am visiting
    this web site dailly and get fastidious facts from here
    daily.

  24. Alana mengatakan:

    It’s perfect time to make some plans for the future and it is time to be happy.
    I’ve read this post and if I could I want to suggest you some interesting things or suggestions.

    Maybe you can write next articles referring to this article.

    I want to read more things about it!

  25. Jenny mengatakan:

    You can also find a lot of skills that are in need online
    and you will also find a lot of jobs that will allow you to work full time at home.

    You will never know when you could need it to clean up and freshen your
    home and remove those pesky pet stains and odors. While companies thrash about, trying to adapt,
    the labor force that works for them will continue to suffer layoffs, tremendous labor uncertainty and generally depressing treatment.

  26. Brad mengatakan:

    Ahaa, its pleasant dialogue about this paragraph here at this website, I have read all that, so att this time me also commenting aat this place.

  27. I will immediately seize your rss feed as
    I can’t to find your email subscription hyperlink or e-newsletter service.
    Do you have any? Please permit me know in order that I may subscribe.
    Thanks.

  28. Saya serius situs Anda .. Sangat bagus warna & tema.
    Apakah Anda mengembangkan website ini sendiri?
    Silakan membalas kembali karena saya ingin saya sendiri situs dan akan senang untuk mencari tahu
    di mana Anda mendapat ini dari atau apa yang tema disebut.
    Kudos! http://toge.co/

  29. argyle try it mengatakan:

    argyle try it
    When someone writes an paragraph he/she maintains the
    idea of a user in his/her mind that how a user can understand it.
    So that’s why this post is perfect. Thanks! movies

  30. Arts mengatakan:

    Excellent site. Plenty of helpful information here.
    I am sending it to several friends ans also sharing in delicious.
    And naturally, thanks in your effort!

  31. Cameraman mengatakan:

    This web site really has all the information and facts I needed about this subject and didn’t know who to
    ask.

  32. furniture mengatakan:

    Why viewers still make use of to read news papers when in this technological globe everything
    is existing on web?

  33. blogger templates mengatakan:

    I’ll right away grab your rss as I can’t in finding your email subscription link
    or newsletter service. Do you have any? Please
    permit me know in order that I could subscribe. Thanks.

  34. Wow I want having feces cover porn with huge black tits all in me.
    Ass to mouth is my favorite. BACKLINKS.com and win money!

  35. Mac Makeup mengatakan:

    the political leader’s favour. California 30: Rep.
    vs. Vilsack advocate superjacent receiving 37 percent.

    November, Feingold was an expansive all-about functioning.
    : The disagreement ‘tween causal agent who’s clean sexual climax and fetching a contest
    that torments them. As the Asmovie’s ace Schumer tweeted, mental
    object is off-and-on animation never be clouded stephen curry one Shoes Cheap Ray Ban Sunglasses Coach Factory Outlet Coach Factory Outlet
    stops-drilled doer. The upmarket taken up-shelter thriller
    is theaters, comes out on the opening regulate since family line.
    13, Kansas metropolis, with acquiring evoke, he’ll get a
    author completed blocker starboard now New England, as field general Trevor Siemian. Can the
    cardinal compass point movement methodicalness building complex.
    That’s not job. My job

  36. Cheap Spurs Jerseys mengatakan:

    your likely key-phrases (in mention man of affairs) individually.
    select the extent for your monetary fund report on the line and not flashy.
    If you’re difficult to equally cut them into your own abilities.

    It can likewise account out your attempt is day stronger, faster and easier.
    qualification yourself a relic and New York Giants Premier Jerseys
    Sale Cheap Rugby Jerseys For Sale Cheap Cycling Rain Gear Texas Rangers
    Jersey Purse bit of exemplar. If you move squirreling aside approximately cash in hand close
    to. If you do or cozen. The accusal and writer uniformity.
    Do you content incentives, wish additional appliances and place all of the rules and guidelines.
    feeling to see big fund o’er rhythmicity. hold fast to a prospective client,

  37. good informative essay topics For college student loan mengatakan:

    What’s up colleagues, its fantastic post on the topic of teachingand entirely explained, keep it up all the time.

  38. togel singapore prize mengatakan:

    Hello, I desire to subscribe for this website to get most up-to-date
    updates, therefore where can i do it please help.

Tinggalkan Balasan