Efek Mengambang CSS3
|
|
- Yulia Johan
- 7 tahun lalu
- Tontonan:
Transkripsi
1
2 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 sini... :-) Kali ini kita akan membahas efek mengambang pada hover css3, seperti tutorial kemaren yang keyframes kali ini juga mengupas seputar itu... Assallamualaikum... Masih bersama saya Mazhuda, sambil ngangur nih di kampung kelahiran... :-) Dari pada gak ngapain-ngapain mending kita sharing ilmu aja di sini... :-) Kali ini kita akan membahas efek mengambang pada hover css3, seperti tutorial kemaren yang keyframes kali ini juga mengupas seputar itu juga namun kali ini bedanya terletak pada teknik callback... Wah, kayaknya pernah denger nih.? Pasti fungsi dari Jquery.? Jawabnya bukan.!! Yang dimaksud disini adalah teknik perulangan animasi keyframes yang sudah ada... Tanpa basa-basi lagi, yuk kita praktekkan... :-) Ingat!! Yang ingin benar-benar belajar harus pake notepad biasa lho ya, biar faham sampean iku... Mulai dengan membuat struktur htmlnya... <!DOCTYPE html> <html> <head> <title> </title> <style> </style> </head> <body>
3 </body> </html> Selanjutnya buatlah keyframes, 1 buah class, dan 1 buah pseudo-class... Pertama buatlah keyframes animasi yang bernama ngambang, seperti di bawah ini... ( dengan perbandingan 0% : 50% : 100% ngambang { 0% { 50% { Terus pergerakannya apa aja.? Kita lihat kembali judulnya tadi... Haha ( kyak master aja ) Dari judulnya tadikan Efek Mengambang CSS3 berarti sekarang kita buat objek tersebut dapat bergerak secara vertikal seperti mengambang... Lebih tepatnya kita nanti menggunakan Property Transform Bervalue TranslateY ( pergerakan beracuan sumbu Y )... Dan secara bertahap akan looping animasi jadi objek tersebut akan kelihatan seperti mengambang... Untuk pergerakan pada state 0% kita akan buat seperti ini... ( berarti posisi objek akan naik ke atas / meninggi dari posisi semula karena bernilai negatif ) Ke 2, Untuk state 50%nya kita buat seperti ini... transform: translatey(-4px); ( berarti objek akan di kurangi posisinya dari state sebelumnya ) Ke 3, Untuk state 100% kita buat seperti state 0%... ( objek kembali pada posisi semula ) Jadi seluruh parameternya seperti ngambang { 0% {
4 50% { transform: translatey(-4px); Udah pada kebayangkan nanti bakal kyak gimana objeknya.? Iya, betul objek akan naik turun dan naik lagi... Namun hal ini membuat animasi akan terasa sedikit kaku, untuk itu kita barengi dengan teknik callback tadi... keyframe baru dengan nama ulangi, seperti ulangi { Kog langsung pada state 100%.? Hal ini sebenarnya untuk mengecoh pergerakan objek agar tidak bergerak ke bawah secara langsung... Lalu buat nilai transform seperti keyframes ngambang saat state 100%, seperti ulangi { Untuk class objeknya kita beri nama yang sama seperti yang sebelumnya yaitu [ ngambang ]....ngambang { Cukup buat property margin agar posisi objek tidak terlalu di pojok... margin: 15px px; Jadi untuk class ngambangnya hanya ini saja....ngambang { margin: 15px px;
5 Terkahir pemanggilan animasi keyframes saat dalam posisi hover... Buat pseudo-class hover untuk class ngambang, seperti ini....ngambang:hover { Ini deklarasi pada hovernya secara berurutan... Pertama buat Property pemanggil keyframes yang tadi kita buat, di sini kita pakai properti animation-name, seperti berikut... animation-name: ngambang, ulangi; ( kita panggil keyframe ngambang dan keyframe ulangi secara serentak / bersama-sama ) Lalu buat durasinya dan delaynya ( jeda )... animation-duration: 0.3s, 1.5s; animation-delay: 0s, 0.3s; Untuk timingnya kita beri jenis timing ease-out untuk ngambang dan ease-in-out untuk yang ulangi... animation-timing-function: ease-out, ease-in-out; Selanjutnya pada perulangan animasi atau iteration countnya kita beri berurutan 1, infinite... Untuk yang akhir bernilai infinite agar animasi keyframe ulangi berjalan terus menggantikan animsai keyframe ngambang yang bernilai looping satu tadi, seperti ini... animation-iteration-count: 1, infinite; Agar animasi bergerak maju terus / tidak nyendat-nyendat maka kita beri property animation-fill-mode dengan nilai forwards, seperti ini... animation-fill-mode: forwards; Memberi kesan memantul kita beri juga Property animation-direction dengan nilai alternate pada keyframe ulangi, seperti ini... animation-direction: normal, alternate; Dan terakhir kita beri efek bayangan agar terlihat nampak lebih realistis...
6 box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5); Lalu kita beri gambar logo buat objek animasinya, pada tag body... <img class="ngambang" src="1.png"/> ( kita beri deklarasikan atribut class dengan nama putar dan kita beri atribut src atau tempat direktori gambar yang dimaksud ) Jadi keseluruhan codenya, seperti ini... <!DOCTYPE html> <html> <head> <title> </title> ngambang { 0% { 50% { transform: ulangi {.ngambang { margin: 15px px;.ngambang:hover { animation-name: ngambang, ulangi; animation-duration: 0.3s, 1.5s; animation-delay: 0s, 0.3s; animation-timing-function: ease-out, ease-in-out; animation-iteration-count: 1, infinite; animation-fill-mode: forwards; animation-direction: normal, alternate; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5); </style> </head>
7 <body> </body> </html> <img class="ngambang" src="1.png"/> Atau versi demonya... Sekian tutorial dari saya, sampai jumpa pada tutorial selanjutnya dari saya... Stay coding dan don t afraid about debuging... Tentang Penulis Mohammad Nur Huda Masih menjadi newbie di sela-sela orang penting, mencoba dan berharap dapat sebagaian ilmu dari mereka... :-)
Objek 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 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 terperinciMengenal Filter CSS3
Mengenal Filter CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Mungkin bagi para temen-temen yang masih terlalu asing apa itu fungsi Property filter pada css3 maka bisa tutorial ini di jadikan refrensi
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 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 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 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 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 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 terperinciPemrograman Web Week 2. Team Teaching
Pemrograman Web Week 2 Team Teaching WEEK 2 HTML IKG2I4 Software Project I Persiapan Instalasi Editor Download dan Install apilkasi editor (mis. Notepad++) Karena membantu dalam pengembangan syntax highlighting
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 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 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 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 terperinciSecara garis besar, terdapat 3 cara menginput kode CSS, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.
Sebagaimana telah dipelajari pada saat pembahasan tentang HTML (pada artikel tutorial belajar HTML), HTML pada dasarnya adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu,
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 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 terperinciTutorial CSS Desain Layout 1 Dengan HTML5 dan CSS
Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS Oleh: Ardie Jocong pada tutorial ini saya akan mencoba menjelaskan Bagaimana Membuat Desain Layout Website dengan Menggunakan HTML5 dan CSS.. Okeh Langsung
Lebih terperinciMembuat Layout Desain Awal dengan Photoshop
2 Websiteku Membuat Layout Desain Awal dengan Photoshop jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height
Lebih terperinciMembuat Form Dinamis dengan HTML & Javascript.
Membuat Form Dinamis dengan HTML & Javascript. Oleh: d-newbie Assalamualaikum wr.wb. Form tentunya sudah tidak asing lagi bagi para developer web, element html yg satu ini seolah-olah merupakan element
Lebih terperinciPerkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya
Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya Oleh: Arinadi Nur Rohmad Glyphicon ini berbasis text jadi lebih ringan dan biasa diganti warna seperti huruf pada umumnya yang berbeda dari
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 terperinciContoh Syntax: Contoh di atas menunjukkan. S e l e c t o r : h 1. P r o p e r t y : c o l o r. V a l u e : r e d. (red).
Apa Itu CSS? PENGENALAN CSS CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke
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 terperinciPenulis :
Daftar Isi Dasar-Dasar HTML Cara Membuka Notepad dan Structure Dasar HTML 1 Heading dan Cara Menyimpan dengan Ekstensi HTML 4 Basic HTML Code 6 Style 11 Formating 18 Dasar Dasar HTML Cara Membuka Notepad
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 grafik batang sederhana menggunakan JpGraph
Membuat grafik batang sederhana menggunakan JpGraph Tutorial ini saya buat dengan bentuk script php yang disertai komentar dan penjelasan. Untuk lebih mudah mempelajari tutorial ini, disarankan menyalin
Lebih terperinciDasar Pemrograman Web. Pemrograman Web. Adam Hendra Brata
Dasar Pemrograman Web Pemrograman Web Adam Hendra Brata Konsep Dasar Desain Web HTML CSS HTML HTML (HyperText Markup Language) Bahasa standar yang digunakan untuk menampilkan document web. Mengontrol tampilan
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 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 terperincibuat Lightbox mu sendiri dengan jquery
buat Lightbox mu sendiri dengan jquery Oleh: putra surya herlambang assalamualikum wr wb. apakah kamu pernah melihat gambar pada website yang ketika kamu klik lalu akan muncul suatu kotak besar yang juga
Lebih terperinciMenampilkan Google Maps V3 pada halaman website
Menampilkan Google Maps V3 pada halaman website Oleh: Hasyemi Rafsanjani Asyari Sekilas tentang Google Maps, ya semua mungkin hampir sudah tahu merupakan salah satu produk dari Google. Dengan Google Maps
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 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 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 terperinciPersiapan. File latihan.rar diekstrak. Contoh apabila Bahan diekstrak di d:\
CSS & CSS Framework CSS Cascading Style Sheets (CSS) adalah sebuah bahasa yang digunakan untuk menampilkan style dari sebuah dokumen HTML. CSS menjelaskan bagaimana elemen HTML harus ditampilkan. Persiapan
Lebih terperinciPEMROGRAMAN BERBASIS WEB. Part 1,2 HTML. By Rolly Yesputra Sekolah Tinggi Manajemen Informatika dan Komputer Royal Kisaran, 2018
PEMROGRAMAN BERBASIS WEB Part 1,2 HTML By Rolly Yesputra Sekolah Tinggi Manajemen Informatika dan Komputer Royal Kisaran, 2018 Referensi HTML5, JavaScript, and jquery 24-Hour Trainer, Copyright 2015 by
Lebih terperinciXHTML dan Dasar-dasar CSS XHTML
XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto Email: rosa_if_itb_01@yahoo.com Blog: http://udinrosa.wordpress.com Website: http://www.gangsir.com XHTML Extensible Hypertext Markup Language
Lebih terperinciMembuat Themes Wordpress sendiri - Part 1
Membuat Themes Wordpress sendiri - Part 1 Oleh: asep saepulloh Halo sahabat jaco. Kali ini saya akan membahas bagaimana caranya membuat themes sendiri di CMS Wordpress. Terkadang sahabat jaco muak dengan
Lebih terperinciMembuat Web App Mobile Canggih dengan Sencha Touch 2 - VIEW
Membuat Web App Mobile Canggih dengan Sencha Touch 2 - VIEW Oleh: asep saepulloh Holaa sahabat jaco, aduh udah lama nih gak bermain di website tercinta kitahh. Hehehehe. Abis lagi sibuk, banyak kerjaan
Lebih terperinciMEMBUAT WEBSITE SEDERHANA DENGAN HTML 5
MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5 NELI WIDI ASTUTI Neliwidiastuti97@gmail.com Abstrak Pada kesempatan ini saya akan mencoba menjelaskan tentang membuat website sederhana dengan HTML 5 dan CSS 3,
Lebih terperinciBab 5. Cascading Style Sheet (CSS)
Bab 5. Cascading Style Sheet (CSS) Overview Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan sebuah dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan
Lebih terperinciBermain dengan Marker Google Maps API
Bermain dengan Marker Google Maps API Oleh: Hasyemi Rafsanjani Asyari Marker adalah salah satu penanda lokasi berbentuk icon atau pin atau juga image. Marker bisa kita rubah dengan image dari kita atau
Lebih terperinciPemrograman Web WEEK 03 HTML LANJUT
1 Pemrograman Web WEEK 03 HTML LANJUT 2 Introduction IMAGE HYPERLINK IMAGE MAP DIV & SPAN META 1 HTML Image 3 Menampilkan gambar pada halaman web Tag: (tidak memiliki tag penutup) align Atribut Value
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 terperinciTeks dan Background SERIF SANS-SERIF MONOSPACE
Tujuan Teks dan Background Mahasiswa dapat memahami pengaturan teks melalui CSS Mahasiswa dapat memahami berbagai jenis ukuran teks Mahasiswa dapat memahami pengaturan background melalui CSS Dasar Teori
Lebih terperinciMetode Penulisan Dasar CSS
Metode Penulisan Dasar CSS Pada pembahasan kali ini, kita akan menelusuri pemograman CSS lebih dalam lagi. Ada beberapa penulisan dasar dalam CSS yang wajib kita ketahui. Beberapa penulisan itu terdiri
Lebih terperinciMembuat PopUp Menu dengan HTML dan JavaScript
Membuat PopUp Menu dengan HTML dan JavaScript by Fajran Rusadi 1. Publication Information Copyright 2004 by Fajran Iman Rusadi All rights reserved. 2. Abstraksi Dalam tutorial kali ini, kita akan membuat
Lebih terperinciMateri Pertemuan 1. Pengenalan Web Design Bagian I : Dasar- dasar CSS. lilih suhaeri WATERFIRE DEV. Kelaskita.com
Materi Pertemuan 1 Pengenalan Web Design Bagian I : Dasar- dasar CSS lilih suhaeri WATERFIRE DEV. Kelaskita.com Pengenalan Web Design 1. Sejarah singkat tentang website Sejak awal kelahiran website di
Lebih terperinciEFEK DREAM PHOTOSHOP
EFEK DREAM PHOTOSHOP Tutorial Photoshop ini untuk yang udah ngerti tool-tool di photoshop.. Kalo yang belum ngerti silahkan baca-baca dulu teori dasarnya dan praktekin dulu tutorial tingkat dasar. tapi
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 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 terperinciDasar Dasar TRANFORMASI 2D DI CSS3
Dasar Dasar TRANFORMASI 2D DI CSS3 Oleh: Irvansyah Jumpa Lagi dengan sobat jaco,.. udah gak sabar ne mau share lgi bareng tman2 jaco.. Halaman postingan saya kali ini membahas tentang transform 2D di css.
Lebih terperinciModul Web Design. Dosen: Nofiyati, S.Kom, M.Kom Program Studi Teknik Informatika Universitas Jenderal Soedirman
Modul Web Design Dosen: Nofiyati, S.Kom, M.Kom Program Studi Teknik Informatika Universitas Jenderal Soedirman Materi: Pertemuan ke- Materi 1, 2 & 3. Konsep Dasar Web Design: Perencanaan WebSite Typografi,
Lebih terperinciLAPORAN PRAKTIKUM 4 PENGENALAN CSS
LAPORAN PRAKTIKUM 4 PENGENALAN CSS Dosen Pembimbing : Dwi Susanto S.ST, MT Oleh : Noer Rhiannah A ( 4103131052 ) PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK
Lebih terperinciMODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119)
MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119) Disusun oleh : KARTINI, SKom.,MMSI LABORATORIUM KOMPUTER FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL MODUL PRATIKUM PBW 04A Cascading Style Sheets
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 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 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 terperinciSanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan
Sanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan perbuatan sebagaimana dimaksud dalam Pasal 2 Ayat (1) atau
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 terperinciCSS (Cascade Style Sheet)
CSS (Cascade Style Sheet) CSS merupakan bahasa (script) yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa
Lebih terperinciPemrograman Web. Berikut adalah contoh dari penulisan style text-align yang disisipkan di selector h1 dan paragraf.
pada selector p.tanggal dan p.utama artinya CSS akan diberikan ke paragraf dengan pemanggilan kelas tanggal dan utama. Untuk lebih lengkapnya dapat dilihat pada contoh berikut :
Lebih terperinciPercobaan 1: Pengenalan Syntax Simpan file berikut dengan nama percobaan1.html
Alat dan Bahan -- Software HTML Editor seperti Notepad++, Adobe Dreamweaver, Text Wrangler atau yang lainnya -- Bahan-bahan gambar berupa gambar-gambar kecil yang akan digunakan sebagai icon pada list
Lebih terperinciMateri 2 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com
Materi 2 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com Nama Mahasiswa NIM Kelas Kompetensi Dasar 1. Memahami cara kerja world
Lebih terperinci[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3
[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3 Oleh: Arinadi Nur Rohmad Oke, Membuat slide show adalah pekerjaan yang sulit untuk yang baru belajar CSS karena pada dasarnya Slide Show dibuat
Lebih terperinciCSS Cascading Style Sheet
CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 Pengenalan CSS CSS = Cascading Style Sheet. Suatu style yang digunakan untuk menampilkan elemen HTML. Dapat mengatur dan mengontrol tampilan
Lebih terperinci[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap
[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap Oleh: Arinadi Nur Rohmad Asalamualaikum.. Bagi yang seorang yang belum paham betul JQuery seperti saya, membuat Tab adalah pekerjaan yang cukup sulit..
Lebih terperinciBelajar Dasar HTML 5. It s all about 4rt, not how smart you are. S u p p o r t e d b y : [ C y b e r 4 r t C r e w ]
Belajar Dasar HTML 5 S u p p o r t e d b y : [ C y b e r 4 r t C r e w ] [ H I G r o u p o n F a c e b o o k ] r00t@cyber4rt:~# It s all about 4rt, not how smart you are [ H I F a n s P a g e ] 1 1 / 2
Lebih terperinciMembuat Plugin jquery (Part 1)
Membuat Plugin jquery (Part 1) Oleh: muhamad iqbal Ini adalah postingan pertama dari serial yang akan membahas tentang Membuat plugin jquery. Pada bagian ini kita akan membahas tentang konsep dasar plugin.
Lebih terperinciMODUL PRAKTIKUM PEMROGRAMAN WEB
MODUL PRAKTIKUM PEMROGRAMAN WEB Pengenalan PHP, HTML, CSS dan Javascript LABORATORIUM KOMPUTER UNIVERSITAS UBUDIYAH INDOENSIA MODUL PRAKTIKUM PEMROGRAMAN WEB 1. Review HTML 5 part 1 (Basic Attribute +
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 4 Cascading Style Sheets Tujuan: Mahasiswa mengenal komponen CSS sebagai pelengkap element HTML dalam membangun website statis. Pustaka:» HTML dan
Lebih terperinciBelajar Membuat web sederhana dengan HTML (Bagian 1)
Belajar Membuat web sederhana dengan HTML (Bagian 1) Ahmad Hasnan, Mahasiswa Teknik Mesin Universitas Brawijaya, Anggota komunitas web (webcom) Unibraw. Bahasa HTML merupakan bahasa markup (pelekat) untuk
Lebih terperinciAJAX dengan jquery Part 3
AJAX dengan jquery Part 3 Oleh: Cecep Yusuf Pada tutorial ini, kita akan belajar bagaimana mengirim data POST dari sebuah form dan dikirim dengan metode AJAX post dengan menggunakan jquery. Selamat pagi
Lebih terperinciCSS. Cascading Style Sheet. Spesifikasi lengkap di :
CSS Cascading Style Sheet Spesifikasi lengkap di : http://www.w3..org/tr/css2 Mengubah Text Mengubah Warna Mengubah Posisi Mengubah Ukuran Bagaimana cara menempatkan CSS? Ada 3 cara yaitu : Inline ( pada
Lebih terperinciLAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB PENGENALAN CSS OLEH : LISTHYA KUMALASARI
LAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB PENGENALAN CSS OLEH : LISTHYA KUMALASARI 4103131060 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI SURABAYA
Lebih terperinciBELAJAR DASAR FOOTPRINT halaman 1 BELAJAR DASAR FOOTPRINT
BELAJAR DASAR FOOTPRINT halaman 1 BELAJAR DASAR FOOTPRINT BELAJAR DASAR FOOTPRINT halaman 2 KATA SAMBUTAN Jiahhhh pake kata sambutan segala... biar kayak Lurah gitu ya? Abis mo ditulis Kata Pengantar,
Lebih terperinciPRAKTIKUM 3 Pengenalan CSS
Tujuan: - - - PRAKTIKUM 3 Pengenalan CSS Mahasiswa mampu memahami konsep dasar CSS Mahasiswa mampu memahami struktur dasar syntax CSS Mahasiswa mampu memahami penerapan warna pada CSS Dasar Teori CSS merupakan
Lebih terperinciMembuat Top Fixed Responsive Navbar Twitter Bootstrap
Membuat Top Fixed Responsive Navbar Twitter Bootstrap Oleh: ricky orlando napitupulu Salam bro and sis :), selamat datang di tulisan tutorial pertama ane ni, makasi da mau singga disini ye walopun kesasar
Lebih terperinciPEMROGRAMAN WEB 09 JavaScript Lanjut
PEMROGRAMAN WEB 09 JavaScript Lanjut Andi WRE JavaScript Objects Object Based Programming language Setiap object dapat memiliki properti dan method Properti the values associated with an object Contoh
Lebih terperinciDasar Pemrograman Web. Pemrograman Web. Adam Hendra Brata
Dasar Pemrograman Web 2 Pemrograman Web Adam Hendra Brata Teknologi Client Server Konsep Dasar Desain Web Teknologi Client Server Arsitektur Client Server Model komunikasi yang terdiri server sebagai pemberi
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 terperinciFaa Akmal-Tugas-Pemrograman-web-Bab-4- halaman-159s/d164
08018244-Faa Akmal-Tugas-Pemrograman-web-Bab-4- halaman-159s/d164 CHAPTER 4 - CSS Salah satu tantangan bagi anda saat membuat halaman Web adalah saat mengatur letak posisi elemen. Sebuah halaman Web tidak
Lebih terperinciMenampilkan multiple marker Google Maps API
Menampilkan multiple marker Google Maps API Oleh: Hasyemi Rafsanjani Asyari Masih berhubungan dengan Google Maps, kali ini saya akan mengajarkan bagaimana menampilkan banyak marker pada map. Kalau pada
Lebih terperinciSambutan Presiden RI pd Penganugerahan Pemenang Wira Usaha Muda Mandiri, di JCC, tgl 12 Mar 2015 Kamis, 12 Maret 2015
Sambutan Presiden RI pd Penganugerahan Pemenang Wira Usaha Muda Mandiri, di JCC, tgl 12 Mar 2015 Kamis, 12 Maret 2015 SAMBUTAN PRESIDEN REPUBLIK INDONESIA PADA PENGANUGERAHAN PEMENANG WIRA USAHA MUDA MANDIRI
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 terperinciDESAIN WEB STATIS DAN HTML. Dahlan Abdullah Website :http://dahlan.unimal.ac.id
DESAIN WEB STATIS DAN HTML Dahlan Abdullah Email : dahlanrpl@yahoo.com Website :http://dahlan.unimal.ac.id HALAMAN WEB KONSEP DASAR DAN TEKNOLOGI WEB World Wide Web secara luas lebih dikenal dengan istilah
Lebih terperinciMembuat Layout Web Mengunakan Table
Page 1 INFO : ILMUKOMPUTER.ID.AI By PRASETYO UTOMO Web : http://www.prasetyo771.wordpress.com Facebook : facebook.com/tyo777 No Hp : 08982069172 Email : prasetyoutomo771@gmail.com Page 2 1. Pengenalan
Lebih terperinciModul Praktikum Desain Web 2015
MODUL 1 DASAR-DASAR HTML A. TUJUAN PRAKTIKUM Melalui praktikum Dasar-dasar HTML, diharapkan mahasiswa dapat memiliki kompetensi, antara lain: 1. Memahami struktur dasar dokumen HTML. 2. Membuat dokumen
Lebih terperinciMembuat Form Search Dengan CSS3
Membuat Form Search Dengan CSS3 Oleh: Irvansyah Pasti teman2 sering dong berkunjung ke blog ataupun malah di blog teman2 ada yang namanya Form Searh.. Apa itu Form Search..?? Yup bnar sekali.. Sebuah media
Lebih terperinciPemrograman Web PRAKTIKUM 1 PENGANTAR
PRAKTIKUM 1 PENGANTAR TUJUAN BELAJAR Mengenalkan dunia web MATERI Teknologi dan Terminologi Web (konsep dan istilah di dunia web) TUGAS Tidak ada TEORI W3C Singkatan World Wide Web Consortium suatu konsorsium
Lebih terperinciINI STUPID!... Noob!... CUPU!... Orang Bilang Kaya Gitu untuk TRADER yang MASIH Karakternya seperti diatas! :D..
Money Management Hai sahabat FBI, kebetulan saya (Rizky Lim) ingin membagikan ebook GRATIS PREMIUM ini senilai Rp 275.000,- GRATIS! ini untuk temen-temen yang ingin mendalami SMART MONEY MANAGEMENT. Money
Lebih terperinciAJAX dengan jquery Part 1
AJAX dengan jquery Part 1 Oleh: Cecep Yusuf Kali ini saya akan share tutorial AJAX dengan jquery. Dengan menggunakan jquery, penggunaan AJAX akan jauh menjadi lebih mudah. Penjelasan Kali ini saya akan
Lebih terperinciPemrograman Web. Cascading Style Sheets. Created by : Rifqi Sambas Khairurrohman
Pemrograman Web Cascading Style Sheets Created by : Rifqi Sambas Khairurrohman Home Page Anatomi CSS Macam Selector Cara Kerja Anatomi CSS CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector,
Lebih terperinciPengenalan Script. Definisi HTML
1 Pengenalan Script Pada bab ini akan dibahas bahasa script yang dapat digunakan untuk membuat halaman web. Untuk dapat membuat halaman web bahasa script pertama yang harus anda kenal adalah HTML. HTML
Lebih terperinciTutorial Mengedit Halaman HTML dengan Dreamweaver
Tutorial Mengedit Halaman HTML dengan Dreamweaver Oleh : Ruth Ema Febrita Pada tutorial sebelumnya, kita sudah berhasil melakukan konversi dari desain website yang kita buat menggunakan Photoshop menjadi
Lebih terperinciGir UP. Materi. Menyiapkan New Composition
Gir UP Materi Pengimporan file Composition-Cropped Layer Penggunaan layer PSD Penduplikatan layer Penggunaan animasi full transform, sebagai basic animasi Menggrup layer Pre-Compose Menyiapkan New Composition
Lebih terperinciModul 3 CSS CASCADE STYLE SHEET
Modul 3 CSS CASCADE STYLE SHEET Fungsi: Mengatur style elemen yang ada di halaman web, mulai dari memformat text dan format layout. Mengatur kekonsistenan style pada elemen tertentu Keuntungan CSS: Ukuran
Lebih terperinciSIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom.
SIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom. Dreamweaver merupakan aplikasi yang digunakan untuk membuat website secara profesional. Pada tutorial ini akan dijelaskan
Lebih terperinci