Membuat Animasi Loading Bubble dengan Full CSS
|
|
- Ida Setiawan
- 7 tahun lalu
- Tontonan:
Transkripsi
1
2 Membuat Animasi Loading Bubble dengan Full CSS Oleh: Christian Rosandhy Masih bermain dengan animasi,, sekarang kita akan belajar membuat sendiri animasi bubble loading dengan bantuan CSS3. Di tutorial ini kita nggak akan menggunakan gambar apapun supaya loadingnya nanti bisa lebih cepat. Yang pengen coba, yuk disimak.. :) Salam jagocoding,, kali ini masih dengan CSS, saya mau share tutorial membuat animasi loading bubble hanya dengan CSS. Animasi loading bubble yang akan saya jelaskan kali ini tidak memerlukan gambar apapun, sehingga loading bubble ini bisa diaplikasikan di website manapun dengan loading yang lebih cepat. Untuk memulai ini, minimal kita punya sedikit pengetahuan dasar tentang CSS 3 Animation. Karena sintaks yang akan dipakai kali ini nggak jauh-jauh dari sana.. Yuk langsung disimak aja ya.. :) Supaya hasilnya lebih asik, mungkin ada baiknya kita mengerjakan tutorial ini di website yang sudah ada isinya saja.. Atau kalau mau buat dari website kosongan, ya diisi-isi aja dulu deh dengan konten sembarangan.. Saya coba isi websitenya dulu dengan lorem ipsum.. :P <!--Di copy paste puluhan kali biar website terlihat berisi--> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>but I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who
3 do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p> Langkah pertama, buat struktur HTML seperti ini di bagian paling atas konten (setelah body, sebelum isi website tadi): <div class="overlay"> <div class="loading"> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> </div> </div> Disini kita menggunakan 3 lapis layer, layer 1 : overlay sebagai penghitam layar, layer 2 : loading yang akan menampung bubble, dan 3 layer.bubble yang nantinya akan bergerak-gerak sesuai dengan animasi yang kita berikan.sekarang langsung ke CSSnya aja ya,, Pertama-tama kita buat layer overlaynya dulu. Kita ingin membuat seluruh halaman website menjadi hitam transparan biarpun discroll sampai manapun. CSSnya seperti ini: /*CSS RESET*/ *{margin:0px auto;.overlay{ position:fixed; /*supaya tetap diam biarpun discroll*/ background:rgba(0,0,0,.25); /*warna hitam transparan*/ width:100%; height:100%; Hasilnya nanti akan seperti ini :
4 Setelah itu, kita atur posisi layer loading supaya tepat di tengah-tengah layar. Karena posisi ini tidak mengalir, dan mau kita letakkan seenak jidat kita, kita pakai position:absolute; (Untuk memahami perbedaan jenis CSS position dapat lihat tutorial di Tutorial Lengkap Memahami CSS Position). Pengaturan layoutnya seperti ini :.loading{ position:absolute; width:100px; height:40px; /*supaya posisi loading iconnya nanti persis ada di tengah*/ text-align:center; top:50%; left:50%; margin-top:-50px; /*min - setengah dari width*/ margin-left:-20px; /*min - setengah dari height*/ Karena layer.loading belum diisi apa-apa, hasil sementaranya masih sama seperti screenshot pertama. Setelah itu kita baru mendesain layer.bubble. Membuat lingkaran dengan CSS bisa dibantu dengan CSS3 Border-radius. Jangan lupa menggunakan display:inline-block; supaya bubble tersebut tetap mengalir ke samping, dan bukan ke bawah...bubble{ display:inline-block; width:20px; height:20px;
5 background:#f0f0f0; /*supaya bulat*/ border-radius:50%; -moz-border-radius:50%; /*biar ada bayangan sedikit*/ box-shadow:0px 0px 10px #777; -moz-box-shadow:0px 0px 10px #777; Hasilnya nanti adalah 3 bubble yang persis di tengah halaman seperti ini : Sampai disini, desain awal sudah selesai kita buat. sekarang kita membuat animasi supaya bubble tersebut membesar dan berubah warna secara bergiliran. Seperti biasa, dalam membuat animasi kita harus membuat dulu alur animasinya Disini saya akan membuat keyframe dengan 3 alur sederhana, yaitu posisi awal (0%), posisi ketika membesar dan berubah warna (50%), dan kembali ke awal (100%). Alurnya dapat dikembangkan lebih banyak lagi, asalkan posisi awal 0% dan 100% menghasilkan nilai yang persis sama, supaya bubble dapat bergerak mulus secara gerak{ 0% {width:20px; height:20px; 50% {width:30px; height:30px; background:#0cf; /*bubble membesar dan berubah warna*/ 100% {width:20px; height:20px; /*Kembali ke posisi awal*/
6 /*JANGAN LUPA PREFIX BUAT BROWSER-BROWSER gerak{ 0% {width:20px; height:20px; 50% {width:30px; height:30px; background:#0cf; 100% {width:20px; gerak{ 0% {width:20px; height:20px; 50% {width:30px; height:30px; background:#0cf; 100% {width:20px; gerak{ 0% {width:20px; height:20px; 50% {width:30px; height:30px; background:#0cf; 100% {width:20px; gerak{ 0% {width:20px; height:20px; 50% {width:30px; height:30px; background:#0cf; 100% {width:20px; height:20px; Setelah prefix selesai dibuat, sekarang tinggal kita panggil dengan CSS Animation pada layer.bubble yang tadi. Karena ini masih CSS3, jangan lupa juga ya memberi prefix -moz-, -o-, -webkit-, dan -ms-.. :D.bubble{ display:inline-block; width:20px; height:20px; border-radius:50%; -moz-border-radius:50%; background:#f0f0f0; box-shadow:0px 0px 10px #777; -moz-box-shadow:0px 0px 10px #777; animation:gerak 2.5s infinite; -webkit-animation:gerak 2.5s infinite; -o-animation:gerak 2.5s infinite; -moz-animation:gerak 2.5s infinite; -ms-animation:gerak 2.5s infinite; Nah, sampai disini sudah hampir selesai lho.. Kalau dijalankan, animasinya sudah mau berjalan sih,, tapi masih berjalan berbarengan.. Liat disini deh : Sekarang kita kasih trik tambahan biar bubblenya bisa bergerak bergantian satu dengan yang lainnya. Disini kita membutuhkan bantuan pseudo class :first-child, last-child, dan CSS3 animation-delay. Animation Delay ini berfungsi untuk menunda mulainya animasi selama jeda waktu tertentu. Saya
7 akan memberikan delay 0 detik pada bubble pertama (first-child), lalu memberikan delay selama 0.5 detik pada bubble yang di tengah (langsung dibuat di layer.bubble seperti biasa), dan 1 detik pada bubble yang terakhir (last-child). CSSnya seperti ini:.bubble{ /*CSS YANG TADI DIBIARIN*/ display:inline-block; width:20px; height:20px; border-radius:50%; -moz-border-radius:50%; background:#f0f0f0; box-shadow:0px 0px 10px #777; -moz-box-shadow:0px 0px 10px #777; animation:gerak 2.5s infinite; -webkit-animation:gerak 2.5s infinite; -o-animation:gerak 2.5s infinite; -moz-animation:gerak 2.5s infinite; -ms-animation:gerak 2.5s infinite; /*DELAY UNTUK BUBBLE YANG DI TENGAH*/ animation-delay:0.5s; -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; -o-animation-delay:0.5s; -ms-animation-delay:0.5s;.bubble:first-child{ /*TIDAK ADA DELAY UNTUK BUBBLE PERTAMA ALIAS LANGSUNG MULAI*/ animation-delay:0s; -moz-animation-delay:0s; -webkit-animation-delay:0s; -o-animation-delay:0s; -ms-animation-delay:0s;.bubble:last-child{ /*DELAY 1 DETIK UNTUK BUBBLE TERAKHIR*/ animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s; -o-animation-delay:1s; -ms-animation-delay:1s; Wah,, keliatannya panjang amat ya.. Tenang aja,, sebenernya sintaksnya cuma animation-delay:
8 sekian detik; aja,, tapi karena ini CSS3 juga ya jadi keliatan banyak gara-gara harus buat banyak prefixnya.. :D Kalau kita sudah mengikuti dari awal sampai disini, maka jadilah seperti ini : Nah,, demikianlah tutorial saya kali ini tentang membuat bubble loading.. Kebetulan yang saya bisa cuma buat CSSnya aja, jadi kalau ada pertanyaan kayak "Gimana biar loadingnya ilang sendiri setelah jeda waktu sekian detik?" atau kayak "Gimana biar loadingnya ini muncul ketika saya ngeklik link ini?" saya cuma bisa jawab " pake javascript. Tanya sama ahlinya~" :D Terima kasih banyak atas perhatiannya,, Semoga tutorial ini berguna untuk kita semua.. :) Tentang Penulis Christian Rosandhy Saya adalah seorang penggemar komputer, terutama di bagian CSS atau PHP.. sekalipun saya belum jago-jago amat, setidaknya sekarang saya sedang berusaha belajar sebanyak-banyaknya.
Responsive Layout dengan Bootstrap [Part 2]
Responsive Layout dengan Bootstrap [Part 2] Oleh: Christian Rosandhy Salam jaco,, sebagai lanjutan dari tutorial Membuat Layout Responsive dengan Container Bootstrap, kali ini kita akan mencoba membuat
Lebih terperinciTutorial Lengkap Memahami CSS Display
Tutorial Lengkap Memahami CSS Display Oleh: Christian Rosandhy Dalam dunia CSS, property Display adalah salah satu property terpenting yang menentukan hasil akhir sebuah website. Kali ini kita akan banyak
Lebih terperinciVOLUME I No 2 Juli 2013 Halaman
Community Health VOLUME I No 2 Juli 2013 Halaman 112-121 Artikel Penelitian Faktor Faktor Yang Berhubungan Dengan Tingkat Keterlambatan Pengembalian Berkas Rekam Medis Dari Instalasi Rawat Inap Ke Instalasi
Lebih terperinciDaftar Isi Elemen Estetis Tumpal Formulasi Tumpal Sebagai Elemen Estetis
Daftar Isi 2 3 4 5 6 7 8-14 15-16 17-18 19-20 21-23 24 25 26-27 Sejarah Jakarta Logo Logo Utama Rumus Skala Logo Logo Positif dan Diapositif Ukuran Logo Panduan Warna Varian Logo Perlakuan Logo Typeface
Lebih terperinciMemanfaatkan CSS Animasi dan Transisi [Part 1]
Memanfaatkan CSS Animasi dan Transisi [Part 1] Oleh: Christian Rosandhy Transition dan Animation itu adalah salah satu perintah wajib di dunia CSS3 sekarang untuk menghasilkan web yang lebih unik. Di part
Lebih terperinciMembuat Layout Footer Menempel ke Bawah
Membuat Layout Footer Menempel ke Bawah Oleh: Christian Rosandhy Kali ini saya mau share lagi salah satu layout wajib buat website, yaitu layout footer menempel kebawah. Di tutorial kali ini kita akan
Lebih terperinciLOGO FULL COLOR BEBERAPA CONTOH LOGO DPD-PDJI DEWAN PENGURUS DAERAH PROVINSI JAWA BARAT DEWAN PENGURUS DAERAH PROVINSI BALI
BR AND IDENTIT Y GUIDELINES LOGO FULL COLOR C M Y 0 0 0 100 0 K 100 100 0 0 0 0 50 BEBERAPA CONTOH LOGO DPD-PDJI PROVINSI JAWA BARAT PROVINSI BALI PROVINSI JAWA TIMUR PROVINSI D.I. YOGYAKARTA 1 KETENTUAN
Lebih terperinciPedoman Penulisan Laporan PKL Dosen Pembimbing : Ratri Enggar Pawening
2013 Pedoman Penulisan Laporan PKL Dosen Pembimbing : Ratri Enggar Pawening Pedoman penulisan laporan PKL ini bertujuan untuk menyamakan format penulisan, khususnya bagi kelompok mahasiswi yang saya bimbing
Lebih terperinciMemanfaatkan CSS Animasi [Part 2]
Memanfaatkan CSS Animasi [Part 2] Oleh: Christian Rosandhy Ini adalah tutorial lanjutan dari Part 1,, Kali ini kita akan belajar menggunakan CSS 3 Animation untuk membuat animasi yang jauh lebih dinamis
Lebih terperinciMembuat Tabel Responsive dengan CSS
Membuat Tabel Responsive dengan CSS Oleh: Christian Rosandhy CSS Layout Responsive udah jadi salah satu kebutuhan wajib ya dalam pembuatan website kita.. Sama seperti layout, Table juga perlu tampilan
Lebih terperinciHenHash. Fungsi Hash berdasarkan Henon Map
HenHash Fungsi Hash berdasarkan Henon Map Wiwit Rifa i (13513073) Program Studi Teknik Informatika Sekolah Teknik Elektro dan Informatika, Institut Teknologi Bandung Jalan Ganesha 10-12, Bandung 40132,
Lebih terperinciTutorial Lengkap Memahami CSS Position
Tutorial Lengkap Memahami CSS Position Oleh: Christian Rosandhy Salah satu property CSS yang masih bisa bikin kita bingung dan salah langkah itu adalah POSITION. Kapan kita harus pakai position static,
Lebih terperinci64-DIB : 64-Bit Difusing Invers Block
64-DIB : 64-Bit Difusing Invers Block Moch Ginanjar Busiri 13513041 Teknik Informatika Institut Teknologi Bandung gbusiri@gmail.com Abstrak Pada paper ini diajukan sebuah algoritma yang merupakan pengembangan
Lebih terperinciMembuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage
Membuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage Oleh: Christian Rosandhy Siapa bilang bikin galeri gambar yang responsive itu susah? Di tutorial kali ini kita akan belajar membuat
Lebih terperinciXHTML Part 1. Wahyu Catur Wibowo Amalia Zahra
XHTML Part 1 Wahyu Catur Wibowo Amalia Zahra wibowo@cs.ui.ac.id http://wcw.cs.ui.ac.id Well-formed XHTML mengadopsi well-formness dari XML Penulisan elemen XHTML dikatakan well-formed apabila: (a) dalam
Lebih terperinciPerbandingan Ketahanan Algoritma LSB dan F5 dalam Steganografi Citra
Perbandingan Ketahanan Algoritma LSB dan F5 dalam Steganografi Citra Ricardo Pramana Suranta / 13509014 1 Program Studi Teknik Informatika Sekolah Teknik Elektro dan Informatika Institut Teknologi Bandung,
Lebih terperinciMembuat Desain Custom Input (Checkbox + Radio Button) pada Form
Membuat Desain Custom Input (Checkbox + Radio Button) pada Form Oleh: Christian Rosandhy Bosen lah ya liat checkbox dan radio button di HTML yang gitu-gitu aja? Di tutorial kali ini kita akan belajar mendesainnya
Lebih terperinciBAB II KOMPONEN HTML LANJUT
BAB II KOMPONEN HTML LANJUT A. KOMPETENSI DASAR Memahami komponen-komponen HTML lanjutan. Memahami kegunaan dan cara penerapan komponen HTML. Mampu memanfaatkan komponen-komponen HTML untuk membuat halaman
Lebih terperinciBAB I DASAR-DASAR HTML
BAB I DASAR-DASAR HTML A. KOMPETENSI DASAR Memahami struktur dasar dokumen HTML dan HTML5 Mampu membuat dokumen HTML yang baik dan benar. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi.
Lebih terperinciMembuat Tooltip Sendiri dengan CSS
Membuat Tooltip Sendiri dengan CSS Oleh: Christian Rosandhy Terkadang liat tooltip standar bawaan browser itu terlalu membosankan ya,, disini kita belajar membuat tooltip tersebut dengan bantuan CSS supaya
Lebih terperinciAlgoritma Cipher Blok Mats
Algoritma Cipher Blok Mats Algoritma Cipher Blok dengan Fungsi Acak Modulus Ramandika Pranamulia 13512078 Teknik Informatika Institut Teknologi Bandung Bandung,Indonesia ramandika@students.itb.ac.id Mamat
Lebih terperinciMembuat Layout Header Diam di Tempat (Fix Header)
Membuat Layout Header Diam di Tempat (Fix Header) Oleh: Christian Rosandhy Fix Header / Header Diam di Tempat adalah salah satu tren layout yang cukup populer (liat aja header Facebook / Twitter). Layout
Lebih terperinciWarta Jemaat, 24 Mei 2015
Warta Jemaat, 24 Mei 2015 INFORMASI IBADAH, PELAYANAN dan KEGIATAN 1. Format isian Data Dasar keluarga sudah dijalankan, diharapkan kerjasama dengan jemaat sekalian untuk dapat mengisinya dengan benar
Lebih terperinciMendesain Custom Tabel dengan Pseudo Element CSS
Mendesain Custom Tabel dengan Pseudo Element CSS Oleh: Christian Rosandhy Masih dengan CSS, kali ini kita akan belajar mendesain tabel dengan CSS, sekalian belajar 3 pseudo-element yang akan sangat berguna
Lebih terperinciTutorial Layouting : Membuat Grid Sama Tinggi
Tutorial Layouting : Membuat Grid Sama Tinggi Oleh: Christian Rosandhy Salah satu masalah umum penggunaan Grid itu adalah mengatur tingginya biar rapi. Untuk bisa membuat grid yang benar-benar rapi dan
Lebih terperinciImage Slider 3D. Oleh: Anthonius
Image Slider 3D Oleh: Anthonius Kali ini saya akan berbagi cara membuat image slider dengan tampilan 3D. Cara ini sangat efisien karena hanya menggunakan sedikit script. Untuk CSS nya agan bisa copy langsung
Lebih terperinciCAPAIAN KINERJA MUTU FAKULTAS dan PPs TAHUN Badan Penjaminan Mutu. Universitas Negeri Semarang
CAPAIAN KINERJA MUTU FAKULTAS dan TAHUN 6 Badan Penjaminan Mutu Universitas Negeri Semarang Universitas Negeri Semarang BIDANG AKADEMIK Program Studi Status Akreditasi A Your Text here Lorem ipsum dolor
Lebih terperinciMODUL III CASCADING STYLE SHEET
MODUL III CASCADING STYLE SHEET A. TUJUAN Memahami jenis dan struktur dasar dokumen CSS. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk menghasilkan halaman
Lebih terperinciSImple Pop-Up Modal dengan CSS3 dan Jquery
SImple Pop-Up Modal dengan CSS3 dan Jquery Oleh: d-newbie Assalamualaikum wr.wb. bertemu lagi dengan saya, kali ini saya akan menulis tutorial tentang pop-up, apa itu pop-up? Kalo menurut wikipedia pop-up
Lebih terperinciMembuat Responsive Layout dengan CSS Media Query
Membuat Responsive Layout dengan CSS Media Query Oleh: Christian Rosandhy Di tutorial kali ini kita akan belajar membuat layout CSS Responsive dengan bantuan CSS Media Query, supaya website yang kita buat
Lebih terperinciLAPORAN AKHIR M.K INTERAKSI MANUSIA DAN KOMPUTER SEMESTER GENAP 2007/2008. Kajian Situs com
LAPORAN AKHIR M.K INTERAKSI MANUSIA DAN KOMPUTER SEMESTER GENAP 2007/2008 Kajian Situs http://www.riauprovince. com oleh: Febrionna Fenrizal G64051015 (http://fiona42.wordpress.com) INSTITUT PERTANIAN
Lebih terperinciTHE SUITES TOWER. The Inspiring Jewel in Pantai Indah Kapuk
THE SUITES TOWER The Inspiring Jewel in Pantai Indah Kapuk THE SUITES TOWER The Most Advanced Office Space in North Jakarta Setiap lantai di The Suites Tower, sesuai namanya, merupakan perwujudan dari
Lebih terperinciPlugin Javascript Bootstrap 2
Plugin Javascript Bootstrap 2 Oleh: ricky orlando napitupulu Salam bro/sis :) Setelah sebelumnya saya memberikan tutorial tentang plugin JS jquery yang super keren. Nah kini saya tambahin lagi lanjutanya.
Lebih terperinciTutorial Dasar CSS Preprocessor LESS
Tutorial Dasar CSS Preprocessor LESS Oleh: Christian Rosandhy Karena CSS standar udah terlalu mainstream,, nggak ada salahnya kita belajar salah satu CSS Preprocessor yang cukup terkenal, yaitu LESS. Disini
Lebih terperinciMembuat Scrollspy Dengan Bootstrap
Membuat Scrollspy Dengan Bootstrap Oleh: Hasyemi Rafsanjani Asyari Hai JagoCodingers. Apa kabar? Pernah ngga kalian membuka sebuah website lalu ada menu link navigasi yang akan terupdate atau terlihat
Lebih terperinciGroup 5 - Simulation Modelling Industry. Lecture : Paulus A.C Tangkere
Group 5 - Simulation Modelling Industry Lecture : Paulus A.C Tangkere AL FAUZAN - 1122003014 FIDYA AYU SAOMI - 1122003013 KIKY RIZKY APRILIA - 1122003027 M. FAJAR SIDDIQ - 11220030xx Slide Master Your
Lebih terperinciCSS Eksternal. Instruktur: Arif Nurwidyantoro
CSS Eksternal Instruktur: Arif Nurwidyantoro Definisi CSS, selain diletakkan dalam file yang sama dengan file HTML, dapat juga diletakkan pada file terpisah. Pernyataan untuk menyambungkan file HTML dengan
Lebih terperinciBAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM
BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM 4.1. Implementasi Pada bab ini akan dilakukan implementasi dan pengujian terhadap sistem yang baru. Tahapan ini dilakukan setelah perancangan selesai dilakukan
Lebih terperinciPublish: 7 Juni 2012 Author & Copyright: Johan Status: FREE tutorial
Kumpulan Tutorial dan belajar ilmu website mulai dari hosting dan coding seperti belajar HTML, CSS, Javascript, Javascript, JQuery, ASP.Net hingga SEO dan Desain web dengan Dreamweaver dan Photoshop untuk
Lebih terperinciBUKU PANDUAN LOGO / LOGO GUIDELINE
BUKU PANDUAN LOGO / LOGO GUIDELINE BUKU PANDUAN LOGO / LOGO GUIDELINE DAFTAR ISI TABLE OF CONTENT BAB 1 / CHAPTER 1 01-01 Cover 01-02 Daftar isi / Table of Content BAB 2 / CHAPTER 2 PANDUAN LOGO / LOGO
Lebih terperinciDaftar Isi. Kata Pengantar Pendahuluan. i ii. iii. Daftar Isi
Kata Pengantar Seiring dengan dinamika BKKBN sebagai lembaga yang selalu relevan dengan perkembangan bangsa dari dulu hingga kini, maka revitalisasi identitas institusi (logo) adalah salah satu bagian
Lebih terperinci6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco
6. HTML & CSS PTI15010 Pemrograman Web Agi Putra Kharisma, S.T., M.T. Genap 2014/2015 Desain slide ini dadaptasi dari University of San Fransisco HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan
Lebih terperinciMembuat Button Dengan CSS
Membuat Button Dengan CSS Dari sekian banyak pertanyaan yang muncul dari para pemula di CSS adalah pertanyaan bagaimana sih membuat tombol dengan CSS?, hmmm bagi saya ini adalah pertanyaan yang simple
Lebih terperinciCOMPANY PROFILE. Company profile PT. Vaganza Solusi Internasional ini ditujukan untuk: for
COMPANY PROFILE Company profile PT. Vaganza Solusi Internasional ini ditujukan untuk: for WE ARE ALL IN ONE DIGITAL AGENCY Vaganza atas nama PT. Vaganza Solusi Internasional menyediakan servis untuk keperluan
Lebih terperinciPlugin Javascript Bootstrap
Plugin Javascript Bootstrap Oleh: ricky orlando napitupulu Salam bro/sis :) kali ini saya akan menunjukkan plugin javascript yang keren-keren dari bootstrap, yang dapat membuat halaman web menjadi lebih
Lebih terperinciMEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP
MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP NURLITA nurlita.icha@gmail.com Abstrak Kali ini kita akan membahas cara membuat layout dengan container bootstrap. Bootstrap adalah suatu framework front-end yang
Lebih terperinci7 Cara Mempercantik Tampilan Blog
7 Cara Mempercantik Tampilan Blog Primo Riveral primo@raharja.info Abstrak Memiliki blog dengan tampilan keren dan enak dilihat tentu pasti menjadi kembanggaan tersendiri untuk seorang yang menggemari
Lebih terperinciMembuat Tempelate Menggunkanan Boostrap
Membuat Tempelate Menggunkanan Boostrap Jihadul Akbar, S.Kom PUSTIK STMIK LOMBOK 3/30/2017 Tentang Modul Bootstrap adalah kerangka front-end yang paling populer dalam waktu terakhir. Sangat ringan, handal
Lebih terperinciNotifikasi Keren dengan CSS3
Notifikasi Keren dengan CSS3 Oleh: Sendy PK Notifikasi pada website merupakan hal yang penting untuk memberi tahu pengunjung website tentang informasi singkat yang diberikan oleh pemilik website, hal ini
Lebih terperinciEfek Mengambang CSS3
Efek Mengambang CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Masih bersama saya Mazhuda, sambil ngangur nih di kampung kelahiran... :-) Dari pada gak ngapain-ngapain mending kita sharing ilmu aja di
Lebih terperinciAnimasi Dengan CSS3. Mahasiswa memahami konsep dasar animasi CSS3 Mahasiswa memahami konsep transisi Mahasiswa memahami konsep transformasi
Tujuan Animasi Dengan CSS3 Mahasiswa memahami konsep dasar animasi CSS3 Mahasiswa memahami konsep transisi Mahasiswa memahami konsep transformasi Dasar Teori Pada praktikum-praktikum sebelumnya, kita telah
Lebih terperinciHTML Scripting Desain Visual dan Tata Letak dengan CSS 3
Tujuan : Memahami dan dapat menggunakan konsep CSS3 Memahami dan dapat mengetahui kelebihan maupun kekurangan CSS 3 Menerapkan CSS 3 dengan fitur lainnya 8.1 CSS 3 CSS3 adalah standar untuk CSS yang paling
Lebih terperinciTutorial Layouting CSS Part 1
Tutorial Layouting CSS Part 1 Oleh: Cecep Yusuf Pada tutorial kali ini, mari kita belajar tentang layouting HTML dengan CSS, sebenarnya tutorial ini bersumber dari artikel saya juga di situs harian.cheyuz.com,
Lebih terperinciObjek Bergoyang CSS3
Objek Bergoyang CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Gak terasa nih udah mulai banyak yang mudik... Di sela-sela waktu masih aja nih saya update tutorial buat temen-temen jagocoding sekalian...
Lebih terperinciResponsive Sidebar dengan Bootstrap
Responsive Sidebar dengan Bootstrap Oleh: Boy Panjaitan Hai, Berjumpa lagi dengan saya Boy Panjaitan. kali ini saya akan membagikan tutorial tentang CSS lagi.pernahkah anda melihat website dengan sidebar
Lebih terperinciMembuat Template Website Menggunakan Teknik Layer ala CSS
Membuat Template Website Menggunakan Teknik Layer ala CSS Bila Anda mendengar istilah template website, hampir dapat dipastikan kalau skrip yang digunakannya adalah CSS. CSS atau Cascading Style Sheet
Lebih terperinciBrand kita. Our brand
Brand kita Our brand Our brand Brand proposition Brand proposition Wonderful atau Pesona Indonesia adalah janji pariwisata Indonesia kepada dunia. Kata Wonderful atau Pesona mengandung janji bahwa Indonesia
Lebih terperinciMODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id
1 MODUL PEMOGRAMAN WEB I Oleh: CHALIFA CHAZAR 2 Modul 6 CSS3 Tujuan: Mahasiswa mengenal komponen CSS 3 sebagai pelengkap element HTML dalam membangun website statis. Pustaka:» HTML dan XML Edisi 2: Betha
Lebih terperinciMembuat dan Menampilkan QR Code secara Dinamis dengan PHP
Membuat dan Menampilkan QR Code secara Dinamis dengan PHP Oleh: Christian Rosandhy QR Code Everywhere!! Mungkin di website / proyek kita juga perlu dibikinin juga tuh biar nggak kalah keren.. Nggak susah
Lebih terperinciTUGAS BOXES. 1. Percobaan 1
TUGAS BOXES 1. Percobaan 1 Analisa : Pada percobaan 1, style pada elemen div ditetapkan width dan heightnya 400px dan 300px dengan background color pink, dan pada elemen p, width dan height ditetapkan
Lebih terperinciPercobaan 1 : Mengatur Width Dan Height Hasil :
Percobaan 1 : Mengatur Width Dan Height Analisa : Terlihat di atas kalau width dan height dari tag dan berbeda sesuai value yang telah diinputkan yang bias dibedakan dengan background-color
Lebih terperinciCSS Cascading Style Sheet
CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 CSS Lanjut CSS Dimension Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. contoh: height:100px; width:200px; Nilai/ value:
Lebih terperinciFungsi Require dan Include Donny Reza, S.Kom Aplikasi IT-2 Teknik Informatika Fakultas Teknik dan Ilmu Komputer Universitas Komputer Indonesia
Fungsi Require dan Include Donny Reza, S.Kom Aplikasi IT-2 Teknik Informatika Fakultas Teknik dan Ilmu Komputer Universitas Komputer Indonesia Di dalam PHP terdapat fungsi yang dapat digunakan untuk menyisipkan/menyertakan
Lebih terperinciBlueprint CSS Framework
Nama : Reza Bayu Permana NIM : 12141378 Prodi : Teknik Informatika (Malam) Mata Kuliah : Web Statis Blueprint CSS Framework Blueprint Css adalah sebuah framework CSS. Herankan kenapa css pun memiliki framework.
Lebih terperinciAnalisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya.
TUGAS CSS LAYAOUT PRAKTIKUM 6 1. Percobaan 1 Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya. 2. Percobaan2 Position: relative;
Lebih terperinciKAJIAN 3 Web Responsive
KAJIAN 3 Web Responsive Modul 10 Pengantar Web Responsive Modul 11 Perancangan Web Responsive 73 KAJIAN 3 Web Responsive MODUL 10 Pengantar Web Responsive 10.1. TUJUAN Mengetahui dan memahami dasar perancangan
Lebih terperinciDasar Dasar Transisi Di CSS3
Dasar Dasar Transisi Di CSS3 Oleh: Irvansyah Jumpa lagi ne sama sobat JagoCoding, tutor saya hari ne tentang transisi di CSS3.. Mungkin diantara teman2 pasti ada yang udah tahu tapi masih bingung ataupun
Lebih terperinciMembuat Custom Button Captcha dengan Font Awesome
Membuat Custom Button Captcha dengan Font Awesome Oleh: Christian Rosandhy Captcha adalah bagian form yang biasa digunakan untuk memvalidasi user sebelum mengirim form. Kalau captcha pada umumnya mewajibkan
Lebih terperinciTools Pengelolaan Publikasi Ilmiah. Deden Sumirat Hidayat, M.Kom LIPI
Tools Pengelolaan Publikasi Ilmiah Deden Sumirat Hidayat, M.Kom LIPI PUBLIKASI ILMIAH (JURNAL, KONFERENSI, BUKU) Manajemen Penerbitan Jurnal Ilmiah STATE OF THE ART PENELITIAN Open Journal System PROPOSAL
Lebih terperinciSPONSORSHIP PROPOSAL
SPONSORSHIP PROPOSAL Assalamu'alaikum warrahmatullahi wabarakatuh Salam sejahtera untuk kita semua Puji syukur kita panjatkan kepada Tuhan YME atas berkat dan rahmat Nya sehingga acara kita dapat berjumpa
Lebih terperinciDASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN
DASAR-DASAR CSS DASAR-DASAR CSS 2015 A. PENGENALAN CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk mempercantik tampilan HTML atau mengatur bagaimana elemen HTML
Lebih terperinciBAB V DESAIN WEB CSS
BAB V DESAIN WEB CSS A. KOMPETENSI DASAR Memahami konsep dan strategi desain web yang rapi berbasis HTML dan CSS/CSS3. Mampu mengoptimalkan fitur-fitur CSS dalam desain web. Mampu memanfaatkan pendekatan
Lebih terperinciCSS BOXES. Langkah Kerja. Percobaan
Tugas : Percobaan Praktikum 8 Materi : CSS Boxes Nama : Dwi Setiya Ningsih NRP : 2103157025 Langkah Kerja CSS BOXES Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan
Lebih terperinciDasar-dasar HTML 1. Oleh: Cecep Yusuf
Dasar-dasar HTML 1 Oleh: Cecep Yusuf Apa yang harus dipelajari jika kita ingin membuat sebuah website? Yup, jawabannya adalah HTML. Yuk kita intip HTML itu seperti apa. Pada suatu hari, teman saya Irvan
Lebih terperinciLAPORAN RESMI. Boxes
LAPORAN RESMI Boxes Dosen Pembimbing : Dwi Susanto,ST, MT Oleh Hamidah Nur Hidayati 4103131038 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI
Lebih terperinciS E L LER B U Y E R A N D PROPOSAL
S E L LER B U Y E R A N D PROPOSAL Assalamu'alaikum warrahmatullahi wabarakatuh Salam sejahtera untuk kita semua Puji syukur kita panjatkan kepada Tuhan YME atas berkat dan rahmat Nya sehingga acara kita
Lebih terperinciBAB VI DESAIN WEB RESPONSIF
BAB VI DESAIN WEB RESPONSIF A. KOMPETENSI DASAR Memahami konsep dasar desain halaman web responsif Mampu menerapkan konsep desain web responsif ke dalam aplikasi Mampu menghasilkan desain aplikasi web
Lebih terperinciHover Putar CSS3. Oleh: Mohammad Nur Huda
Hover Putar CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Haha... Sebenarnya ini adalah tulisan pertama saya pada situs berbagi ilmu ini :-). Pada kali ini kita akan membuat efek hover memutarkan objek
Lebih terperinciMembuat Simpel Site HTML Layout Menggunakan Tag div
Membuat Simpel Site HTML Layout Menggunakan Tag div Oleh: Yudhistira Bayu W Ya, setelah saya memberikan Tutorial Tutorial Simpel HTML pada sebelumnya, Kali Ini saya akan memberikan Cara Membuat Simpel
Lebih terperincimembuat website dengan bootstrap v3.0.0
membuat website dengan bootstrap v3.0.0 Oleh: reski hamsah Belakangan ini, bootstrap telah merilis versi terbarunya dengan berbagai tawaran menarik mulai dari desain, fitur, dan customizer terbaru untuk
Lebih terperincigraphic standard manual
graphic standard manual Selamat datang di panduan brand RINJANI Dokumen ini menyediakan tinjauan brand secara visual juga dasar-dasar penerapan konsisten identitas brand RINJANI, sebagai alat bantu untuk
Lebih terperinciBAB IV CASCADING STYLE SHEET (CSS)
BAB IV CASCADING STYLE SHEET (CSS) A. KOMPETENSI DASAR Memahami jenis dan struktur dasar dokumen CSS dan CSS3. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk
Lebih terperinciPEDOMAN KERJA PRAKTEK DAN MAGANG. Teknik Informatika FTI UAJY
PEDOMAN KERJA PRAKTEK DAN MAGANG Teknik Informatika FTI UAJY BAB I PENDAHULUAN 1.1. Kerja Praktek Kerja Praktek adalah sebuah mata kuliah yang ada di dalam kurikulum Strata 1 Program Studi Teknik Informatika
Lebih terperinciAuthor : Minarni, S.Kom.,MM
S Cascading Style Sheets Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit Kalimantan Tengah Internet Multimedia Keuntungan Menggunakan CSS Mempermudah dan mempersingkat pembuatan dan pemeliharaan
Lebih terperinciMembuat Smooth Scrolling dalam 1 halaman dengan JQuery
Membuat Smooth Scrolling dalam 1 halaman dengan JQuery Oleh: Christian Rosandhy Segala sesuatu yang smooth itu tentunya asik dong ya? Begitu juga dengan website kita.. Kita bisa bikin animasi scroll dalam
Lebih terperinciRancangan / draft untuk penulisan Bab I (Pendahuluan)
Rancangan / draft untuk penulisan Bab I (Pendahuluan) BAB I PENDAHULUAN 1.1 Latar Belakang Masalah Dibuat maksimal 8-10 paragraf dimana setiap paragraph mewakili poin-poin untuk menjadi identifikasi masalah.
Lebih terperinciMembuat Display Produk dalam Layout Box 4 Kolom
Membuat Display Produk dalam Layout Box 4 Kolom Oleh: Debrian Ruhut Saragih Selamat pagi Sobat sekalian, saat ini kita banyak menemukan toko online bertebaran di Internet. Saya sering memperhatikan bagaimana
Lebih terperinciMembuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap [Part 2]
Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap 2.3.2 [Part 2] Oleh: d-newbie pada tutorial sebelumnya kita sudah membuat 2 modal, yaitu modal "Masuk" dan modal "Daftar" dan pada tahap ini
Lebih terperinciCSS Lanjut Pertemuan - 5
CSS Lanjut Pertemuan - 5 Semester Ganjil 2009/2010 CSS Lanjut Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. contoh: height:100px; width:200px; Nilai/ value: auto Nilai / Value ukuran
Lebih terperinciCSS. inheritance (pewarisan)
{CSS} lanjut CSS inheritance (pewarisan) sebuah elemen mewarisi beberapa nilai dari properti yang dimiliki oleh elemen parent-nya http://www.w3.org/tr/css21/cascade.html#inheritance http://www.slideshare.net/diniscorreia/htmlcss-3-introduction-to-css
Lebih terperinciYayan Mulyana
Yayan Mulyana CSS merupakan materi yang WAJIB kita kuasai sebagai web Designer, karena dengan CSS kita bisa membangun sebuah website dengan rancangan desain yang efektif dan fleksibel
Lebih terperinciMembuat Login Pop Up Dengan JqueryUI
Membuat Login Pop Up Dengan JqueryUI Oleh: Dadan Berawal dari maraknya tayangan goyang di telivisi. Terinspirasi juga untuk membuat efek goyang pada website saya. Hehe kagak nyambung nih ilustrasi ceritanya
Lebih terperinciA. LATAR BELAKANG ATAU BACKGROUND
A. LATAR BELAKANG ATAU BACKGROUND Latar belakang background dalam CSS dibedakan menjadi 2: 1. Latar Belakang Dengan Menggunakan Warna: Warna background memiliki dua nilai: Transparent : membuat wearna
Lebih terperinciHow to Create Simple Web (2) - Slice
How to Create Simple Web (2) - Slice Oleh: Isnu Arief Darmawan Senang sekali, bisa berjumpa lagi dengan Anda :D #masih-presenter dengan Saya Om' Kenu. Sebelumnya, kita sudah membuat template yang sudah
Lebih terperinciTutorial Membuat Layout Website Sederhana dengan HTML dan CSS
Tutorial Membuat Layout Website Sederhana dengan HTML dan CSS Oleh: I Wayan Dharmana Halo kawan, apa kabar? Semoga di awal bulan Ramadhan ini kawan pembaca tetap semangat untuk mencari ilmu. Nah, pada
Lebih terperinciCascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Pengertian CSS CSS singkatan dari Cascading Style Sheets, yaitu bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus CSS menggambarkan bagaimana elemen-elemen
Lebih terperinciCara Membuat website dengan Dreamweaver
Cara Membuat website dengan Dreamweaver Pajrin Wurika Sahara Wurika.sahara@gmail.com Abstrak Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG What You See
Lebih terperinci[Review]: Mobile Website
[Review]: Mobile Website Oleh: titan Perkembangan teknologi smartphone yang semakin pesat, berpengaruh juga pada dunia website, setelah beberapa waktu yang lalu boomingnya standar baru dari html yaitu
Lebih terperinciCascading Style Sheet (CSS) Didik Dwi Prasetya
Cascading Style Sheet (CSS) Didik Dwi Prasetya didikdwi@gmail.com CSS vcss à Cascading Style Sheet vstyle à mendefinisikan aturan untuk menampilkan elemen HTML. vdefinisi: Cascading Style Sheets (CSS)
Lebih terperinciTUTORIAL CSS FRAMEWORK
11/13/2014 TUTORIAL CSS FRAMEWORK NAMA : DUWI PARYANTO NIM : 12141367 MATA KULIAH : PEMROGRAMAN WEB STATIS DOSEN : WAHYU WIDODO CSS FRAMEWORK FONT AWESOME A. Pengertian Framework Sebelum mempelajari bagaimana
Lebih terperinci