Ini adalah tugas multimedia lanjut STMIK AMIKOM YOGYAKARTA, jadi disini membahas web dari beberapa smartphone, yang mana dinlai dari gui, navigasi, dan lain sebagainya. Bisa didownload memlaui 4shared here.
Home » Archive for April 2014
Temperamen dasar manusia
YAh padahal gue jam 10.30 ujian, tapi masih aja ada tugas, yaudah nih comot.
4 TEMPERAMEN DASAR MANUSIA
Dasar teori temperamen pada awalnya diciptakan oleh Hippocrates sekitar lebih dari 2400 tahun yang lalu. Hippocrates membagi manusia menjadi 4 temperamen dasar dan memberi nama kepada masing-masing temperamen itu sanguin,kolerik,melankolis, dan phlegmatis. Masing-masing temperamen memiliki ciri khas tersendiri, berikut akan dipaparkan mengenai hal tersebut.
A. Sanguin
Sifat-sifat Umum
Seorang sanguin adalah seorang yang periang, hangat, dan menyenangkan. Secara alamiah, ia adalah seorang yang terbuka dan mudah memberikan sambutan. Sanguin suka berbicara bahkan mendominasi pembicaraan. Ia boleh disebutkan sebagai orang yang superekstrovert. Ia mempunyai kapasitas yang luar biasa untuk menyenangkan dirinya dan orang lain. Pada saat ia bergabung dengan sekelompok orang, ia akan segera mengangkat semangat semua orang dengan kata-kata, lelucon yang diberikannya. Ia adalah seorang yang ahli dalam menyampaikan cerita serta menceritakan sesuatu dengan benar-benar hidup dan dramatis.
Seorang sanguin tidak pernah kehilangan kawan, sebab ia sangat terbuka secara spontan. Ia tidak pernah kehilangan kata-kata walaupun kadang ketika ia berbicara tidak dipikirkan terlebih dulu. Ia selalu dikelilingi teman-temannya, di mana ia menjadi pusat perhatian. Ia menjadi favorit dari anak-anak maupun orang dewasa karena cerita-cerita atau leluconnya yang tak pernah berakhir. karena sikapnya yang periang, ramah, dan suka berkawan, ia sering kelihatan memiliki keyakinan lebih daripada sebenarnya.
B. Koleris
Mereka suka sekali mengatur orang, suka tunjuk-tunjuk atau perintah-perintah orang. Ia tak ingin ada penonton dalam aktivitasnya. Bahkan tamu pun bisa saja ia suruh melalukan sesuatu untuknya. Akibat sifatnya yang `bossy’ sehingga orang koleris tak punya banyak teman. Orang-orang berusaha menghindar, menjauh agar tak jadi `korban’ karakternya yang suka `ngatur’ dan tak mau kalah itu.
Orang koleris senang dengan tantangan, suka petualangan. Mereka punya rasa, “hanya saya yang bisa menyelesaikan segalanya; tanpa saya berantakan semua”. Karena itu mereka sangat “goal oriented”, tegas, kuat, cepat dan tangkas mengerjakan sesuatu. Baginya tak ada istilah tidak mungkin. Seorang wanita koleris, mau dan berani naik tebing, memanjat pohon, bertarung ataupun memimpin peperangan. Kalau ia sudah kobarkan semangat “ya pasti jadi”, maka hampir dapat dipastikan apa yang akan ia lakukan akan tercapai seperti yang ia katakan. Sebab ia tak mudah menyerah, serta tak mudah pula mengalah.
C. Melankolis
Mereka agak agak berseberangan dengan sanguinis. Seorang melankolis cenderung serba teratur, rapi, terjadwal, tersusun sesuai pola. Umumnya mereka ini suka dengan fakta-fakta, data-data, angka-angka dan sering sekali memikirkan segalanya secara mendalam. Dalam sebuah pertemuan, orang sanguinis selalu saja mendominasi pembicaraan, namun orang melankolis cenderung menganalisa, memikirkan, mempertimbangkan, lalu kalau bicara pastilah apa yang ia katakan betul-betul hasil yang ia pikirkan secara mendalam sekali.
Orang melankolis selalu ingin serba sempurna dan ingin teratur. Karena itu jangan heran jika balita anda yang `melankolis tak `kan bisa tidur hanya gara-gara selimut yang membentangi tubuhnya belum tertata rapi. Dan jangan pula coba-coba mengubah isi lemari yang telah ia disusun, sebab betul-betul ia tata-apik sekali, sehingga warnanya, jenisnya, klasifikasi pemakaiannya sudah ia perhitungkan dengan rapi. Kalau perlu ia tuliskan satu per satu tata letak setiap jenis pakaian tersebut. Ia akan dongkol sekali kalau susunan itu tiba-tiba jadi lain
Mereka agak agak berseberangan dengan sanguinis. Seorang melankolis cenderung serba teratur, rapi, terjadwal, tersusun sesuai pola. Umumnya mereka ini suka dengan fakta-fakta, data-data, angka-angka dan sering sekali memikirkan segalanya secara mendalam. Dalam sebuah pertemuan, orang sanguinis selalu saja mendominasi pembicaraan, namun orang melankolis cenderung menganalisa, memikirkan, mempertimbangkan, lalu kalau bicara pastilah apa yang ia katakan betul-betul hasil yang ia pikirkan secara mendalam sekali.
Orang melankolis selalu ingin serba sempurna dan ingin teratur. Karena itu jangan heran jika balita anda yang `melankolis tak `kan bisa tidur hanya gara-gara selimut yang membentangi tubuhnya belum tertata rapi. Dan jangan pula coba-coba mengubah isi lemari yang telah ia disusun, sebab betul-betul ia tata-apik sekali, sehingga warnanya, jenisnya, klasifikasi pemakaiannya sudah ia perhitungkan dengan rapi. Kalau perlu ia tuliskan satu per satu tata letak setiap jenis pakaian tersebut. Ia akan dongkol sekali kalau susunan itu tiba-tiba jadi lain
D. Plegmatis
Mereka tak suka terjadi konflik, karena itu disuruh apa saja ia mau lakukan, meski ia tidak suka. Baginya kedamaian adalah segalanya. Jika timbul masalah ia akan berusaha mencari solusi yang damai tanpa timbul pertengkaran. Ia mau merugi sedikit atau rela sakit, asalkan masalahnya segera selesai.
Kaum plegmatis kurang bersemangat, kurang teratur dan serba dingin, cenderung diam, kalem, dan kalau memecahkan masalah umumnya sangat menyenangkan. Dengan sabar ia mau jadi pendengar yang baik, tapi kalau disuruh untuk mengambil keputusan ia akan terus menunda-nunda. Kalau anda lihat tiba-tiba ada sekelompok orang berkerumun mengelilingi satu orang yang asyik bicara terus, maka pastilah para pendengar yang berkerumun itu orang-orang plegmatis. Sedang yang bicara tentu saja sanguinis.
Berurusan dengan orang plegmatis bisa serba salah. Ibarat keledai, “kalau didorong ngambek, tapi kalau dibiarin tiak jalan”. Jika kita punya pegawai plegmatis, anda harus rajin memotivasinya sampai ia termotivasi sendiri.
Mereka tak suka terjadi konflik, karena itu disuruh apa saja ia mau lakukan, meski ia tidak suka. Baginya kedamaian adalah segalanya. Jika timbul masalah ia akan berusaha mencari solusi yang damai tanpa timbul pertengkaran. Ia mau merugi sedikit atau rela sakit, asalkan masalahnya segera selesai.
Kaum plegmatis kurang bersemangat, kurang teratur dan serba dingin, cenderung diam, kalem, dan kalau memecahkan masalah umumnya sangat menyenangkan. Dengan sabar ia mau jadi pendengar yang baik, tapi kalau disuruh untuk mengambil keputusan ia akan terus menunda-nunda. Kalau anda lihat tiba-tiba ada sekelompok orang berkerumun mengelilingi satu orang yang asyik bicara terus, maka pastilah para pendengar yang berkerumun itu orang-orang plegmatis. Sedang yang bicara tentu saja sanguinis.
Berurusan dengan orang plegmatis bisa serba salah. Ibarat keledai, “kalau didorong ngambek, tapi kalau dibiarin tiak jalan”. Jika kita punya pegawai plegmatis, anda harus rajin memotivasinya sampai ia termotivasi sendiri.
KOLERIS pada umumnya mempunyai:
KEKUATAN:
* Senang memimpin, membuat keputusan, dinamis dan aktif
* Sangat memerlukan perubahan dan harus mengoreksi kesalahan
* Berkemauan keras dan pasti untuk mencapai sasaran/ target
* Bebas dan mandiri
* Berani menghadapi tantangan dan masalah
* "Hari ini harus lebih baik dari kemarin, hari esok harus lebih baik dari hari ini".
* Mencari pemecahan praktis dan bergerak cepat
* Mendelegasikan pekerjaan dan orientasi berfokus pada produktivitas
* Membuat dan menentukan tujuan
* Terdorong oleh tantangan dan tantangan
* Tidak begitu perlu teman
* Mau memimpin dan mengorganisasi
* Biasanya benar dan punya visi ke depan
* Unggul dalam keadaan darurat
KELEMAHAN:
* Tidak sabar dan cepat marah (kasar dan tidak taktis)
* Senang memerintah
* Terlalu bergairah dan tidak/susah untuk santai
* Menyukai kontroversi dan pertengkaran
* Terlalu kaku dan kuat/ keras
* Tidak menyukai air mata dan emosi tidak simpatik
* Tidak suka yang sepele dan bertele-tele / terlalu rinci
* Sering membuat keputusan tergesa-gesa
* Memanipulasi dan menuntut orang lain, cenderung memperalat orang lain
* Menghalalkan segala cara demi tercapainya tujuan
* Workaholics (kerja adalah "tuhan"-nya)
* Amat sulit mengaku salah dan meminta maaf
* Mungkin selalu benar tetapi tidak populer
Kalau MELANKOLIS:
KEKUATAN:
* Analitis, mendalam, dan penuh pikiran
* Serius dan bertujuan, serta berorientasi jadwal
* Artistik, musikal dan kreatif (filsafat & puitis)
* Sensitif
* Mau mengorbankan diri dan idealis
* Standar tinggi dan perfeksionis
* Senang perincian/memerinci, tekun, serba tertib dan teratur (rapi)
* Hemat
* Melihat masalah dan mencari solusi pemecahan kreatif (sering terlalu kreatif)
* Kalau sudah mulai, dituntaskan.
* Berteman dengan hati-hati.
* Puas di belakang layar, menghindari perhatian.
* Mau mendengar keluhan, setia dan mengabdi
* Sangat memperhatikan orang lain
KELEMAHAN:
* Cenderung melihat masalah dari sisi negatif (murung dan tertekan)
* Mengingat yang negatif & pendendam
* Mudah merasa bersalah dan memiliki citra diri rendah
* Lebih menekankan pada cara daripada tercapainya tujuan
* Tertekan pada situasi yg tidak sempurna dan berubah-ubah
* Melewatkan banyak waktu untuk menganalisa dan merencanakan (if..if..if..)
* Standar yang terlalu tinggi sehingga sulit disenangkan
* Hidup berdasarkan definisi
* Sulit bersosialisasi
* Tukang kritik, tetapi sensitif terhadap kritik/ yg menentang dirinya
* Sulit mengungkapkan perasaan (cenderung menahan kasih sayang)
* Rasa curiga yg besar (skeptis terhadap pujian)
* Memerlukan persetujuan
Kalau PLEGMATIS:
KEKUATAN:
* Mudah bergaul, santai, tenang dan teguh
* Sabar, seimbang, dan pendengar yang baik
* Tidak banyak bicara, tetapi cenderung bijaksana
* Simpatik dan baik hati (sering menyembunyikan emosi)
* Kuat di bidang administrasi, dan cenderung ingin segalanya terorganisasi
* Penengah masalah yg baik
* Cenderung berusaha menemukan cara termudah
* Baik di bawah tekanan
* Menyenangkan dan tidak suka menyinggung perasaan
* Rasa humor yg tajam
* Senang melihat dan mengawasi
* Berbelaskasihan dan peduli
* Mudah diajak rukun dan damai
KELEMAHAN:
* Kurang antusias, terutama terhadap perubahan/ kegiatan baru
* Takut dan khawatir
* Menghindari konflik dan tanggung jawab
* Keras kepala, sulit kompromi (karena merasa benar)
* Terlalu pemalu dan pendiam
* Humor kering dan mengejek (Sarkatis)
* Kurang berorientasi pada tujuan
* Sulit bergerak dan kurang memotivasi diri
* Lebih suka sebagai penonton daripada terlibat
* Tidak senang didesak-desak
* Menunda-nunda / menggantungkan masalah.
Kalau SANGUINIS:
KEKUATAN:
* Suka bicara
* Secara fisik memegang pendengar, emosional dan demonstratif
* Antusias dan ekspresif
* Ceria dan penuh rasa ingin tahu
* Hidup di masa sekarang
* Mudah berubah (banyak kegiatan / keinginan)
* Berhati tulus dan kekanak-kanakan
* Senang kumpul dan berkumpul (untuk bertemu dan bicara)
* Umumnya hebat di permukaan
* Mudah berteman dan menyukai orang lain
* Senang dengan pujian dan ingin menjadi perhatian
* Menyenangkan dan dicemburui orang lain
* Mudah memaafkan (dan tidak menyimpan dendam)
* Mengambil inisiatif/ menghindar dari hal-hal atau keadaan yang membosankan
* Menyukai hal-hal yang spontan
KELEMAHAN:
* Suara dan tertawa yang keras (terlalu keras)
* Membesar-besarkan suatu hal / kejadian
* Susah untuk diam
* Mudah ikut-ikutan atau dikendalikan oleh keadaan atau orang lain (suka nge-Gank)
* Sering minta persetujuan, termasuk hal-hal yang sepele
* RKP! (Rentang Konsentrasi Pendek)
* Dalam bekerja lebih suka bicara dan melupakan kewajiban (awalnya saja antusias)
* Mudah berubah-ubah
* Susah datang tepat waktu jam kantor
* Prioritas kegiatan kacau
* Mendominasi percakapan, suka menyela dan susah mendengarkan dengan tuntas
* Sering mengambil permasalahan orang lain, menjadi seolah-olah masalahnya
* Egoistis
* Sering berdalih dan mengulangi cerita-cerita yg sama
* Konsentrasi ke "How to spend money" daripada "How to earn/save money".
Related Posts:
PENGERTIAN CSS 3 LENGKAP
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
Backgrounds
Text Effects
User-interface
Selectors
Basic box model
Generated Content
Other modules
Animasi transisi menggunakan CSS3
<!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>
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
·
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.
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.
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.
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.
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
NB
Makalah ini dibuat untuk tugas admin, mohon cantumkan sumber apabila ingin copas.
Related Posts:
Subscribe to:
Posts (Atom)