css (cascading style sheet) - alifcintaibu.files.wordpress.com · – singkatannya cascading style...
TRANSCRIPT
![Page 1: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/1.jpg)
CSS (Cascading Style Sheet)
![Page 2: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/2.jpg)
• CSS ??????– Singkatannya Cascading Style Sheet– Adalah suatu teknologi yang digunakan untuk
memperindah tampilan halaman website.– Tujuan dari penggunaan CSS ini adalah
supaya diperoleh suatu kekonsistenan style pada elemen tertentu.
– Singkatnya kita bisa mempercantik situs kita dengan cepat secara keseluruhan warna dan tampilan yang ada di situs kita.
• Syarat – syarat belajar CSS ?????????– Anda paling tidak sudah tau code-code HTML
CSS
![Page 3: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/3.jpg)
• CSS adalah standar pembuatan dan pemakaian style (font, warna, jarak baris, dll) untuk dokumen terstruktur
• CSS memisahkan presentation sebuah dokumen dari content dokumen itu sendiri
• CSS memudahkan pembuatan dan pemeliharaan dokumen web
• Setiap User Agent mempunyai default style sheetPendefinisian rule CSS pada sebuah dokumen akan menimpa rule pada default style sheet
• Spesifikasi CSS1, http://www.w3.org/TR/REC-CSS1• Spesifikasi CSS2, http://www.w3.org/TR/REC-CSS2• Spesifikasi CSS3, http://www.w3.org/TR/REC-CSS3
![Page 4: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/4.jpg)
Berbagai Cara Penulisan Code CSS
• CSS dapat dituliskan pada bagian <body>,
• <head> suatu dokumen HTML atau diletakkan
di sebuah file eksternal.• Perintah-perintah CSS dibatasi oleh tag
<style>dan </style>
![Page 5: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/5.jpg)
Sintaks Rule
• Style sheet didefinisikan dalam bentuk rule, terdiri dari:– Selector– Declaration : property & value
• Contoh rule :h1 { color: blue } Keterangan:– Selector : h1– Property : color– Value : blue
• Seluruh elemen (tag) HTML dapat digunakan sebagai selector
![Page 6: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/6.jpg)
• CSS1 :– Fonts– Text– Color– Backgrounds– Block-level Elements
![Page 7: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/7.jpg)
• CSS2 :– Positioning– Visual Formatting– Media Types– Interfaces
![Page 8: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/8.jpg)
• CSS3 :– User Interfaces– Accessibility– Columnar layout– International Features– Mobile Devices– Scalable Vector Graphics
![Page 9: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/9.jpg)
Mekanisme Mengaplikasikan CSS
CARA PERTAMA : Inline Style Sheet mengetikkan langsung dalam tag html sebagai atribut .
<body>
<b style = “color : blue”> teks tebal dan biru </b>
</body>
![Page 10: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/10.jpg)
CARA KEDUA : Embedded Style Sheet Menggunakan tag style di dalam tag head.
<head> <style type=“text/css”>
……… style definitions ………
</style></head>
![Page 11: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/11.jpg)
Style definitions : adalah defenisi style yang ingin dibuat.
Format penulisannya adalah :
Selector adalah tag yang digunakan web browser.
Property : value adalah efek dari style yang diinginkan untuk selector.
Selector { property1 : value1 ; property2 : value2;….propertyN : valueN ; }
![Page 12: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/12.jpg)
![Page 13: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/13.jpg)
![Page 14: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/14.jpg)
CARA KETIGA : Linked Style SheetMenyimpan informasi style ke dalam sebuah
file dengan ekstensi/type file cssMemanggil file css dalam html dengan tag
link yang diletakkan dalam tag head.
<head>
<link rel=“stylesheet” type=“text/css” href=“namafile.css”/>
</head>
![Page 15: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/15.jpg)
![Page 16: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/16.jpg)
<HTML><HEAD></HEAD><BODY>P: Mengapa jika kita anggap <B><FONT COLOR="Lime">suatupekerjaan</FONT></B> itu mudah maka pekerjaan itu akanbeneran menjadi<B><FONT COLOR="Lime"> lebih mudah</FONT></B>?<P>J: Karena itu merupakan <B><FONT COLOR="Lime">sugesti</FONT></B> terhadap <B><FONT COLOR="Lime">diri kitasendiri </FONT></B></BODY></HTML>
Contoh code Tidak Dengan CSSSekarang coba bayangkan bagaimana jika kita ingin membuat warna pada huruf-huruf yang ditebalkan itu ?katakan saja kita ingin mewarnainya dengan warna hijau…..
![Page 17: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/17.jpg)
<HTML><HEAD><STYLE TYPE="text/css">B { color : lime }</STYLE></HEAD><BODY>P: Mengapa jika kita anggap <B>suatu pekerjaan</B> itu mudahmaka pekerjaan itu akan beneran menjadi<B> lebih mudah</B> ?<P>J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kitasendiri</B></BODY></HTML>
Contoh code Dengan CSS
![Page 18: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/18.jpg)
Grouping & Inheritance
• Grouping (pengelompokan) :– Selector : h1, h2, h3 { font-family: arial }– Declaration : h1 { font-weight: bold; font-size: 14pt }– Value : h1 { font: bold 12pt arial }
• Inheritance (pewarisan) :Bila style tidak didefinisikan, maka akan digunakan definisi style dari
induknya<html> <head> <style type="text/css"> body {color: navy} h1 {font-family: Arial} b {text-decoration: underline} </style> </head> <body> <h1>Ini <b>Homepage</b> Saya</h1> Ini adalah homepage yang menggunakan CSS. </body></html>
![Page 19: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/19.jpg)
Macam-macam Selector• Tag (elemen) HTML
h1 {color: green}
i {font-style: normal}
• Class.mhs {border: black solid 1; color: gray}
.nama {font: bold 20 Arial}
• ID#mhs02 {color: red}
• Kontekstualh1 i {color: navy}
div.mhs .alamat b {color: green}<h1>Daftar Mahasiswa <i>Student Exchange</i></h1><div id="mhs01" class="mhs"> <span class="nama">Adrian Marzuki</span><br> <span class="alamat">Jl. Tubagus Ismail XI/5 <b>Bandung</b></span></div><div id="mhs02" class="mhs"> <span class="nama">Dewi Purnama</span><br> <span class="alamat">Jl. Cisitu Lama 24 <b>Bandung</b></span></div><i>Last updated 10 September 2003</i>
![Page 20: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/20.jpg)
Contoh :<style type=“text/css” > hr { color : red ; height : 5px ; width : 50%; }</style>
Keterangan :Tag adalah styleAtribut adalah type=“text/css”Selector adalah hrProperty adalah color, height, widthValue adalah red, 5px, 50%
![Page 21: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/21.jpg)
ID SELECTOR dan CLASS
ID selector didefenisikan sendiriID selector diawali tanda # ( octothorpe)CLASS diawali dengan tanda titik ( . )
![Page 22: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/22.jpg)
![Page 23: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/23.jpg)
Selector
• Adalah nama yang diberikan untuk setiap style berbeda
yang dibuat. Di dalam style didefinisikan bagaimana
setiap selector akan bekerja (font, color dan lain-lain.).
Kemudian di dalam bagian body halaman web, selector
tersebut dipanggil untuk mengaktifkan style yang telah
didefinisikan.• Jenis-jenis Selector:
• Selector HTML• Selector Class• Selector ID
![Page 24: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/24.jpg)
PENULISAN PADA TAG DENGAN ATRIBUT STYLE
![Page 25: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/25.jpg)
PENULISAN PADA HEAD
![Page 26: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/26.jpg)
PENULISAN DENGAN CLASS
![Page 27: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/27.jpg)
PENULISAN DENGAN ID
![Page 28: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/28.jpg)
SPAN dan DIV• Dua tag yang sering dikombinasikan dengan selector class
adalah<SPAN> dan <DIV>• Tag <SPAN> adalah "inline-tag" dalam HTML, berarti tidak
adapergantian baris (line break) yang disisipkan sebelum atau
setelahpenulisannya.• Tag <DIV> adalah "block tag" dalam HTML, berarti
pergantian barissecara otomatis disisipkan untuk memberikan jarak antara blokyang dibuat dengan teks atau blok lain sebelum dan
sesudahnya(seperti tag <P> atau <TABLE>).• Tag <DIV> sering digunakan untuk implementasi layer
karenalayer merupakan blokblok informasi terpisah. Tag <DIV>merupakan pilihan yang tepat saat membuat layer pada
halamanweb.
![Page 29: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/29.jpg)
CSS3CSS3
![Page 30: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/30.jpg)
CSS3 BorderCSS3 BorderDengan 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
![Page 31: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/31.jpg)
CSS3 BorderCSS3 Border
31
![Page 32: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/32.jpg)
CSS3 BorderCSS3 BorderCSS3 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) 30 30 round;-moz-border-image:url(border.png) 30 30 round; /* Firefox */-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
}
![Page 33: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/33.jpg)
CSS3 BackgroundCSS3 Background
![Page 34: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/34.jpg)
CSS3 BackgroundCSS3 BackgroundBackground 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;
}
![Page 35: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/35.jpg)
CSS3 BackgroundCSS3 BackgroundBackground 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;}
![Page 36: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/36.jpg)
CSS3 BackgroundCSS3 BackgroundMultiple Background
body{
background-image:url(img_flwr.gif),url(img_tree.gif);}
![Page 37: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/37.jpg)
CSS3 Text EffectCSS3 Text Effect
![Page 38: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/38.jpg)
CSS3 Text EffectCSS3 Text EffectText Shadow
h1{
text-shadow: 5px 5px 5px #FF0000;}
Text Word Wrapping
p {word-wrap:break-word;}
![Page 39: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/39.jpg)
CSS3 2D TransformCSS3 2D Transform
![Page 40: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/40.jpg)
CSS3 2D TransformCSS3 2D TransformMethod 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 */
}
07/12/12 By : Suwondo, S.Kom 40
![Page 41: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/41.jpg)
CSS3 2D TransformCSS3 2D TransformSkew (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 */}
![Page 42: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/42.jpg)
CSS3 3D TransformCSS3 3D Transform
![Page 43: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/43.jpg)
CSS3 3D TransformCSS3 3D Transform
![Page 44: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/44.jpg)
CSS3 3D TransformCSS3 3D Transform
Contoh :div
{transform: rotateY(130deg);-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}
![Page 45: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/45.jpg)
CSS3 TransitionCSS3 Transition
![Page 46: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/46.jpg)
CSS3 TransitionCSS3 TransitionContoh 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;}
![Page 47: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/47.jpg)
CSS3 Multiple ColumnCSS3 Multiple Column
![Page 48: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/48.jpg)
CSS3 Multiple ColumnCSS3 Multiple Column
![Page 49: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/49.jpg)
CSS3 Multiple ColumnCSS3 Multiple ColumnContoh :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;}
![Page 50: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/50.jpg)
CSS3 User InterfaceCSS3 User Interface
![Page 51: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/51.jpg)
CSS3 User InterfaceCSS3 User Interface
![Page 52: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/52.jpg)
CSS3 User InterfaceCSS3 User InterfaceContoh :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;}
![Page 53: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/53.jpg)
Resources 1
• http://www.csszengarden.com– This is CSS at its finest
• http://www.w3.org/Style/CSS/– The Official CSS Site
• http://css.maxdesign.com.au/– Australian firm, very professional
• http://webmonkey.wired.com/webmonkey/reference/stylesheet_guide– Where I learned CSS and Web Design
![Page 54: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/54.jpg)
Resources 2• HTML-Kit editor – http://chami.com/• Amaya editor – http://www.w3c.org/Amaya• W3schools XHTML and CSS tutorials –
http://www.w3schools.com/• Web Head Start tutorials – http://www.webheadstart.org/• Tidy Web Interface -
http://www.washington.edu/webinfo/tidy.cgi• CSS Validator - http://jigsaw.w3.org/css-validator/• Dave Raggett XHTML and CSS tutorials -
http://www.w3.org/MarkUp/Guide/Overview.html• Web Accessibility in Mind (WebAIM) -
http://www.webaim.org/• Color contrast analyzer -
http://www.visionaustralia.org.au/info.aspx?page=628• Stylin’ With CSS, A Designer’s Guide, Second Edition by
Charles Wyke-Smith
![Page 55: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman](https://reader031.vdocuments.site/reader031/viewer/2022021811/5ccc42af88c993d2098bc223/html5/thumbnails/55.jpg)
Mari Perdalam Materi!!!• Silahkan pelajari lebih dalam tentang berbagai
style pada CSS ( 1-3): Color & Background Font Text List Box Model Visual Formatting Model (normal & float) User Interface & Downloadable Font Media Types Visual Effects Positioning Scheme