Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

CSS3CSS3 15/04/20151By : Suwondo, S.Kom. CSS3 Border Dengan CSS3, Anda dapat membuat batas bulat, menambahkan bayangan ke kotak, dan menggunakan gambar.

Presentasi serupa


Presentasi berjudul: "CSS3CSS3 15/04/20151By : Suwondo, S.Kom. CSS3 Border Dengan CSS3, Anda dapat membuat batas bulat, menambahkan bayangan ke kotak, dan menggunakan gambar."— Transcript presentasi:

1 CSS3CSS3 15/04/20151By : 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 15/04/20152By : Suwondo, S.Kom

3 CSS3 Border 15/04/2015By : Suwondo, S.Kom3

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 */ } 15/04/2015By : Suwondo, S.Kom4

5 CSS3 Background 15/04/2015By : Suwondo, S.Kom5

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; } 15/04/2015By : Suwondo, S.Kom6

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; } 15/04/2015By : Suwondo, S.Kom7

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

9 CSS3 Text Effect 15/04/2015By : Suwondo, S.Kom9

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

11 CSS3 2D Transform 15/04/2015By : Suwondo, S.Kom11

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 */ } 15/04/2015By : Suwondo, S.Kom12

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 */ } 15/04/2015By : Suwondo, S.Kom13

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 */ } 15/04/2015By : Suwondo, S.Kom14

15 CSS3 3D Transform 15/04/2015By : Suwondo, S.Kom15

16 CSS3 3D Transform 15/04/2015By : Suwondo, S.Kom16

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

18 CSS3 Transition 15/04/2015By : Suwondo, S.Kom18

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; } 15/04/2015By : Suwondo, S.Kom19

20 CSS3 Multiple Column 15/04/2015By : Suwondo, S.Kom20

21 CSS3 Multiple Column 15/04/2015By : Suwondo, S.Kom21

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; } 15/04/2015By : Suwondo, S.Kom22

23 CSS3 User Interface 15/04/2015By : Suwondo, S.Kom23

24 CSS3 User Interface 15/04/2015By : Suwondo, S.Kom24

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; } 15/04/2015By : Suwondo, S.Kom25


Download ppt "CSS3CSS3 15/04/20151By : Suwondo, S.Kom. CSS3 Border Dengan CSS3, Anda dapat membuat batas bulat, menambahkan bayangan ke kotak, dan menggunakan gambar."

Presentasi serupa


Iklan oleh Google