Cascading Style Sheet atau yang disingkat CSS
memungkinkan untuk mendesain (style) tampilan dokumen (Php dan HTML) dengan
memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS).
Didalam dunia desain web, layout atau mengatur letak web,
format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat
penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web
lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan
salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap
browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari
browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal layout css
adalah IE karena kurang dukungannya terhadap CSS.
Jika kita memiliki banyak file HTML, kita hanya perlu satu
file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua
file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS
distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada
dikumen HTML yang telah jadi.
Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu:
1. Metode Table
2. Metode Div
Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu:
1. Metode Table
2. Metode Div
Manfaat dari CSS:
Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
Ukuran file menjadi lebih kecil, sehingga load file lebih
cepat,
Mudah untuk merubah tampilan, hanya dengan merubah file CSS
saja,
Dapat berkolaborasi dengan JavaScript.
Digunakan dalam hampir semua web browser.
Pada umunya ada empat bagian yang sering ada dalam layout
sebuah web yaitu:
Header –> berisi tema web/ judul
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright
Header –> berisi tema web/ judul
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright
Atribut ID
Ada dua cara penempatan elemen dalam web dengan CSS yaitu:
1. Position (Posisi)
Mengunakan properti position terdapat 4 cara:
Static –> posisi normal (default).
Relative –> posisi elemen tergantung dari elemen yang lain.
Absolute –> posisi elemen berpatokan pada jendela browser.
Fixed –> posisi elemen tetap walaupun digeser.
2. Float (Nempel)
Menggunakan properti float atau clear:
Float:left –> elemen akan menempel pada sebelah kiri elemen
induk.
Float:right –> elemen akan menempel pada sebelah kanan
elemen induk.
Clear:left –> elemen akan menempel pada sebelah kiri dan
berada di bawah.
Clear:right –> elemen akan menempel pada sebelah kanan dan
berada dibawah
Clear:both –> elemen akan berada pada posisi bawah elemen
diatasnya.
Gambar dibawah ini adalah dasar-dasar dari pengaturan / format
posisi dengan css:
Margin –> jarak/batas elemen dengan elemen lain
Border –> border/gari tepi elemen
Padding–> jarak elemen dengan isi elemen (elemen anak)
Berikut gambar dibawah adalah format standar untuk membuat
tampilan dengan CSS:
Bubble Tool
Bubble Tool Tips ini berguna sekali untuk memberikan informasi
tentang sebuah link (bisa link refferal supaya banyak orang yang ikutan). Jika
digerakkan diatas link (hover) maka secara otomatis bubble tool tips akan
keluar dengan segala informasi yang ada yang dituliskan. Biasanya untuk membuat
balon tip ini sebagian orang memanggilnya dengan javascript yang akan membebani
blog dengan size yang sangat besar. Nah ini ada trik yang menggunakan CSS murni
sebagai pemanggilan codenya. Untuk lihat
Penerapan trik ini pake CSS, dan ini dia codenya:
Penerapan trik ini pake CSS, dan ini dia codenya:
/*---------- balon tips -----------*/
a.bt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.bt span{ display: none; }
/*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/
a.bt:hover{ z-index:25; color: #aaaaff; background:;}
a.bt:hover span.balontips{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.bt:hover span.atas{
display: block;
padding: 30px 8px 0;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;
}
a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;
}
a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;
}
/*---------- balon tips END-----------*/
a.bt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.bt span{ display: none; }
/*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/
a.bt:hover{ z-index:25; color: #aaaaff; background:;}
a.bt:hover span.balontips{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.bt:hover span.atas{
display: block;
padding: 30px 8px 0;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;
}
a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;
}
a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;
}
/*---------- balon tips END-----------*/
Untuk penggunaannya:
1. Link yang udah dibuat di kasih deklarasi
class="bt".
Link dalam code HTML bentuknya seperti ini <a
href="http://dindingcoret.com"></a> Setelah diberi
deklarasi akan jadi seperti ini : <a class="bt"
href="http://dindingcoret.com"></a>
2. Deklarasikan balontips. Panggil code balontips dengan
menuliskan <span="balontips"></span>. Masukkan
diantara code link.
3. Panggil gambar atas dengan cara
ketik <span="atas"></span>. Masukkan diantara kode
"balontips".
4. Panggil gambar tengah dengan cara
ketik <span="tengah"></span>. Masukkan diantara kode
"balontips" dibawah code "atas". Ditempat inilah sobat
menuliskan komentar sobat.
5. Panggil gambar bawah dengan cara
ketik <span="bawah"></span>. Masukkan diantara kode
"balontips" dibawah code "tengah".
Contoh penulisan code bisa dilihat disini:
<a class="bt" href="URL SOBAT">
kata-kata terserah deh..
<span class="balontips">
<span class="atas">
</span>
<span class="tengah">
Tempat sobat tulis info tentang link dan akan keluar sebagai bentuk balon
</span>
<span class="bawah">
</span>
</span>
</a>
kata-kata terserah deh..
<span class="balontips">
<span class="atas">
</span>
<span class="tengah">
Tempat sobat tulis info tentang link dan akan keluar sebagai bentuk balon
</span>
<span class="bawah">
</span>
</span>
</a>
0 komentar:
Posting Komentar