PERTEMUAN 6
.classshadow { font-family: color:#333333; text-shadow: 1px 2px 3px blue; }
• 1px adalah tebal bayangan secara horisontal, kekanan untuk nilai (+) dan kekiri untuk nilai (-), misal -1px; • 2px adalah tebal bayangan secera vertikal, kebawah untuk nilai (+) dan keatas untul nilai (-), misal -2px; • 3px adalah tingkat keburaman, semakin tinggi nilainya maka semakin buram pula bayanganya • blue ada warna bayangan.
kita juga bisa menambah value lagi misal : text-shadow: setiap value dipisakan dengan ,(koma) dan maksud dari 1px 2px 3px blue, kedua value ini ialah manambah efek dengan dua value tadi. 2px 3px 2px red;
Contoh Text Shadow <style> body{ width:80%;margin:30px auto;} p{ color:#888888; font:bold 40px arial; text-transform:uppercase; } .text-shadow1{ text-shadow: 1px 2px 3px blue; } .text-shadow2{ text-shadow: 1px 1px 0 #444444, 2px 2px 0 #444444, 3px 3px 0 #444444, 4px 4px 0 #444444; } .text-shadow3{ text-shadow: 1px 1px 0 red, 2px 2px 0 pink, 3px 3px 0 yellow, 4px 4px 0 blue, 5px 5px 0 green; }
.text-shadow4{ text-shadow: -1px -2px 2px black, 1px 2px 2px black; } .text-shadow5{ text-shadow: -1px -2px 0 black, 1px 2px 20px black; }
text shadow
text shadow
text shadow
text shadow
text shadow
Navigasi pada dasarnya adalah daftar link. Navigasi akan menggunakan tag
dan - Contoh :
<style> ul { list-style-type:none; margin:0; padding:0; } a:link,a:visited { display:block; font-weight:bold; color:#FFFFFF; backgroundcolor:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color:#7A991A; }
list-style-type:none – menghapus bullets. Navigasi utama tidak memerlukan penanda bullet ini. Margins dan padding = 0 untuk menghapus pengaturan default browser display:block - menampilkan link sebagai elemen blok untuk membuat seluruh bagian link dapat diklik (tidak hanya teks), dan Memungkinkan kita untuk menentukan lebar width:60px – pengaturan lebar blok
<style> ul { list-style-type:none; margin:0; padding:0; } a:link,a:visited { display:block; font-weight:bold; color:#FFFFFF; background: url(menu9.gif); width:120px; text-align:right; padding:6px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background: url(menu9.gif); }
<style> ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a:link,a:visited { display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#98bf21; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color:#7A991A; }
Content Text & web page
elements in the container
Padding Area between the
content and the border
Border Between the padding
and the margin
Margin Menentukan ruang
kosong antara elemen dan unsur-unsur yang berdekatan
11
h1 { background-color:#cccccc; padding:5px; color: #000000; } p { font-family:Arial,sans-serif; } #yls {float:right; margin: 0 0 5px 5px; border: solid; }
Unsur Itu tampaknya "mengambang" di sisi kanan atau kiri baik jendela browser atau elemen lain.
12
flaoat:right menekan bidang keatas, maksud dari float right ialah menekan ke atas kanan float:left float left ialah menekan ke atas kiri float:none nilai defaultnya, float none sama saja dengan tdk usah ditulis float:inherit fungsi falue ini adalah mengikuti nilai(value) bidang sebelumnya
body {margin:0; font-family:Verdana, Arial, sans-serif; } #wrapper { background-color:#e8b9e8; color:#000066; } #leftcolumn { float:left; width:100px; } #rightcolumn { margin-left:100px; background-color:#ffffff; color:#000000; } #logo { background-color:#eeeeee; color: #cc66cc; font-size:x-large; border-bottom: 1px solid #000000; padding:10px; } .content {padding:20px 20px 0 20px; } #floatright {margin:10px; float:right; } .footer {font-size:xx-small; text-align:center; clear:right; padding-bottom:20px; } .navBar{ text-decoration:none; margin: 15px; display:block; }
14
contoh css float 3 kolom <style type="text/css">
#sidebar-kanan{ min-height:500px;/* tinggi minimal*/ float:left;/* menekan ke kiri*/ width:300px;/* lebar */ margin:5px; background-color:white; }
