Membuat Text Warna Warni Web Design Pemula

Friday, December 26, 2014

Baca Juga





OPOSIP - Dalam Web Desain, saya pernah berpikiran bagaimana cara untuk memberikan warna yang berbeda pada sebuah kata. dulu saya pernah berpikir kalau untuk melakukan ini merupakan hal yang sulit dan sangat tidak mungkin, jadi saya mengakalinya dengan menggunakan gambar yang saya buat di Adobe Photoshop CS6 saya. Tetapi ternyata saya salah, itu semua bisa diatasi dengan CSS Inline yang bisa kita gunakan bersama Tag Span.

Bagaimana cara menggunakan CSS Inline untuk merubah warna text kita?

Berikut anda simak baik-baik :
  1. Pertama anda buka Aplikasi Notepad++ anda, atau anda bisa menggunakan editor yang lain, misalkan SUBLIME TEXT 3
  2. Sebagai Contoh, saya punya teks biasa yang bertuliskan OPOSIP. untuk warna teks OPO saya akan memberikan warna biru, dan untuk SIP saya akan memberikan warna Merah.
  3. Pertama kita akan membuat tulisan biru di OPO, caranya dengan meletakkan kode
    <span style="color:blue;">OPO</span> menjepit teks OPO, kemudian untuk memberi warna merah untuk kata SIP nya, saya menggunakan <span style="color:red;">SIP</span> menjepit teks SIP.
  4. Sekarang simpan sehingga full code nya menjadi seperti ini
     <span style="color:blue;">OPO</span><span style="color:red;">SIP</span>
    Dan sekarang teks anda sudah siap

Untuk anda yang masih kurang faham saya sudah ada tutorial video untuk anda dengan penjelasan singkat yang InsyaAllah akan membantu anda.


TERIMA KASIH

SALAM BLOGGER

Share this :

0 Komentar

Gunakanlah form komentar dengan baik dan bijak, hargailah penulis.
Komentar yang mengandung SPAM tidak akan di tampilka penulis

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini
  • © 2015 Simple SEO ✔