Membuat efek kotak tulisan dengan css

Kategori CSSSingkat kata singkat cerita, tambahkan kode berikut pada bagian <head>....</head>, jika anda sudah menggunakan css secara terpisah cukup tambahkan css yang sudah ada.

 

 

.kotak-ajaib {
   style="width: 200; height: 50px; overflow: auto; 
   scrollbar-face-color: #CE7E00; 
   scrollbar-shadow-color: #FFFFFF; 
   scrollbar-highlight-color: #6F4709; 
   scrollbar-3dlight-color:#11111; 
   scrollbar-darkshadow-color: #6F4709; 
   scrollbar-track-color: #FFE8C1; 
   scrollbar-arrow-color: #6F4709; 
   background-color:#659EC7;
   border:1px solid #ccc;padding:5px;
}

kemudian tambahkan kode HTML berikut pada template/source kode web anda. Menyisipkannya bebas selama dalam area <body>...</body>

  <div class="kotak-ajaib">Isi postingan atau apa aja lah...</div>

setelah itu simpan dan coba lihat hasilnya..

ini contoh hasilnya :

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Maaf untuk yang menggunakan wp atau blog mungkin harus sedikit menyesuaikan tempat menyisipkan kodenya jadi silahkan lihat template serta css masing-masing.

 

Semoga bermanfaat
Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Perbedaan html dengan css
    Dalam bidang desain web, HTML dan CSS dianggap sebagai sesuatu yang wajib digunakan dalam menyusun sebuah halaman web/blog. Hal itu sangatlah wajar karena perpaduan keduanya mampu menciptakan sebuah tampilan menarik, disukai mesin pencari, optimal dari segi kecepatan. Tapi apakah mereka bisa dipisahkan? seperti apa jika itu dilakukan? Apa perbedaan html dan css? Artikel berikut ini akan membantu anda membedakan HTML dengn CSS dari segi fungsi serta penulisan.
  • Membuat Background motif unik dengan CSS3
    Barusan habis jalan-jalan ke situs seberang, ketemu tutorial membuat motif gambar background yang sangat unik dibuat cuma dengan css3. Memang luar biasa tak pernah terbayangkan kalau hasilnya bisa mirip dengan sebuah gambar yang dibuat dengan aplikasi seperti photoshop.
  • Cara mengatur tampilan dengan css sesuai dengan media outputnya
    Perkembangan teknologi web sekarang ini memungkinkan kita mengatur hasil output ke banyak media dengan berbagai macam bentuk tampilan. Bisa sesuai aslinya, bahkan bisa dengan format tampilan tertentu sesuai dengan media yang kita inginkan.
  • Membuat header table pada tiap halaman cetak
    Format cetak laporan yang baik tentunya sangatlah penting dalam membuat sebuah aplikasi berbasi web. Biasanya laporan yang menampilkan banyak record disajikan dalam bentuk tabel dengan judul kolom berbeda.
  • Efek gambar grayscale dengan css
    Beberapa waktu lalu saya pernah tulis tutorial tentang Membuat efek gambar dengan css, yang membahas tentang bagaimana caranya menambahkan efek glow, berputar, dan transparan. Pada tutorial kali ini saya akan berbagi tentang bagaimana membuat efek gambar grayscale atau hitam putih dengan css.

Kiriman terbaru