Membuat Efek Menggunakan CSS Filter

Halo sob... Ada yang sudah pernah tahu tentang CSS Filter? Kali ini ane mau membahas tentang CSS Filter. Apa itu? CSS Filter merupakan alat / tool yang digunakan untuk mengolah berbagai macam efek visual yang biasa digunakan pada Gambar (Image), Latar (Background), atau Garis Tepi (Border) dalam browser. Pada CSS Filter disediakan beberapa fasilitas seperti efek Blur, Hitam putih / grayscale, shadow, dan lain sebagainya.

Singkatnya, langsung aja menggunakan beberapa sintaks dibawah dan letakkan ke dalam kode css sobat...

.class_filter {
  /*
Ini adalah sintaks default yang ada pada CSS Filter.
Pada dasarnya menggunakan skala 0-1 (bisa lebih)
NB: untuk hue-rotate() ada penambahan unit (deg) dan blur() dengan (px)
 */
  filter: grayscale(0);
  filter: sepia(0);
  filter: saturate(1);
  filter: hue-rotate(0deg);
  filter: invert(0);
  filter: opacity(1);
  filter: brightness(0);
  filter: contrast(1);
  filter: blur(0px);

  /* untuk Drop shadow memiliki sintaks yang sama seperti box-shadow */
  filter: drop-shadow(5px 5px 10px #ccc);
}

Sintaks tersebut hanya support dengan Chrome 18.0+ dan Safari 6+.
Namun agar bisa berjalan dibawah versi tersebut, gunakan contoh sintaks berikut:

/* bisa menggunakan persen */
.img{
  -webkit-filter:contrast(100%);
  -webkit-filter:brightness(100%);
 }

Untuk lebih jelasnya, silahkan buka link berikut:
code.tutsplus.com/tutorials/say-hello-to-css3-filters
css3.bradshawenterprises.com/filters/

Untuk penjelasan detail beserta live demo (codepen), bisa dilihat di:
css-tricks.com/almanac/properties/f/filter/

Semoga bisa membantu... :-)

Read more…

Langkah awal sebelum membuat CSS (dengan CSS Reset)

Halo sob.. Kali ini mau berbagi tentang pengalaman saat masih newbie tentang CSS. Terkadang ada beberapa permasalahan yang sebenarnya sepele cuma bikin bingung gak ketulungan :D

Salah satu contohnya adalah jarak (margin) pada halaman web, kayak contoh berikut:

"Sudah membuat div dengan background hitam namun setelah diberi margin: 0px tetep ada jaraknya"

Tapi tidak usah khawatir, untuk mengatasi  permasalahan tersebut, kita bisa menggunakan CSS Reseter. Sehingga hasilnya bisa normal seperti dibawah ini:

Apa itu CSS Reseter, yaitu script CSS yang digunakan untuk mereset ulang nilai-nilai pada tampilan halaman web yang telah diterapkan pada CSS bawaan browser. Kegunaan dari CSS Reseter dapat membuat semua hal yang tampil pada halaman browser menjadi nilai-nilai awal / nol, seperti margin, padding, jarak, tabel, background, ukuran font, dan lain sebagainya.

CSS Reseter bisa dibuat sendiri atau klo ingin lebih mudah lagi tinggal download script yang sudah menyediakan CSS Reseter.

Sobat bisa download beberapa pilihan Script CSS Reset dari CSSReset.com

Langkah-Langkah:

1. Buka Halaman web CSSReset.com

2. Copy script CSS Reseternya

3. Paste dengan membuat file dengan nama reset.css / terserah sobat

4. Kemudian sisipkan file pada halaman web sobat

5. Selamat mencoba

Read more…

Membuat Koneksi php dengan mysql

Langsung aja, Untuk membuat koneksi halaman php dengan database mysql sekaligus mengecek apakah koneksi sukses ataupun gagal, dapat dilihat Step berikut:
1. Buat koneksi.php
2. Copy Paste Script seperti dibawah
3. Running
4. Selesai dah :D

simple kan. . .

koneksi.php

$host = "localhost";
$username = "root";
$password = "";
$database = "belajar_web";

$server = mysql_connect($host, $username, $password);
if($server){
    $koneksi = mysql_select_db($database);
    if($koneksi){
        echo "Koneksi Database [$database] Berhasil!";
    }else{
        echo "Koneksi Database [$database] GAGAL!";
    }
}else{
    echo "Koneksi Server GAGAL!";
}

Read more…