Berkenalan dengan CSS Pattern

CSS (Cascading Style Sheets) adalah Teknik yang biasa digunakan oleh programmer web untuk mengatur beberapa komponen dalam halaman web. Tujuan utama penggunaan css pada web adalah mempercantik serta merapikan halaman web. Banyak halaman web yang memiliki tampilan unik lahir dari sentuhan css.

Sebenarnya fungsi css sama dengan styles dalam aplikasi pengolahan kata seperti Microsoft word yang dapat mengatur beberapa style, misalkan heading,sub bab, body text, footer, images, dan style lainnya.

Namun Pada hal ini CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa html.

Lalu apa saja yang mampu dilakukan css pada halaman web ?

CSS dapat mengatur ukuran  gambar, ukuran font, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse  over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan lainnya.

Banyak cara membuat tampilan halaman web ataupun blog menjadi tampak indah. Bisa dengan menambahkan font yang keren, menggunakan komposisi warna yang tepat, memberikan shadow pada texs ataupun box, mengatur transparency sidebar ataupun halaman postingan pada blog atau menggunakan fasilitas pattern seperti yang akan saya bahas pada kesempatan kali ini.

Bagaimana sih bentuk pattern ?

Pattern adalah bentuk pola design. Jika teman-teman sering menggunakan software photo editor adobe photoshop tentu pernah menjumpainya.

Inilah contoh beberapa bentuk pattern :

  

Apa saja yang perlu dipersiapkan ?

Ada 2 cara untuk memasang css pattern pada blog ataupun web yaitu :

1. Menggunakan gambar pattern. 

Anda bisa download di beberapa web yang menyediakan gambar pattern. Coba kunjungi link ini.

Kemudian letakkan url alamat gambar background pattern di web ataupun blog anda.

Caranya :

body {

background-image:('http://1234.photobucket.com/gambar/pattern.png');

}

Atau download dahulu gambar patternnya kemudian pasang di web anda.

Caranya :

body { 

background-image: url (images/pattern.png); 

}

1.       

2. Menggunakan fasilitas css pattern generator

Cara yang kedua ini lebih mudah bagi anda. Dengan hanya mengunjungi web yang menyediakan fasilitas css pattern ini . 

Langkahnya :

* Pilih jenis pattern yang anda inginkan.

* Copy kode yang muncul di halaman tersebut.

Contoh kode yang saya dapat dari salah satu jenis pattern yang saya pilih.

background:

radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,

radial-gradient(at 100% 100%,     rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px),

#8a3;

background-size: 20px 20px;

Jika anda ingin mengganti background blog anda tinggal ganti css body di blog anda dengan kode di atas.

Anda juga dapat  mengganti background header blog anda dengan css pattern caranya :

Cari class .headerpic-wrapper di blog anda (Setiap template belum tentu memiliki nama class yang sama) kemudian ganti kode backgroundnya dengan kode di atas.