Oke mbak bro dan mas sist, sabtu yang bakalan suram ini (read=jomblo) admin keren sekampus mau ngasih tau pengertian css3. Sekalian gitu sambil ngerjain tugas kebetulan tentang css3. okeh silahkan disimak

PEMROGRAMAN WEB

CSS [Cascading Style Sheet] III (CSS 3)

Dosen : Ahlihi Masruro, S.Kom

Nama = Erwin Sudrajat

Nim = 12.11.6600

Kelas = 12-SITI-13

STMIK AMIKOM YOGYAKARTA

2013/2014

Kata Pengantar

Puji syukur atas kehadirat Allah SWT, karena atas berkat dan rahmatnya tugas makalah ini dapat selesai dengan baik. Tak lupa salawat selalu tercurahkan kepada Nabi besar Muhammad SAW Makalah Pemrograman Web ini dapat terselesaikan tepat pada waktunya tanpa ada halangan suatu apapun. Semoga makalah ini bermanfaat dan kedepanya dapat dikembangkan lagi dengan baik.

Dan juga Terimakasih kepada bapak dosen Ahlihi Masruro, S.Kom selaku dosen pemograman web yang telah memberikan arahan sehingga makalah ini dapat terselesaikan dengan baik. Dan saya selaku penulis makalah ini masih sangat membutuhkan saran dan masukkan apabila didalam penulisan makalah ini masih terdapat kesalahan ataupun kekurangan.

Yogyakarta, 6 April 2014

Penulis

DAFTAR ISI

KATA PENGANTAR

BAB I PENDAHULUAN…………………………………………………………………

A. LATAR BELAKANG……………………………………………………..

B. TUJUAN………………………………………………………………….

BAB II ISI

A. PENGERTIAN…………………………………………………………..

B. PEMBAHASAN…………………………………………………………

C. PENGAPLIKASIAN CSS 3

BAB III PENUTUP……………………………………………………………………….

A. KESIMPULAN……………………………………………………………

BAB IV DAFTAR PUSTAKA……………………………………………………………

BAB I

A. LATAR BELAKANG

CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah yang dibentuk dari berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi konflik style. CSS yaitu salah satu bahasa pemrograman web yang mengatur komponen dalam suatu web supaya web lebih terstruktur dan lebih seragam. Seiring dengan majunya teknologi munculah CSS versi 3, yang mana mampu melakukan banyak hal dalam desain website. melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object.

B. TUJUAN

Tugas ini dibuat sebagai pengganti jam kosong pada mata kuliah pemrograman web, dan juga sebagai pembelajaran untuk mahasiswa khusunya penulis. Tugas ini adalah membahas semua tentang CSS 3.

BAB II

A. Pengertian

CSS3 adalah Cascading Style Sheet versi ke 3, yaitu pengatur dan pengendali tampilan sebuah halaman blog/ web. CSS3 melakukan penataan terhadap komponen HTML maupun XHTML pada halaman web sehingga menghasilkan tampilan yang ramah dimata atau retina friendly. CSS (teknologi gaya tampilan web) pada mulanya dipelopori dan dikembangkan serta distandarisasi oleh World Wide Web Consortium atau W3C pada tahun 1996.

B. Pembahasan

CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model. 1. Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight.

2. Beberapa efek teks, seperti teks berbayang, kolom koran dan "Word-Wrap".

3. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan bayangan

Keuntungan menggunakan CSS :

Untuk mengatur dan memperindah tampilan web (lebih rapi).

Lebih praktis dan menghemat penggunaan tag yang berulang-ulang.

Bisa digunakan pada website atau webpage yang lain, misalnya website kita mempunyai 5 halaman (webpage), maka kita tidak perlu membuat pengaturan tampilan atau menulis ulang code-code untuk mengatur tata letak tampilan pada masing-masing halaman/page sebanyak lima kali. Kita bisa memanfaatkan code yang sudah ada dengan memanggil tag CSS yang dibuat pada file terpisah (file.css).

Selain itu keguna’an css3 adalah sebagi berikut

CSS atau Cascading StyleSheet ini berguna untuk mengatur atau mengendalikan border, line, font, background, dan juga content website kita biar keliatan bagus. Dan sesuai perkembangan ada CSS1, CSS2, dan CSS3. Masing-masing css ini ada perbedaannya.

CSS3 merupakan versi terbaru di css yang mempunyai banyak kelebihan yang dibutuhkan dalam website. Di CSS3 ini kita dapat melakukan animasi juga loooh, mulai dari animasi warna sampai 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query.

Adapun perbedaan css 3 dan css adalah sebagi berikut:

· CSS3 bisa lebih detail untuk mendeklarasikan objek yang akan diberikan style. Contohnya di dalam objek ‘blockquote’ bisa membuat (quote) di awal dan akhirnya menggunakan font lebih besar dari konten blockquote itu sendiri.

· CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek, yang sebelumnya tidak bisa dilakukan oleh CSS2/CSS2.1, dan bisa menggantikan peran gambar. Standar web 2.0 atau situs interaktif dan efisien berdasar dari penggunaan CSS.

· Dengan CSS3 situs akan bisa lebih berkembang dan bisa lebih interaktif lagi dengan pengunjung.

· Bisa mengurangi ukuran file yang di-load dan lebih ringan, secara otomatis mengurangi bandwidth inbound/outbound situs.

· CSS3 tak berbeda jauh dari tingkat-tingkat sebelumnya, hanya saja memiliki performa style yang jauh lebih baik dan tambahan beberapa fungsi yang menarik.

Beberapa Fungsi yang ditawarkan CSS3 antara lain :

Borders

· border-color

· border-image

· border-radius

· box-shadow

Backgrounds

· background-origin dan background-clip

· background-size

· multiple backgrounds

Color

· HSL colors

· HSLA colors

· opacity

· RGBA colors

Text Effects

· text-shadow

· text-overflow

· word-wrap

User-interface

· box-sizing

· resize

· outline

· nav-top, nav-right, nav-bottom, nav-left

Selectors

· attribute selectors

Basic box model

· overflow-x, overflow-y

Generated Content

· content

Other modules

· media queries

· multi-column layout

· Web fonts

· Speech

C. PENGAPLIKASIAN CSS 3

Contoh penggunaan css 3 beserta codingnya:

A. border-color

B. border-image

C. border-rounded

D. border-box-shadow

PENGGUNAAN TRANSFORM

Css3 juga dapat mengatur property transform postion, diantaranya scale, translate, rotate. Untuk menggunakan property ini, kita masih harus menggunakan prefix karena pada beberapa browser property transform masih belum stabil/bahkan tidak ada.

-webkit-transform : fungsiTransform(nilai);

-moz-transform : fungsiTransform(nilai);

-ms-transform : fungsiTransform(nilai);

-o-transform : fungsiTransform(nilai);

transform : fungsiTransform(nilai);

Secara default, titik transformasi berada tepat di tengah-tengah elemen, anda masih bisa merubahnya dengan property webkit-transform-origin, contoh :

-webkit-transform-origin : 0 0;

-moz-transform-origin : 0 0;

-ms-transform-origin : 0 0;

-o-transform-origin : 0 0;

transform-origin : 0 0;

Nilai pertama adalah nilai untuk x dan kedua adalah nilai untuk y. Pada contoh di atas kita menentukan titik transform pada (0,0) atau di ujung kiri atas suatu elemen.

Fungsi-fungsi Transform

Dalam property transform kita bisa menambahkan berbagai macam fungsi transformasi objek, seperti scale, rotate, translate.

Scale

Fungsi scale akan merubah ukuran suatu elemen berdasarkan skala. Ukuran normal dari elemen adalah 1, untuk mengecilkan elemen anda bisa gunakan nilai dibawahnya dan untuk memperbesar anda bisa menggunakan nilai di atasnya.

transform: scale(2);

Agar tidak terlalu panjang, saya tulis property tanpa prefixnya, pada prakteknya nanti anda juga harus menyertakan property yang menggunakan prefixnya juga.

Pada contoh di atas kita merubah ukuran elemen menjadi dua kali lipat. Contoh lainnya :

transform: scale(0.5);

Translate

Fungsi translate berfungsi untuk memindahkan objek ke posisi yang anda inginkan.

transform: translate(20px, 50px);

kode di atas akan memindahkan elemen sejauh 20px dari kiri (x), dan 50px dari atas (y). Jika anda hanya ingin memindahkan objek secara horizontal saja atau secara vertikal, anda dapat menggunakan fungsi translateX, translateY dan translateZ (translateZ akan memindahkan objek ke depan –3D).

transform: translateY(50px);

Rotate

Sesuai dengan artinya, rotate akan memutar elemen sesuai dengan derajat yang diberikan. Nilai untuk fungsi ini memiliki satuan deg, nilai positif akan memutar elemen searah jarum jam, dan nilai negatif akan memutarnya berlawanan arah jarum jam.

transform: rotate(20deg);

Fungsi pada contoh di atas hanya untuk memutar objek secara 2D, Anda juga bisa memutar elemen secara 3D dengan menggunakan rotateX (memutar elemen pada sumbu X) dan rotateY (memutar elemen pada sumbu Y).

transform: rotateX(360deg);

dan

transform: rotate Y(15deg);

Animasi transisi menggunakan CSS3

Dengan CSS3 kita dapat membuat animasi transisi (transition animation )saat terjadi perubahan misalnya karena hover.

Property yang digunakan untuk animasi transisi ini adalah

1. transition-property
Ini merupakan property elemen apa saja yang akan dianimasikan.
Untuk variasi penggunaan di browser menjadi -webkit-transition-property, -moz-transition-property dan -o-transition-property.

2. transition-duration
Ini merupakan lamanya animasi akan dilakukan.
Untuk variasi penggunaan di browser menjadi -webkit-transition-duration, -moz-transition-duration dan -o-transition-duration.

3. transition-timing-function
Ini merupakan cara animasi dilakukan
Untuk variasi penggunaan di browser menjadi -webkit-transition-timing-function, -moz-transition-timing-function dan -o-transition-timing-function.

4. transition-delay
Ini merupakan delay sebelum animasi akan dilakukan.
Untuk variasi penggunaan di browser menjadi -webkit-transition-delay, -moz-transition-delay dan -o-transition-delay.

Sebagai contoh kita akan membuat coding seperti berikut ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Animasi transisi</title>
<style type="text/css">
#kotak
{
    width: 200px;
    height: 200px;
    background-color: green;

    -webkit-transition-property: background-color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-delay: 250ms;

    -moz-transition-property: background-color;
    -moz-transition-duration: 2s;
    -moz-transition-timing-function: ease-out;
    -moz-transition-delay: 250ms;

    -o-transition-property: background-color;
    -o-transition-duration: 2s;
    -o-transition-timing-function: ease-out;
    -o-transition-delay: 250ms;

}
#kotak:hover
{
    background-color:red;
}
</style>
</head>
<body>
<div id="kotak">
</div>
</body>
</html>

BAB III PENUTUP

A. KESIMPULAN

Jadi kesimpulanya adalah css 3 ini lebih unggul dibandingkan css sebelumnya, diantaranya pada tampilan karena css3 lebih interaktif, serta lebih mudah dan simple serta dapat menghindari penggunaan tag yang berulang-ulang, dan juga ada kemungkinan besar jQuery sepenuhnya akan tergantikan oleh CSS3. Perkiraan ke depan, tidak ada lagi web yang menggunakan jQuery karena sizenya lebih besar dibanding CSS3. Bukan cuma jQuery, saat ini penggunaan flash juga mulai terakusisi dengan semakin berkembangnya.

BAB IV DAFTAR PUSTAKA

· www.Id.wikipedia.org

· www.W3Schools.com

· www.Developermozilla.org

· www.Css3.com

· www.hongkiat.com

· http://ruizerx.blogspot.com

· http://www.proweb.co.id/

Makalah ini dibuat untuk tugas admin, mohon cantumkan sumber apabila ingin copas.