SVG Stroking (HP)

Stroke adalah kata lain dari border, garis tepi yang mengelilingi sebuah element. Untuk mendefinisikan stroke dalam SVG, kita bisa menggunakan attribute stroke. Berikut contohnya :

Berikut hasilnya :

Untuk mengatur ketebalan stroke, kita dapat menggunakan attribute  stroke-width.  Berikut contohnya :

 Berikut hasilnya : 

Untuk mengatur style pada ujung stroke, kita dapat menggunakan attribute  stroke-linecap . Berikut contohnya : 

Berikut hasilnya :

 Untuk membuat garis putus-putus kita dapat menggunakan attribute stroke-dasharray. Berikut contohnya : 

Berikut hasilnya :

 Sekian dari saya, semoga bermanfaat! Terima Kasih, Tuhan memberkati.

CSS3 Animations, Images, Buttons (RAS)

Animations , seperti namanya disini kita akan memperlajari lebih dalam tentang CSS, disini karna gambar tidak bisa bergerak maka saya tidak bisa memberikan ouput atau hasilnya , jadi teman-teman hanya bisa mencoba dan lihat hasilnya, berikut contohnya :

ini contoh basicnya :

ini untuk mengatur kecepatan ketika menggerakan object , yang disebut animation-delay : 

dan yang ini contoh untuk memantulkan kembali objectnya : 

silahkan dicoba :D

Images, ya gambar , disini kita akan mengatur posisi , bentuk, pola , dan text.

yang harus diperthatikan adalah : 

nah ini codingan untuk mengatur agar setiap sudut pada gambar itu tidak lancip sehingga agak terlihat agak rapi sedikit

nah ini codingan untuk membuat gambar yang mulanya segi empat diubah menajdi bulat / lonjong, yaitu dengan menggunakan border-radius 

nah kemudian disni kita mengatur kecerahan atau transparansi pada sebuah gambar , yaitu opacity : 

Kemudian ada Buttons , buttons ini berbeda dengan button biasanya , yang ini bisa di perbesar atau di modif, contohya : 

dan diatas adalah perbedaan button biasa dengan button yang telah di modif 

codinganya sebagai berikut : 

yak itu saja yang bisa saya berikan kepada teman-teman , selebihnya teman bisa pelajari :)

terima kasih--

Bootstrap Grid Examples (AW)

Halo guys, Kembali lagi dengan saya Andi William

Hari ini saya akan membahas tentang contoh Grid di Bootstrap.

Ada beberapa jenis pembagian Grid di Bootstrap, antara lain :

Three Equal Columns

---

Tiga Kolom dengan lebar yang sama.



Cara membuatnya :

Three Unequal Columns

---

Tiga Kolom dengan lebar yang berbeda-beda.



Cara membuatnya :

Two Unequal Columns

---

Dua Kolom dengan lebar yang berbeda.



Cara membuatnya :

Two Columns With Two Nested Columns

---

Dua Kolom dengan Dua Kolom yang berada didalam.



Cara membuatnya :

Mixed: Mobile And Desktop

---

Campuran Mobile dan Desktop



Cara membuatnya :



Info lengkapnya ada di http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
Sekian dari saya, semoga dapat membantu kalian, Sampai Jumpa.

--Andi William--

BOOTSTRAP STACKED/HORIZONTAL - BOOTSTRAP GRID SMALL (ALC)

Bootstrap Grid - Stacked-to-horizontal

Pada pembahasan kali ini, saya akan mengajak Anda untuk membuat sistem grid dasar yang mulai banyak keluar di ponsel / tablet sekarang ini, sebelum menjadi horizontal pada desktop (media / perangkat besar)

Saya akan mmberi contoh dengan 2 kolom layout yang akan menghasilkan 50% banding 50% pada layar. Kecuali untuk layar kecil, maka akan otomatis menjadi 100%.

Contoh penggunaannya adalah:

Hasil pada layar besar:

Hasil pada layar kecil:

Bootstrap Grid - Small Devices

Sebelumnya kita sudah membahas tentang dasar grid. Nah disini saya akan membahas lebih lanjut tampilan untuk layar yang kecil. Contoh penggunaannya adalah:

 Maka hasil yang akan muncul pada layar adalah:

 Sekian penjelasan dari saya, semoga bermanfaat ^^

Bootstrap Afixs,Grid System (VA)

The Afiks Plugin memungkinkan unsur untuk menjadi ditempel (terkunci) ke suatu daerah pada halaman. Hal ini sering digunakan dengan menu navigasi atau tombol ikon sosial, untuk membuat mereka "tongkat" di kawasan tertentu sementara bergulir ke atas dan ke bawah halaman.
Plugin toggles perilaku ini dan mematikan (perubahan nilai CSS positiondari staticke fixed), tergantung pada scroll position.

Dengan Afixs, ketika kita scroll ke atas dan ke bawah halaman, menu selalu terlihat dan terkunci di posisinya.

Cara Membuat menu Affixed Navigasi

Contoh berikut menunjukkan cara membuat menu navigasi tetap horisontal:

Maka hasilnya adalah nav bar diatas akan tetap ditampilkan meskipun kita scroll ke bawah secara terus menerus :

Misalnya Dijelaskan

Tambahkan data-spy="affix"ke elemen Anda ingin tetap.
Opsional, tambahkan data-offset-top|bottomatribut untuk menghitung posisi scroll.

Bagaimana itu bekerja

Imbuhan Plugin matikan antara tiga kelas: .affix, .affix-top, dan .affix-bottom. Setiap kelas mewakili negara tertentu. Anda harus menambahkan properti CSS untuk menangani posisi yang sebenarnya, dengan pengecualian position:fixed pada .affixkelas.

• Plugin menambahkan .affix-topatau .affix-bottomkelas untuk menunjukkan unsur ini di paling atas posisi paling bawah atau. Positioning dengan CSS tidak diperlukan pada saat ini.


• Bergulir melewati elemen ditempel memicu pembubuhan yang sebenarnya - ini adalah di mana plugin menggantikan .affix-topatau .affix-bottomkelas dengan .affixkelas (set position:fixed). Pada titik ini, Anda harus menambahkan CSS topatau bottomproperti untuk posisi elemen ditempel di halaman.


• Jika bagian bawah diimbangi didefinisikan, bergulir melewati itu menggantikan .affixkelas dengan .affix-bottom. Sejak offset adalah opsional, menetapkan satu mengharuskan Anda untuk mengatur CSS yang sesuai. Dalam hal ini, tambahkan position:absolutebila perlu.

Pada contoh pertama di atas, plugin Afiks menambahkan .affixkelas (position: fixed) ke <nav> elemen ketika kita telah menggulir 197 piksel dari atas. Jika Anda membuka contoh, Anda juga akan melihat bahwa kita menambahkan CSS topproperti dengan nilai 0 ke .affixkelas. Hal ini untuk memastikan bahwa navbar tetap di bagian atas halaman di semua waktu, ketika kita telah menggulir 197 piksel dari atas.

Grid System

Sistem grid bootstrap memungkinkan hingga 12 kolom di halaman. Sistem grid bootstrap adalah responsif, dan kolom akan menata kembali tergantung pada ukuran layar: Pada layar besar mungkin terlihat lebih baik dengan konten terorganisir dalam tiga kolom, tetapi pada layar kecil akan lebih baik jika item konten yang ditumpuk di atas satu sama lain.

Grid Kelas

Sistem Bootstrap jaringan memiliki empat kelas:

• xs (untuk ponsel)
• sm (untuk tablet)
• md (untuk desktop)
• lg (untuk desktop yang lebih besar)

Kelas-kelas di atas dapat dikombinasikan untuk membuat layout yang lebih dinamis dan fleksibel.

Aturan Sistem Grid

Beberapa Bootstrap aturan sistem grid:

• Baris harus ditempatkan dalam .container(fixed-width) atau .container-fluid(full-width) untuk keselarasan dan padding
• Gunakan baris untuk membuat grup horizontal kolom
• Konten harus ditempatkan dalam kolom, dan hanya kolom mungkin anak-anak langsung dari baris
• Kelas yang telah ditetapkan seperti .row dan .col-sm-4tersedia untuk cepat membuat layout jaringan
• Kolom membuat talang (kesenjangan antara konten kolom) melalui padding. Padding yang disajikan di baris untuk kolom pertama dan terakhir melalui marjin negatif pada.rows
• kolom Grid dibuat dengan menentukan jumlah 12 kolom yang tersedia yang ingin span. Misalnya, tiga kolom yang sama akan menggunakan tiga.col-sm-4

Struktur dasar dari Bootstrap Grid

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

Jadi, untuk membuat tata letak yang Anda inginkan, membuat sebuah wadah ( <div class="container">). Selanjutnya, buat berturut-turut ( <div class="row">). Kemudian, tambahkan jumlah yang diinginkan dari kolom (tag dengan tepat .col-*-*kelas). Perhatikan bahwa angka-angka dalam .col-*-*harus selalu menambahkan hingga 12 untuk setiap baris.

Tutorial kali ini sampai disini saja.
Thankyou for reading.
Semoga bermanfaat dan God Bless you :)