Design sederhana dengan CSS

Dengan menyebut nama Allah saya beritahukan suatu informasi yang agak menarik untuk kalian simak, haha…

Khusus bagi kalian nih yang mempunyai masalah dalam bagaiamana untuk menghiasi web nya sendiri agar kelihatannya menarik untuk di tatap. Disini saya pengen coba share script-script css yang sangat sederhana yang akan membantu kalian dalam menghiasi web nya masing-masing.

OK… saya akan mulai mendemokan suatu contoh dengan script-script css sederhana yang ada sampai sebuah hasil yang cukup menarik.

Sebelum melangkah ke script css nya, kita buat file php nya terlebih dahulu, misalnya kita bikin file latihanCSS.php .

Now, kita buat file css nya, misalkan nama file nya style.css dan kita coba buat suatu tabel sederhana yang berukuran width: 400px dan heigh: 250px, dengan garis yang tebalnya 2px. Owh iyah, jangan lupa file php sama file css nya disimpan dalam satu folder.

Script:

#tabel

{

width:400px;

height:250px;

border:2px solid #030303;

}

Hasil :

Nah… sekarang kita mulai sisipkan script-script css nya. Kita coba agar garis lurus tersebut melengkung sudut-sudutnya supaya kelihatannya lebih menarik. Sisipkanlah script border-radius:25px; dalam script di atas di antara 2 kurung kurawal.

Namun, script tersebut tidak dapat diterima di sebagian browser. Tapi tenang, saya pun punya script nya di bawah ini.

-moz-border-radius:25px; /* Firefox */

Hasil :

Mulai menarik kan? Ayo kita lanjutkan, karena perjuangan nya masih panjang, hehe… sekarang kita mau apa lagi yah? Oh iyah… sekarang kita buat bayangan di belakang tabel tersebut, dengan menambahkan script box-shadow: 10px 10px 5px #888888;.

Sama seperti script di atas, script yang ini pun tidak sepenuhnya dapat di terima oleh browser-browser yang ada. Kalau tadi tenang, sekarang tidak usah khawatir saya punya solusi nya alias punya script lainnya dibawah ini.

-moz-box-shadow: 10px 10px 5px #888888; /* Firefox */

-webkit-box-shadow: 10px 10px 5px #888888; /* Safari and Chrome */

Hasil :

Bagaimana? Udah punya inspirasi untuk menghiasi web nya dengan script-script di atas? Tapi ada satu lagi script css nih yang belum di keluarkan. Mau tahu? Mau tahu? Bener mau tahu? Haha… script ini akan membuat tabel tersebut agak miring-miring gitu lah, dengan menambahkan script -webkit-transform: rotate(5deg);.

Kembali seperti semula, script tersebut tidak sepenuhnya keterima di berbagai browser, dibawah ini solusinya.

-o-transform: rotate(5deg); /* Opera */

-moz-transform: rotate(5deg); /* Firefox */

transform: rotate(30deg);

Hasil :

Selesai dah tuh… tinggal ekspresiin lah kreasi kalian untuk menghiasi web nya masing-masing. Untuk disini saya akan coba menghiasi tabel tersebut dengan kreasi saya. Jangan kecewa yah kalau hasil kreasi saya kurang menarik. Nih hasil nya…

Jangan ketawa ah lihat hasilnya! owh iyah saya mengucapkan terima kasih sama w3schools.com . Karena dari sanalah inspirasi saya muncul, Thanks…

4 thoughts on “Design sederhana dengan CSS

  1. untuk file style.css nya :

    body
    {
    background-image:url(design1.jpg);
    width:1100px;
    height:500px;
    color:#0A3619;
    font-size:12px;
    font-family:calligraphy;
    margin: auto;
    }
    #weight
    {
    width:350px;
    height:200px;
    margin:auto;
    border:1px solid #030303;
    background-image:url(bersama.jpg);
    border-radius:25px;
    }
    #tabel
    {
    color:#ffffff;
    font-family:constantia;
    width:400px;
    height:250px;
    margin:auto;
    background-color:#BE6904;
    border:2px solid #030303;
    border-radius:25px;
    -webkit-transform: rotate(5deg);
    box-shadow: 10px 10px 5px #888888;
    }

    ini untuk file latihanCSS.php nya :

    panjang nya kang???

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s