PERTEMUAN 6. .classshadow { font-family: color:#333333; text-shadow: 1px 2px 3px blue; } kita juga bisa menambah value lagi misal : text-shadow: 1px 2px.

Presentasi berjudul: "PERTEMUAN 6. .classshadow { font-family: color:#333333; text-shadow: 1px 2px 3px blue; } kita juga bisa menambah value lagi misal : text-shadow: 1px 2px."— Transcript presentasi:

1 PERTEMUAN 6

2 .classshadow { font-family: color:#333333; text-shadow: 1px 2px 3px blue; } kita juga bisa menambah value lagi misal : text-shadow: 1px 2px 3px blue, 2px 3px 2px red; 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. setiap value dipisakan dengan,(koma) dan maksud dari kedua value ini ialah manambah efek dengan dua value tadi.

3   Contoh Text Shadow   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

4  Navigasi pada dasarnya adalah daftar link.  Navigasi akan menggunakan tag dan Contoh : Home News Contact About

5 Home News Contact About

6 ul { list-style-type:none; margin:0; padding:0; } a:link,a:visited { display:block; font-weight:bold; color:#FFFFFF; background- color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color:#7A991A; } Home News Contact About

7  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

8 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); } Home News Contact About

9 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; } Home Berita kontak About

10

11 11  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

12 12  Unsur Itu tampaknya "mengambang" di sisi kanan atau kiri baik jendela browser atau elemen lain. h1 { background-color:#cccccc; padding:5px; color: #000000; } p { font-family:Arial,sans-serif; } #yls {float:right; margin: 0 0 5px 5px; border: solid; }

13  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

14 14 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; }

15 contoh css float 3 kolom <!-- body{background-color:pink; width:1000px; margin:auto;} h2{padding-left:10px;} #sidebar-kiri{ min-height:500px;/* tinggi minimal*/ float:left;/* menekan ke kiri*/ width:300px;/* lebar */ margin:5px; background-color:white; } #sidebar-tengah-atau-badan{ min-height:500px;/* tinggi minimal*/ float:left;/* menekan ke kiri*/ width:350px;/* lebar */ margin:5px; background-color:white; } #sidebar-kanan{ min-height:500px;/* tinggi minimal*/ float:left;/* menekan ke kiri*/ width:300px;/* lebar */ margin:5px; background-color:white; } sidebar kiri sidebar tengah sidebar kanan

16