Home » Uncategories » Cara Membuat Efek Tulisan Dengan CSS Text Shadow

Cara Membuat Efek Tulisan Dengan CSS Text Shadow

Cara Membuat Efek Tulisan Dengan CSS Text Shadow - Hallo sahabat theossspn, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Efek Tulisan Dengan CSS Text Shadow, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan yang kami tulis ini dapat anda pahami. baiklah, selamat membaca. Kunjungi juga Situs Dibawah ini:
  • Sumbubotol
  • Theospan
  • Gadgetin
  • Cafepimpin
  • infoterkini


    • Judul : Cara Membuat Efek Tulisan Dengan CSS Text Shadow
    link : Cara Membuat Efek Tulisan Dengan CSS Text Shadow

    Baca juga


    Cara Membuat Efek Tulisan Dengan CSS Text Shadow

    Kali ini saya akan coba membahas bagaimana cara membuat text shadow menggunakan CSS3. Dari namanya saja sudah bisa ditebak bahwa text yang dimaksud memiliki bayangan.

    Sobat bisa membuat tulisan tampak timbul, tenggelam, 3D atau bersinar dengan mengatur besar kecilnya ukuran bayangannya. Semua browser support dengan text shadow ini, kecuali IE. Jadi sebaiknya cek dulu list browser yang support dibawah ini.

    Safari 3.1 (Mac/Win) yes, but no multiple shadows
    Safari 4 (Mac/Win) yes, full support
    Opera 9.5 (Mac/Win/Lin) yes, full support
    Firefox 2/3 (Mac/Win/Lin) no
    Firefox 3.1/3.5 (Mac/Win/Lin) yes, full support
    Google Chrome 1 (Win) no
    Google Chrome 2 (Win) yes, full support
    IE 7/8 (Win) no
    Shiira (Mac) yes, but no multiple shadows
    Safari on iPhone yes, but no multiple shadows
    Opera Mini 4.1 yes, no blur radius

    Jika sudah, mari kita lanjut ke tutorialnya. Perhatikan kode css dibawah ini :

    color: #000;
    background: #fff;
    text-shadow: 1px 1px 1px #424242;

    • color : #000 adalah warna dasar tulisan
    • background: #fff adalah warna latar
    • 1px 1px 1px #424242 untuk warna bayangannya (shadow)

    Dibawah ini ada beberapa contoh model text shadow beserta kode css-nya, silahkan sobat kreasikan.

    gambar 1

    color: #000;
    background: #fff;
    text-shadow: 2px 2px 3px #000;
    gambar 2

    color: #000;
    background: #fff;
    text-shadow: 2px 2px #000;
    gambar 3

    color: #000;
    background: #fff;
    text-shadow: 2px -2px 3px #000;
    gambar 4

    color: #000;
    background: #666;
    text-shadow: 0px 1px 1px #fff;
    image

    color: #666;
    background: #000;
    text-shadow: 0px 1px 0px #ccc;
    image

    color: #fff;
    background: #666;
    text-shadow: 0px 1px 1px #000;
    image

    color: #fff;
    background: #000;
    text-shadow: 1px 1px 6px #fff;
    image color:#FFE9C7; background:#FF6C17; text-shadow: 2px 2px 2px #A6250C;
    image color:#823210; background:#FF6C17; text-shadow:1px 1px 1px #FF9924;
    image

    color: #fff;
    background: #fff;
    text-shadow: 1px 1px 4px #000;
    image

    color: #000;
    background: #000;
    text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

    Selamat berkreasi, semoga dengan adanya text shadow blog sobat jadi lebih hidup.


    Demikianlah Artikel Cara Membuat Efek Tulisan Dengan CSS Text Shadow

    Sekianlah artikel Cara Membuat Efek Tulisan Dengan CSS Text Shadow kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

    selamat membaca. Kunjungi juga Situs Dibawah ini:
  • Sumbubotol
  • Theospan
  • Gadgetin
  • Cafepimpin
  • infoterkini


    • Anda sekarang membaca artikel Cara Membuat Efek Tulisan Dengan CSS Text Shadow dengan alamat link https://theossspn.blogspot.com/2010/06/cara-membuat-efek-tulisan-dengan-css.html

    0 Response to "Cara Membuat Efek Tulisan Dengan CSS Text Shadow"

    Posting Komentar

    Langganan: Posting Komentar (Atom)