Syairi21

Kumpulan Efek Hover 2D Keren Menggunakan CSS

2017-02-02T19:06:00.000-08:00

Kumpulan Efek Hover 2D Keren Menggunakan CSS

Sebelumnya saya sudah membahas mengenai Kumpulan Efek Hover Background Transisi Menggunakan CSS Anda bisa melihatnya Klik Ini. Nah pada postingan kali ini, saya akan membahas tentang berbagai macam efek hover menggunakan CSS. Efek ini bisa anda terapkan diberbagai macam objek seperti gambar, tombol, dan lainnya. Tidak perlu berlama-lama langsung contoh efek dibawah ini.

Arahkan atau dekatkan kursor ke kotak

2D Transitions || By : Moh. Syairi

GROW

SHRINK

Bounce In

Bounce Out

Rotate

Grow Rotate

Float

Sink

Lalu begaimana cara membuatnya.?? Kita langsung saja.

Efek Grow (Membesar)

GROW

Efek Shrink (Mengecil)

SHRINK

Efek Bounce In (Memantul Masuk)

BOUNCE IN

Efek Bounce Out (Memantul keluar)

BOUNCE OUT

Efek Rotate (Memutar)

ROTATE

Efek Grow Rotate (Membesar Memutar)

GROW ROTATE

Efek Float (Keatas)

FLOAT

Efek Sink (kebawah)

SINK

Sekian pembahasan Kumpulan Efek Hover 2D Keren Menggunakan CSS , Dilain pembahasan insyaAllah saya akan membahas efek hover yang lainnya. Semoga artikel ini bermanfaat dan menambah wawasan teman-teman.

Kumpulan Efek Hover Background Transisi Menggunakan CSS

2017-01-27T16:43:00.000-08:00

Kumpulan Efek Hover Background Transisi Menggunakan CSS

Pada postingan artikel ini saya membahas mengenai efek-efek hover background transisi yang designnya menggunakan CSS. Cara kerja efek hover ini, yaitu jika kursor diarahkan diatas objek, maka akan memberikan aksi background sesuai efek hover yang diberikan kepada objek tersebut. Anda bisa menerapkan efek hover ini pada objek apapun, seperti background, tombol download, dan lainnya. lebih jelasnya anda bisa mencoba demo dibawah ini.

DEMO ( arahkan KURSOR ke TOMBOL dibawah ini )

Background Transitions || By : Moh. Syairi

Fade

Sweep To Right

Sweep To Left

Sweep To Bottom

Sweep To Top

Bounce To Top

Bounce To Bottom

Bounce To Right

Bounce To Left

Radial Out

Radial In

Shutter In Horizontal

Shutter Out Horizontal

Shutter In Vertical

Shutter Out Vertical

Jika kursor diarahkan ketombol, maka akan muncul efeknya. Lalu bagaimana cara membuatnya, berikut adalah step penerapan efek menggunakan CSS.

Kode HTML-nya

Sebelum memberikan efek CSS, Anda buat terlebih dahulu HTML sebagai kerangka yang nanti akan memanggil CLASS dan ID pada kode CSS. Berikut adalah kode HTML-nya.

Keterangan : Kode warna merah (ID) diganti ID yang berada di CSS sesuai efek yang Anda inginkan.

Kode CSS-nya

Setelah itu, Anda beri kode CSS sesuai efek hover yang diinginkan. Berikut adalah kode CSS-nya.

Efek Background Fade Transition

.BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
#FADE{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; overflow: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color, background-color; transition-property: color, background-color;} #FADE:hover{background-color: #2098d1;color: white;}

Efek Background Sweep To Right Transition

.BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
#STR{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #STR:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#STR:hover{color: white;}#STR:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);}

Efek Background Sweep To Left Transition

.BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
#STL{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #STL:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#STL:hover{color: white;}#STL:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);}

Efek Background Sweep To Bottom Transition

.BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
#STB{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #STB:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#STB:hover{color: white;}#STB:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);}

Efek Background Sweep To Top Transition

.BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
#STT{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #STT:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#STT:hover{color: white;}#STT:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);}

Efek Background Bounce To Top Transition

.BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
#BTT{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #BTT:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#BTT:hover{color: white;}#BTT:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}

Efek Background Bounce To Bottom Transition

.BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
#BTB{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #BTB:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#BTB:hover{color: white;}#BTB:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}

Efek Background Bounce To Right Transition

.BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
#BTR{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #BTR:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#BTR:hover{color: white;}#BTR:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}

Efek Background Bounce To Left Transition

.BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
#BTL{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;} #BTL:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }#BTL:hover{color: white;}#BTL:hover:before{ -webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}

Efek Background Radial Out Transition

.BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
#RDO{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #RDO:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #RDO:hover{ color: white; } #RDO:hover:before{ -webkit-transform: scale(2); transform: scale(2); }

Efek Background Radial In Transition

.BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
#RDI{display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background: #2098d1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #RDI:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #e1e1e1; border-radius: 100%; -webkit-transform: scale(2); transform: scale(2); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #RDI:hover{ color: white; } #RDI:hover:before{ -webkit-transform: scale(0); transform: scale(0); }

Efek Background Shutter In Horizontal Transition

.BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
#SIH { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #2098d1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #SIH:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #e1e1e1; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #SIH:hover, #SIH:focus, #SIH:active { color: white; } #SIH:hover:before, #SIH:focus:before, #SIH:active:before { -webkit-transform: scaleX(0); transform: scaleX(0);}

Efek Background Shutter Out Horizontal Transition

.BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
#SOH { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #SOH:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #SOH:hover, #SOH:focus, #SOH:active { color: white; } #SOH:hover:before, #SOH:focus:before, #SOH:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); }

Efek Background Shutter In Vertical Transition

.BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
#SIV { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #2098d1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #SIV:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #e1e1e1; -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #SIV:hover, #SIV:focus, #SIV:active { color: white; } #SIV:hover:before, #SIV:focus:before, #SIV:active:before { -webkit-transform: scaleY(0); transform: scaleY(0); }

Efek Background Shutter Out Vertical Transition

.BOX{width:140px;padding:18px;margin:5px;background:#e1e1e1;text-align:center;font-family:"arial";}
#SOV { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #SOV:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #2098d1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #SOV:hover, #SOV:focus, #SOV:active { color: white; } #SOV:hover:before, #SOV:focus:before, #SOV:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); }

Silahkan pilih salah satu efek pada kode CSS diatas sesuai keinginan Anda. Jangan dibuat susah, karena pada dasarnya gampang. Jika Anda masih bingung dengan cara penerapannya, lebih jelas kerangka kode lengkapnya sebagai berikut :

<style>

Letakkan kode CSS-nya disini

</style>

Letakkan kode HTML-nya disini

Note : Letakkan kode seperti kerangka diatas.

Sekian pembahasan Kumpulan Efek Hover Background Transisi Menggunakan CSS, Dilain pembahasan insyaAllah saya akan membahas efek hover yang lainnya. Semoga artikel ini bermanfaat dan menambah wawasan teman-teman.

Unleash Your Other 90% (Realisasikan 90% Potensi Tersembunyi Anda)

2017-01-07T19:26:00.000-08:00

Unleash Your Other 90% (Realisasikan 90% Potensi Tersembunyi Anda)

Kecerdasan dan spirit adalah potensi manusia yang paling menakjubkan. Tetapi, sabagian besar dari kita menggunakan 10% potensi tersebut. Ibaratnya, pada waktu lahir, kita telah diberi potensi pesawat jet, tetapi yang kita lakukan adalah hanya mengelap sayap dan memnaskan mesinnya, lalu memarkirnya di hanggar sepanjang waktu. Nah buku ini menunjukkan bagaimana mengfungsikan pesawat jet itu seutuhnya.

Robert K. Cooper, Ph.D. adalah pendiri Breakthroughs in Leadership Series. Dr. Cooper dikenal dengan karya rintisannya dalam program "melejit di bawah tekanan".

Judul : Unleash Your Other 90% (Realisasikan 90% Potensi Tersembunyi Anda)

Penulis : Robert K. Cooper

Bahasa : Indonesia

Format eBook : EXE (tanpa instal, langsung bisa dibuka)

Format download : EXE via Google Drive

Size : 2 MB

Sumber : diduniadownload.blogspot.com

Download

Agar Siapa Saja Mau Melakukan Apa Saja Untuk Anda

2016-09-16T16:53:00.000-07:00

Kumpulan taktik psikologis terhebat untuk membuat segala sesuatu berjalan sesuai dengan keinginan Anda. Rahasia-rahasia psikologis dalam menguasai dan memengaruhi setiap situasi agar Anda tidak pernah lagi merasa tak berdaya.

Judul : Agar Siapa Saja Mau Melakukan Apa Saja Untuk Anda
Penulis : David J. Leiberman, Ph.D.
Bahasa : Indonesia
Format eBook : EXE (tanpa instal, langsung bisa dibuka)
Format download : EXE via Google Drive
Size : 2 MB
Sumber : diduniadownload.blogspot.com

Download

eBook 9 Prinsip Sukses dari CEO Perusahaan Raksasa Virgin Group

2016-08-18T19:21:00.000-07:00

Direcomendasikan oleh Admin syairi21, Baca.!!

Judul : 9 Prinsip Sukses dari CEO Perusahaan Raksasa Virgin Group
Penulis : Richard Branson (CEO perusahaan Virgin Group)
Bahasa : Indonesia
Format eBook : EXE (tanpa instal, langsung bisa dibuka)
Format download : RAR via Google Drive
Size : 1 MB
Sumber : diduniadownload.blogspot.com

Download

eBook Kumpulan Hadits Tentang Agama Islam

2016-08-17T18:14:00.001-07:00

Kumpulan eBook yang bisa didownload secara gratis. Semoga bermanfaat.
Format File : PDF
Size File : Semua size file dibawah 1 MB
Sumber : http://mromi.wordpress.com/

Tentang Hari Kiamat, Surga dan Neraka

Download

Hadits Adab

Download

Hadist Budi Pekerti

Download

Terjadinya Fitnah Dan Tanda-Tanda Hari Kiamat

Download

Hadits Tentang Keimanan

Download

Hadits Tentang Keselamatan

Download

Hadits Keutamaan beberapa perkara

Download

Hadits Tentang Mimpi

Download

Kumpulan Hadits Puasa dan I’tikaf

Download

Hadits Sholat Sunnah

Download

Proses penciptaan manusia dan penentuan rezeki, ajal dan amalnya serta nasibnya sengsara ataukah bahagia

Download

Hadits Thaharah (Bersuci)

Download

Hadits Zuhud dan Kelembutan Hati

Download

EBook Change Your Maindset Change Your Live

2016-08-15T20:22:00.000-07:00

Judul : Change Your Maindset Change Your Live
Deskripsi : Cara baru melihat dunia dan hidup sukses tak berhingga
Bahasa : Indonesia
Penulis : Carol S. Dweck, Ph. D.
Tipe eBook : exe (software tidak perlu instal, langsung bisa buka)
Size : 985 KB

Daftar Isi :

Download

Ebook Dasar-Dasar HTML

2016-05-19T23:41:00.000-07:00

Ebook Dasar-Dasar HTML

Penulis : -
Sumber yang berada di ebook :
http://hans.polinpdg.ac.id/html/, Maret 2011
http://www.sejutablog.com/dasar-dasar-html, Maret 2011
Size : 3 MB

Download

Ebook Tutorial fundamental dalam mempelajari HTML & CSS

2016-05-19T23:17:00.003-07:00

Ebook Tutorial fundamental dalam mempelajari HTML & CSS

Penulis : Rian Ariona
Penyunting : Endra Abdul Hadi, A.Md
Link Ebook : http://www.ariona.net/ebook-belajar-html-dan-css/

Daftar Pustaka
PROLOG
BAB 1 PERSIAPAN
BAB 2 PENGENALAN HTML
BAB 3 MEMUAT GAMBAR
BAB 4 MEMBUAT LINK
BAB 5 HEADING/PENJUDULAN
BAB 6 MEMBUAT DAFTAR/LIST
BAB 7 MEMAHAMI TAG DIV (DIVISION)
BAB 8 FORM
BAB 9 TABEL
BAB 10 STUDI KASUS 1- KONVERSI DESAIN KE HTML
BAB 11 VALIDASI MARKUP HTML
BAB 12 SEMANTIK
BAB 13 CASCADING STYLE SHEET (CSS)
BAB 14 BOX-MODEL
BAB 15 TYPOGRAPHY
BAB 16 CSS-IMAGE
BAB 17 FLOATING
BAB 18 POSITIONING
BAB 19 PSEUDO-CLASS
BAB 20 STUDIKASUS 2 – PEMBERIAN STYLE/CSS
BAB 21 STUDI KASUS 3 – SLICING
BAB 22 JAVASCRIPT
BAB 23 STUDI KASUS 4 – PENAMBAHAN JQUERY SLIDER
BAB 24 EXTRAS
EPILOG
DAFTAR PUSTAKA

Download

Ebook Tutorial Object Oriented Programming dengan Java

2016-05-18T03:28:00.002-07:00

Ebook Tutorial Object Oriented Programming dengan Java

Penulis : Firman Hidayat

Tutorial ini diambil dari http://firmanhid.wordpress.com
Yang terdiri dari empat bagian posting dan dijadikan satu bagian dalam bentuk pdf oleh
http://trikutakatik.com

Download

Ebook Algoritma Pemrograman 2 Menggunakan Visual Basic 6.0

2016-05-14T17:27:00.001-07:00

Ebook Algoritma Pemrograman 2 Menggunakan Visual Basic 6.0

Daftar Isi

Mengenal Visual Basic
Mengenal Visual Basic 6.0
Interface Antar Muka Visual Basic 6.0
Konsep Dasar Pemrograman Dalam Visual Basic 6.0
Membuat Project Baru
Event dan Property
Membuat User Interface
Mengatur Property
Event Dalam Kode Program
Membuat Project Mengatur Property
Latihan
Variabel, Operator dan Ekspresi
Variabel
Operator
Ekspresi
Project Sederhana Dengan Ekspresi
Latihan
Kondisi dan Keputusan
Percabangan Dengan IfThenElse
Percabangan Dengan IfThenElse Berantai
Pemilihan Dengan Select Case
Latihan
Pengulangan
Pengulangan Dengan ForNext
Pengulangan Dengan While.Wend
Pengulangan Dengan DoLoop Until
Pengulangan Bertingkat
Latihan
Array
Konsep Array
Array 2 Dimensi
Control Array
Latihan
Subrourine dan Fungsi
Subroutine
Fungsi
Latihan
Bermain Dengan Waktu
Tipe Data Waktu
Komponen Timer
Latihan
Operasi File
Operasi File Dalam Visual Basic
Membuka File
Menyimpan Data Ke File
Membaca Data Dari File
Komponen-komponen Untuk Operasi File
Latihan

Download