CSS3 Cascading Style Sheet 3 Cascading Style Sheet 3

Presentasi berjudul: "CSS3 Cascading Style Sheet 3 Cascading Style Sheet 3"— Transcript presentasi:

1 CSS3 Cascading Style Sheet 3 Cascading Style Sheet 3
12/04/2017 By : Suwondo, S.Kom

2 CSS3 Border Dengan CSS3, Anda dapat membuat batas bulat, menambahkan bayangan ke kotak, dan menggunakan gambar sebagai perbatasan - tanpa menggunakan program desain, seperti Photoshop. Dalam bab ini anda akan belajar tentang sifat batas berikut:      * border-radius      * box-shadow      * border-image 12/04/2017 By : Suwondo, S.Kom

3 CSS3 Border 12/04/2017 By : Suwondo, S.Kom

4 CSS3 Border CSS3 Rounded Corners div { border:2px solid; border-radius:25px; -webkit-border-radius:25px; /* Safari */ -moz-border-radius:25px; /* Safari */ } CSS3 Box Shadow div { box-shadow: 10px 10px 5px #888888; -moz-box-shadow: 10px 10px 5px #888888; -webkit-box-shadow: 10px 10px 5px #888888; /* Safari */ } CSS3 Border Image div { border-image:url(border.png) round; -moz-border-image:url(border.png) round; /* Firefox */ -webkit-border-image:url(border.png) round; /* Safari and Chrome */ } 12/04/2017 By : Suwondo, S.Kom

5 CSS3 Background 12/04/2017 By : Suwondo, S.Kom

6 CSS3 Background Background Size Property div { background:url(img_flwr.gif); -moz-background-size:80px 60px; /* Firefox 3.6 and earlier */ -webkit-background-size:80px 60px; /* Safari */ background-size:80px 60px; background-repeat:no-repeat; } 12/04/2017 By : Suwondo, S.Kom

7 CSS3 Background Background Origin Property div { background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box; } 12/04/2017 By : Suwondo, S.Kom

8 CSS3 Background Multiple Background body { background-image:url(img_flwr.gif),url(img_tree.gif); } 12/04/2017 By : Suwondo, S.Kom

9 CSS3 Text Effect 12/04/2017 By : Suwondo, S.Kom

10 CSS3 Text Effect Text Shadow h1 { text-shadow: 5px 5px 5px #FF0000; } Text Word Wrapping p {word-wrap:break-word;} 12/04/2017 By : Suwondo, S.Kom

11 CSS3 2D Transform 12/04/2017 By : Suwondo, S.Kom

12 CSS3 2D Transform Method yang ada : translate() rotate() scale() skew() matrix() div { transform: rotate(30deg); -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ } 12/04/2017 By : Suwondo, S.Kom

13 CSS3 2D Transform Translate (x-axis, y-axis) : div { transform: translate(50px,100px); -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ } Rotate (degree) : div { transform: rotate(30deg); -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ } Scale (x-axis, y-axis): div { transform: scale(2,4); -webkit-transform: scale(2,4); /* Safari and Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ } 12/04/2017 By : Suwondo, S.Kom

14 CSS3 2D Transform Skew (x-axis-degree, y-axis-degree): div { transform: skew(30deg,20deg); -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ } Matrix (n, n, n, n, n, n): div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ } 12/04/2017 By : Suwondo, S.Kom

15 CSS3 3D Transform 12/04/2017 By : Suwondo, S.Kom

16 CSS3 3D Transform 12/04/2017 By : Suwondo, S.Kom

17 CSS3 3D Transform Contoh :
div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari and Chrome */ } 12/04/2017 By : Suwondo, S.Kom

18 CSS3 Transition 12/04/2017 By : Suwondo, S.Kom

19 CSS3 Transition Contoh Effect transisi dengan property width dengan durasi 2 detik : div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } Catatan: Jika durasi yang tidak ditentukan, transisi tidak akan berpengaruh, karena nilai default adalah 0. div { transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; } 12/04/2017 By : Suwondo, S.Kom

20 CSS3 Multiple Column 12/04/2017 By : Suwondo, S.Kom

21 CSS3 Multiple Column 12/04/2017 By : Suwondo, S.Kom

22 CSS3 Multiple Column Contoh : div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; } div { -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; } div { -moz-column-rule:3px outset #ff00ff; /* Firefox */ -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */ column-rule:3px outset #ff00ff; } 12/04/2017 By : Suwondo, S.Kom

23 CSS3 User Interface 12/04/2017 By : Suwondo, S.Kom

24 CSS3 User Interface 12/04/2017 By : Suwondo, S.Kom

25 CSS3 User Interface Contoh : div { resize:both; overflow:auto; } div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left; } div { border:2px solid black; outline:2px solid red; outline-offset:15px; } 12/04/2017 By : Suwondo, S.Kom