css 3 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
CSS 3 PowerPoint Presentation
Download Presentation
CSS 3

Loading in 2 Seconds...

play fullscreen
1 / 22

CSS 3 - PowerPoint PPT Presentation


  • 137 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CSS 3' - glenys


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
pengertian css3
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.

slide3

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

slide4

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>

slide5

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

slide6

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.

css3 rounded corners
CSS3 Rounded corners

Menambahkansudutdibulatkandalam CSS2 ini rumit. Kamiharusmenggunakangambaryangberbedauntuksetiapsudut.

Dalam CSS3, menciptakansudutdibulatkanmudah.

Dalam CSS3, propertiborder-radiusdigunakanuntukmembuatsudut bulat:

slide8

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

css3 box shadow
CSS3 BOX SHADOW

Dalam CSS3, propertikotak-shadowdigunakanuntukmenambahkanbayangan ke kotak:

slide10

<html>

<head>

<style>

div

{

width:300px;

height:100px;

background-color:blue;

box-shadow: 10px 10px 5px #888888;

}

</style>

</head>

<body>

<div></div>

</body>

</html>

slide12

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

slide13

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

slide14

Bagaimana cara kerjanya?

CSS3 transisiadalahefekyangmemungkinkan elemen secarabertahapberubahdarisatugayayang lain.

Untukmelakukan ini, Anda harusmenentukan dua hal:

1. Tentukanproperti CSS Anda ingin menambahkanefek ke

2. Tentukandurasiefek.

slide15

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

slide16

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>

properti warna pada css3
Properti WARNA pada CSS3

Properti BACKGROUND pada CSS3

animasi css3
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.

slide20

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