Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Fitur Property Text Dalam CSS3

Property Text digunakan untuk pemformtan suatu teks. Property teks yang akan saya bahas kali ini adalah text-shadow, text-overflow & word-wrap. Untuk bagian pertama saya bahas tentang property text-overflow.

Property Text Overflow

Text Overflow digunakan untuk menentukan apa yang akan terjadi ketika teks tersebut mengandung elemen lain. Text Overflow sudah mendukung semua browser. Untuk penerapannya, silahkan ketikkan kode dibawah ini. Anda juga dapat mempraktekannya secara online dengan menggunakan HTML & CSS Live Editor.

<p style="text-overflow:clip">Test</p>

Property Word Wrap

Dalam CSS3, kita tentu mengenal word-spacing, namun dalam CSS3 kita akan menggunakan word-wrap untuk melakukan penyesuaian terhadap lebar yang telah ditentukan. Untuk lebih jelasnya silahkan lakukan penulisan kode dibawah ini.

<p style="word-wrap:break-word">Test</p>

Property Text Shadow

Text Shadow digunakan untuk memberikan efek bayangan pada teks, sehingga text tersebut bisa kita modifikasi menjadi berapi, 3 dimensi dan sebgainya sesuai dengan kreatifitas kita. Untuk penggunaan property text-shadow, anda bisa lihat kode dibawah ini.

<p style="text-shadow:-2px 2px 4px blue">Test</p>

Selain Property Text, Masih banyak properti baru dalam CSS3 yang tidak kalah menarik & akan saya bahas di artikel selanjutnya.

30 Comments

  1. Banten IT SolutionsReply

    Bagi kalian yang ingin membuat website e-commerce seperti toko baju online dan sebagainya, silahkan hubungi kami :)

  2. Andrekocak BlogReply

    wah wah ilmu baru lagi buat ane nih gan :D

    • Nurul ImamReply

      Tambah koleksi gan :)

      • Intan SudibjoReply

        baju nya udah bau lagi mas, maaf baru maksudnya :D

        berkat mas Ilham yang sering update html5, jadi saya tertarik belajar html5, walau di blog saya masih ada sedikit error hehe makasih

        • Nurul ImamReply

          Baju apa nih maksudnya ?
          Lanjutkan koreksi tag html5 diblognya biar valid :)

  3. ayundaReply

    sip gan bermanfaat bgt bwt sy yg mau nyoba belajar :)

    • Nurul ImamReply

      Silahkan belajar CSS yang semangat yah :)

  4. dewiReply

    wah bisa bikin aq web dunk mas yg ganteng …hehehhe

    • Nurul ImamReply

      Bisa, just call me :D

  5. Kabar MakkahReply

    wah ngelu otak atik css

    • Nurul ImamReply

      Klo yang demen malah ketagihan lho :p

  6. AsalasahReply

    wah..ada vontoh deminya gan? penasaran apa jadinya.. terutama ext-overflow:clip ama break-word. hehe

    • Nurul ImamReply

      Tinggal ketik manual aja di notepad simpan dalam format html lalu jalankan :)

      • EvansReply

        sob kamu pintar banget sihh.. boleh di minta gac ilmunya

        • Nurul ImamReply

          Sama-sama

  7. Mizz AizaReply

    ilmu baru untuk saya berkaitan css.. :D

    • Nurul ImamReply

      Sippp… Mudah2an bermanfaat :)

  8. r10Reply

    bermanfaat saat sedang belajar membuat web dan isinya

    • Nurul ImamReply

      Sangat bermanfaat :)

  9. RirinReply

    ternyata agak rumit juga ya fitur properti ini dalam css. Kalau properti rumah, pasti beda lagi ya mas hehehe :D

    • Nurul ImamReply

      Itu urusan teknik industri, bukan teknik informatika :p

  10. AgriReply

    rasanya kurang lengkap kalau gk dlngkpin demonya langsung mas :D

    • Nurul ImamReply

      Praktekin sendiri ah, jangan manja :p

  11. SmuaInfoReply

    Saya kurang paham kalau bahasa CSS ma HTML sob, :(, pokoknya tinggal pake aja deh :D

    • Nurul ImamReply

      Pake cara instant aja mas biar mudah :D

  12. Andrekocak BlogReply

    mantap gan :D

    • Nurul ImamReply

      Sippppp….

  13. DuluLainSekarangLainReply

    Ok. Yang ini tidak terlalu rumit. Cuma perlu tambah command ‘style’ sahaja pada text. Cuma kalau di WP ia boleh dibuat secara WYSIWYG. Thanks for sharing.

    • Nurul ImamReply

      Sippp… mudah kok diterapkan klo sudah paham konsepnya :D

  14. AdiReply

    Terima kasih infonya. Saya jadi paham apa fungsinya sekarang.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>