1 / 22

CSS 3

CSS 3. Pengertian CSS3. Untuk saat ini terdapat tiga versi CSS, yaitu CSS1 , CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML , CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer

glenys
Download Presentation

CSS 3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS 3

  2. Pengertian CSS3 Untuksaat ini terdapattiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkanberpusatpadapemformatandokumen HTML, CSS2 dikembangkanuntukmemenuhikebutuhanterhadap format dokumen agar bisaditampilkan di printer CSS3 adalah versi terbarudari CSS yangmampumelakukanbanyakhaldalamdesain website. CSS3 jugadapatmelakukananimasipadahalaman website, diantaranyaanimasiwarnahinggaanimasi 3D. Dengan CSS3 desainerlebihdimudahkandalamhalkompatibilitaswebsitenyapadasmartphonedengandukunganfiturbaruyakni media query. fiturbarupada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.

  3. <html> <head> <style> div { width:100px; height:75px; background-color:red; border:1px solid black; } div#div2 { transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ } </style> </head> <body> <div>Hello sayasedangmencoba CSS3.</div> <div id="div2">Hellosayasedangmencoba CSS3.</div> </body> </html>

  4. Divsendirimemiliki arti daridivision, tag ini merupakanblockelementyangbergunauntukmenggabungkanataumembuatgrouptag-tag/element-element, baikitublockataupuninlineelementyangada di dalamtag div itusendiri. <html> <head> <title>Div and SPAN </title> </head> <body> <div> <b>DIV</b> <p> Div tag digunakanuntukmengelompokan group element biasnyauntuk block-level element</p> /div> <div align="right”> <b>SPAN</b> <p> Iniadalahdevisikedua. ditulisdenagn alignment kanan.</p> </div> <span style="font-size:25; color:orange”> barisinidalm span denganwarna orange. </span></body></html>

  5. BORDER PADA CSS3 Dengan CSS3, Andadapatmembuatperbatasanbulat, menambahkanbayangan ke kotak, dan menggunakangambarsebagaiperbatasan - tanpamenggunakan program desain, sepertiPhotoshop. Dalam bab iniAndaakanbelajartentangsifat-sifatperbatasanberikut: - border-radius - box-shadow - image perbatasan

  6. BORDER PADA CSS3 Internet Explorer 9 + mendukungborder-radius dan box-shadow. Firefox, Chrome, dan Safari mendukungsemuapropertiperbatasanbaru. Catatan: Safari 5, dan versiyanglebihlanjut, membutuhkanawalan-WebKit-perbatasan-untukgambar. Opera mendukungborder-radius dan box-shadow, tetapimembutuhkanawalan-o-untukperbatasan-gambar.

  7. CSS3 Rounded corners Menambahkansudutdibulatkandalam CSS2 ini rumit. Kamiharusmenggunakangambaryangberbedauntuksetiapsudut. Dalam CSS3, menciptakansudutdibulatkanmudah. Dalam CSS3, propertiborder-radiusdigunakanuntukmembuatsudut bulat:

  8. <html> <head> <style> div { border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300px; border-radius:25px; } </style> </head> <body> <div>Border inimenggunakan property border-radius</div> </body> </html>

  9. CSS3 BOX SHADOW Dalam CSS3, propertikotak-shadowdigunakanuntukmenambahkanbayangan ke kotak:

  10. <html> <head> <style> div { width:300px; height:100px; background-color:blue; box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div></div> </body> </html>

  11. CSS3 Border picture

  12. <html> <head> <style> div {border:15px solid transparent;width:250px;padding:10px 20px;} #round { -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round;} #stretch{ -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 stretch; /* Opera */ border-image:url(border.png) 30 30 stretch; } </style> </head> <body> <p><b>Note:</b> Internet Explorer does not support the border-image property.</p> <p>The border-image property specifies an image to be used as a border.</p> <div id="round">Here, the image is tiled (repeated) to fill the area.</div> <br> <div id="stretch">Here, the image is stretched to fill the area.</div> <p>contohgambarnya</p> <imgsrc="border.png”> </body> </html>

  13. TRANSISI PADA CSS3 CSS3, kitadapatmenambahkanefekketikamengubahdarisatugayayang lain, tanpamenggunakananimasi Flash ataujavascripts. DUKUNGAN BROWSER Internet Explorer 10, Firefox, Chrome, dan Opera mendukungpropertitransisi. Safari membutuhkanawalan-WebKit-. Catatan: Internet Explorer 9, dan versi sebelumnya, tidakmendukungpropertitransisi. Catatan: Chrome 25, dan versi sebelumnya, membutuhkanawalan-WebKit-.

  14. Bagaimana cara kerjanya? CSS3 transisiadalahefekyangmemungkinkan elemen secarabertahapberubahdarisatugayayang lain. Untukmelakukan ini, Anda harusmenentukan dua hal: 1. Tentukanproperti CSS Anda ingin menambahkanefek ke 2. Tentukandurasiefek.

  15. <html> <head> <style> div{width:100px;height:100px;background:red; transition:width2s; -webkit-transition:width 2s; /* Safari */} div:hover {width:300px;} </style> </head> <body> <p><b>Note:</b> dokumeninitidakmendukunguntukdibukadengan Internet Explorer 9 danversisebelumnya.</p> <div></div> <p>Hover over the div element above, to see the transition effect.</p> </body> </html>

  16. Menambahkanefekpadalebar, tinggi, dan transformasi: <html> <head> <style> div {width:100px;height:100px;background:red;transition:width 2s, height 2s; -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */ } div:hover {width:200px;height:200px;transform:rotate(180deg); -webkit-transform:rotate(180deg); /* Safari */ } </style> </head> <body> <div>Hover over me to see the transition effect!</div> </body> </html>

  17. Properti WARNA pada CSS3 Properti BACKGROUND pada CSS3

  18. ANIMASI CSS3 Animasiadalahefekyangmemungkinkan elemen secarabertahapberubahdarisatugayayang lain. Anda dapatmengubahbanyakgayayang Anda inginkan, sebanyakyang Anda inginkan. Tentukan kapan perubahan akan terjadidalampersen, atau kata kunci "dari" dan "untuk", yang sama dengan 0% dan 100%. 0% adalahawaldarianimasi, 100% adalahketikaanimasiselesai. Untukmendukung browser terbaik, Anda harusselalumenentukanbaik 0% dan 100% pemilih.

  19. <html> <head> <style> div{ width:100px; height:100px; background:red; animation:myfirst 5s; -webkit-animation:myfirst 5s; /* Safari and Chrome */ } @keyframes myfirst { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } @-webkit-keyframes myfirst /* Safari and Chrome */ {0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;}} </style> </head> <body> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <p><b>Note:</b> When an animation is finished, it changes back to its original style.</p> <div></div> </body> </html>

More Related