CSSCSS ADVANCE. CSS Dimension Sifat Dimensi CSS memungkinkan kita untuk mengontrol tinggi dan lebar suatu elemen. 4/7/20152By : Suwondo, S.Kom.

Presentasi berjudul: "CSSCSS ADVANCE. CSS Dimension Sifat Dimensi CSS memungkinkan kita untuk mengontrol tinggi dan lebar suatu elemen. 4/7/20152By : Suwondo, S.Kom."— Transcript presentasi:

1 CSSCSS ADVANCE

2 CSS Dimension Sifat Dimensi CSS memungkinkan kita untuk mengontrol tinggi dan lebar suatu elemen. 4/7/20152By : Suwondo, S.Kom

3 CSS Display dan Visibility Properti display menetapkan jika / bagaimana suatu elemen ditampilkan, dan properti visibility menentukan apakah suatu elemen akan terlihat atau tersembunyi. Menyembunyikan element dengan : display:none atau visibility:hidden Menyembunyikan elemen dapat dilakukan dengan menyeting properti tampilan ke "none" atau properti visibility untuk “hidden". Namun, perhatikan bahwa kedua metode ini menghasilkan hasil yang berbeda: visibility: hidden menyembunyikan elemen, tetapi masih akan mengambil ruang yang sama seperti sebelumnya. Elemen tersebut akan tersembunyi, tapi masih mempengaruhi tata letak. h1.hidden {visibility:hidden;} display: none menyembunyikan elemen, dan tidak akan mengambil ruang apapun. Unsur akan disembunyikan, dan halaman akan ditampilkan sebagai elemen tersebut tidak ada: h1.hidden {display:none;} 4/7/2015By : Suwondo, S.Kom3

4 CSS Display dan Visibility Mengubah element untuk ditampilkan Mengubah elemen inline untuk elemen blok, atau sebaliknya, bisa berguna untuk membuat halaman tampilan dengan cara tertentu, dan masih mengikuti stkitar web. Menggunakan : display: block; atau display: inline; Catatan: Mengubah jenis tampilan dari sebuah perubahan elemen hanya bagaimana elemen ditampilkan, TIDAK jenis unsur itu. Sebagai contoh: Sebuah elemen inline diatur untuk menampilkan: blok tidak diperbolehkan untuk memiliki elemen blok bersarang di dalamnya. 4/7/2015By : Suwondo, S.Kom4

5 CSS Positioning Positioning Properti positioning CSS memungkinkan kita untuk menempatkan posisi elemen. Hal ini juga dapat menempatkan sebuah elemen lain, dan menentukan apa yang harus terjadi ketika konten suatu elemen terlalu besar. Elemen dapat diposisikan menggunakan atas, bawah, kiri, dan kanan properti.Namun, sifat-sifat ini tidak akan bekerja kecuali properti positioning diset pertama. Mereka juga bekerja berbeda tergantung pada metode penentuan posisi. Ada empat metode penentuan posisi yang berbeda. Static Positioning Elemen HTML statis diposisikan secara default. Unsur statis diposisikan selalu diposisikan menurut aliran normal halaman. Unsur statis diposisikan tidak terpengaruh oleh bagian atas, bawah, kiri, dan sifat benar. 4/7/2015By : Suwondo, S.Kom5

6 CSS Positioning Fixed Positioning Sebuah elemen dengan posisi tetap diposisikan relatif terhadap jendela browser. Tidak akan bergerak bahkan jika jendela adalah diputar: p.pos_fixed { position:fixed; top:30px; right:5px; } Catatan: IE7 dan IE8 mendukung nilai tetap hanya jika DOCTYPE ditentukan! Elemen tetap diposisikan dikeluarkan dari aliran normal. Dokumen dan elemen lainnya berperilaku seperti elemen tetap diposisikan tidak ada. Elemen posisi tetap dapat tumpang tindih unsur lainnya. 4/7/2015By : Suwondo, S.Kom6

7 CSS Positioning Relative Positioning Unsur diposisikan relatif terhadap posisi normalnya. h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } Isi dari elemen relatif diposisikan dapat dipindahkan dan tumpang tindih unsur lainnya, tetapi tempat yang disediakan untuk elemen ini masih dipertahankan dalam aliran normal. h2.pos_top { position:relative; top:-50px; } Relatif elemen diposisikan sering digunakan sebagai blok kontainer untuk elemen benar-benar diposisikan. 4/7/2015By : Suwondo, S.Kom7

8 CSS Positioning Absolute Positioning Sebuah elemen posisi absolut diposisikan relatif terhadap elemen induk pertama yang memiliki posisi lain selain statis. Jika tidak ada elemen tersebut ditemukan, blok yang mengandung : h2 { position:absolute; left:100px; top:150px; } Tentu saja posisi elemen dikeluarkan dari aliran normal. Dokumen dan elemen lainnya berperilaku seperti elemen benar-benar diposisikan tidak ada. Benar-benar diposisikan bisa tumpang tindih elemen elemen lainnya. 4/7/2015By : Suwondo, S.Kom8

9 CSS Positioning Elemen Tumpang Tindih Ketika elemen diposisikan luar berjalan normal, mereka dapat tumpang tindih unsur lainnya. Properti z-index menentukan urutan tumpukan elemen (yang elemen harus ditempatkan di depan atau belakang, yang lain). Sebuah elemen dapat memiliki tatanan positif atau negatif stack: img { position:absolute; left:0px; top:0px; z-index:-1 } Sebuah elemen dengan urutan tumpukan yang lebih besar selalu di depan suatu elemen dengan urutan yang lebih rendah stack. Catatan: Jika dua elemen diposisikan tumpang tindih, tanpa indeks-z ditentukan, unsur diposisikan terakhir dalam kode HTML akan ditampilkan di atas. 4/7/2015By : Suwondo, S.Kom9

10 CSS Positioning Semua Property untuk CSS Positioning : 4/7/2015By : Suwondo, S.Kom10

11 CSS Positioning Semua Property CSS Positioning 4/7/2015By : Suwondo, S.Kom11

12 CSS Float Dengan float CSS, elemen dapat didorong ke kiri atau kanan, yang memungkinkan unsur-unsur lain untuk membungkus di sekitarnya. Float sangat sering digunakan untuk gambar, tetapi juga berguna ketika bekerja dengan layout. Unsur yang mengambang secara horizontal, ini berarti bahwa suatu elemen hanya dapat dibiarkan mengambang atau kanan, tidak atas atau bawah. Unsur mengapung akan bergerak sampai ke kiri atau kanan karena dapat. Biasanya ini berarti sepanjang jalan ke kiri atau kanan dari elemen yang mengandung. Unsur-unsur setelah unsur mengambang akan mengalir di sekitarnya. Unsur-unsur sebelum elemen mengambang tidak akan terpengaruh. Jika suatu gambar melayang ke kanan, teks berikut ini mengalir di sekitarnya, ke kiri: img { float:right; } 4/7/2015By : Suwondo, S.Kom12

13 CSS Float Elemen Float Jika kita menempatkan beberapa elemen mengambang setelah satu sama lain, mereka akan mengapung di samping satu sama lain jika ada ruang. Di sini kita telah membuat sebuah galeri gambar menggunakan properti float:.thumbnail { float:left; width:110px; height:90px; margin:5px; } 4/7/2015By : Suwondo, S.Kom13

14 CSS Float Mematikan Float - Menggunakan Clear Elemen setelah elemen mengambang akan mengalir di sekitarnya. Untuk menghindari ini, gunakan properti jelas. Properti jelas menentukan yang sisi dari elemen elemen lain mengambang tidak diperbolehkan. Tambahkan baris teks ke dalam galeri foto, menggunakan properti yang jelas:.text_line { clear:both; } 4/7/2015By : Suwondo, S.Kom14

15 CSS Float Semua property dari float 4/7/2015By : Suwondo, S.Kom15

16 CSS Pseudo Code CSS pseudo-kelas yang digunakan untuk menambahkan efek khusus pada beberapa selector. 4/7/2015By : Suwondo, S.Kom16

17 CSS Pseudo Code Semua Property CSS Pseudo Code 4/7/2015By : Suwondo, S.Kom17

18 CSS Pseudo Code Contoh : a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ CSS - The :first-child Pseudo-class first-child pseudo-class cocok dengan elemen tertentu yang merupakan anak pertama dari elemen lain. Catatan: Untuk: anak pertama-untuk bekerja di IE8 dan sebelumnya, harus dinyatakan. 4/7/2015By : Suwondo, S.Kom18

19 CSS Pseudo Code Pada contoh berikut, selector pertandingan setiap elemen yang adalah anak pertama dari elemen apapun: p:first-child { color:blue; } I am a strong man. I am a strong man. 4/7/2015By : Suwondo, S.Kom19

20 CSS Pseudo Code Pada contoh berikut, selector cocok dengan elemen pertama di seluruh elemen : p > i:first-child { font-weight:bold; } I am a strong man. I am a strong man. I am a strong man. I am a strong man. 4/7/2015By : Suwondo, S.Kom20

21 CSS Pseudo Code Pada contoh berikut, selector pertandingan semua elemen dalam elemen yang merupakan anak pertama dari elemen lain: p:first-child i { color:blue; } I am a strong man. I am a strong man. I am a strong man. I am a strong man. 4/7/2015By : Suwondo, S.Kom21

22 CSS Pseudo Code CSS - The :lang Pseudo-class lang pseudo-class memungkinkan kita untuk menentukan aturan-aturan khusus untuk bahasa yang berbeda. Catatan: IE8 mendukung: lang pseudo-kelas hanya jika ditentukan. Pada contoh di bawah ini,: lang mendefinisikan kelas tanda kutip untuk q elemen dengan lang = "no": q:lang(no) {quotes: "~" "~";} Some text A quote in a paragraph Some text. 4/7/2015By : Suwondo, S.Kom22

23 CSS Pseudo Element CSS pseudo-elemen yang digunakan untuk menambahkan efek khusus pada beberapa selektor. Semua property CSS pseudo elemen : 4/7/2015By : Suwondo, S.Kom23

24 CSS Pseudo Element The :first-line Pseudo-element The “first-line" pseudo-elemen ini digunakan untuk menambah style khusus pada baris pertama dari teks. Pada contoh berikut ini format browser baris pertama dari teks dalam elemen ap sesuai dengan style dalam "baris pertama-" pseudo-elemen (di mana browser jeda baris tersebut, tergantung pada ukuran jendela browser): p:first-line { color:#ff0000; font-variant:small-caps; } Catatan: "lini pertama" pseudo-elemen hanya dapat digunakan dengan elemen block-level. Catatan: properti berikut berlaku untuk elemen pseudo "lini pertama"-: font properties color properties background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear 4/7/2015By : Suwondo, S.Kom24

25 CSS Pseudo Element The :first-letter Pseudo-element Yang “first-letter" pseudo-elemen ini digunakan untuk menambah style khusus pada huruf pertama dari teks: p:first-letter { color:#ff0000; font-size:xx-large; } Catatan: "pertama-huruf" pseudo-elemen hanya dapat digunakan dengan elemen block-level. Catatan: properti berikut berlaku untuk elemen pseudo "pertama-huruf"-: font properties color properties background properties margin properties padding properties border properties text-decoration vertical-align (only if "float" is "none") text-transform line-height float clear 4/7/2015By : Suwondo, S.Kom25

26 CSS Pseudo Element Pseudo-elements and CSS Classes Pseudo-elements dapat di kombinasikan dengan CSS classes: p.article:first-letter {color:#ff0000;} A paragraph in an article Contoh di atas akan menampilkan huruf pertama dari semua paragraf dengan class = "artikel", dalam warna merah. 4/7/2015By : Suwondo, S.Kom26

27 CSS Pseudo Element Multiple Pseudo-elements Beberapa pseudo-elemen juga dapat dikombinasikan. Pada contoh berikut, huruf pertama dari sebuah paragraf akan merah, dalam ukuran font xx-large. Sisa dari baris pertama akan berwarna biru, dan dalam small-caps. Sisanya paragraf akan menjadi default font ukuran dan warna: p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } 4/7/2015By : Suwondo, S.Kom27

28 CSS Pseudo Element CSS - The :before Pseudo-element The "before" pseudo-elemen dapat digunakan untuk memasukkan beberapa konten sebelum isi elemen. Contoh berikut ini menyisipkan gambar sebelum setiap elemen : h1:before { content:url(smiley.gif); } 4/7/2015By : Suwondo, S.Kom28

29 CSS Pseudo Element CSS - The :after Pseudo-element The "after" pseudo-elemen dapat digunakan untuk memasukkan beberapa konten setelah isi elemen. Contoh berikut ini menyisipkan gambar setelah setiap elemen : h1:after { content:url(smiley.gif); } 4/7/2015By : Suwondo, S.Kom29

30 CSS Navigation Bar Contoh membuat navigation bar : ul{ list-style-type:none; margin:0; padding:0; } li{ display:inline; float:left; } a{ display:block; width:60px; } Home News Contact 4/7/2015By : Suwondo, S.Kom30

31 CSS Image Opacity Untuk membuat gambar transparan Firefox menggunakan properti opacity: x untuk transparansi, sementara IE menggunakan filter: alpha (opacity = x). Tip: Sintaks CSS3 untuk transparansi opacity: x. Dalam Firefox (opacity: x) x dapat berupa nilai 0,0-1,0. Sebuah nilai yang lebih rendah membuat elemen lebih transparan. Di IE (filter: alpha (opacity = x)) x dapat menjadi nilainya bervariasi dari 0 - 100. Sebuah nilai yang lebih rendah membuat elemen lebih transparan. 4/7/2015By : Suwondo, S.Kom31

32 CSS Image Opacity Contoh gambar transparan ketika mouse dilewatkan : 4/7/2015By : Suwondo, S.Kom32