Membuat efek kotak tulisan dengan css

CSS memilki kemampuan sangat luas dan dapat diterapkan untuk banyak kasus. Berikut ini adalah contoh sederhana untuk membuat sebuah kotak yang fleksibel bisa diletakkan dimana saja pada halaman web anda.

Singkat 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...

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

Semoga bermanfaat

** Bebas disunting dengan menyebutkan sumber **

Artikel Lainnya

Membuat background gradient dengan css3
Salah satu fitur unggulan yang dihadirkan pada teknologi css3 adalah kemampuanya membuat warna latar/background gradient. Gradient adalah perubahan warna dari satu warna ke warna lainya yang dilakukan secara teratur. Gradient lebih identik pada hasil gambar yang diciptakan melalui proses penempatan kombinasi beberapa warna yang memenuhi sebuah area gambar. Biasanya untuk menghasilkan gambar gradient digunakan aplikasi pengolah gambar seperti photoshop, atau corel draw. Pada artikel ini saya akan berbagi tentang bagaimana membuat latar gradient dengan css3.
Membuat halaman web dengan latar background bintang dengan css
Website atau halaman web biasanya dibuat semenarik mungkin, bisa dengan menggunakan gambar, tulisan, animasi ataupun dengan hiasan objek lainnya. Berikut ini saya akan berbagi tentang bagaimana membuat halaman web dengan latar atau background bintang dengan perintah CSS
Apa css sprite dan bagaimana membuatnya
CSS sprite adalah sebuah teknik menampilkan gambar di halaman web atau blog dengan cara mengkombinasikan beberapa gambar dalam satu file dan kemudian memanggilnya melalui css dengan cara menuliskan posisi titik x dan titik y
Membuat tombol css dengan animasi
membuat tombol dengan tampilan animasi dengan css
Template halaman admin gratis
Setiap kali kita membuat sebuah aplikasi web tentunya pasti menginginkan hasil yang baik, enak dilihat, tampilan yang cepat, fleksibel dan gampang untuk dikembangkan. Dan satu lagi tentunya lagi hemat waktu dalam membuatnya.

Membuat efek kotak tulisan dengan css

Artikel Lainnya

Kiriman terbaru