Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN TOOLS
Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.
Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.
Your ads here!!!
Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

Resources

21 Februari 2015

UNTITLED

21 Februari 2015

0 Komentar WTF
Ketika sobat mengunjungi web codepen, coba tengok halaman fork, project atau new code. Begitupun coba biasakan oleh kalian ketika menyatroni web github, acak-acak halaman Repositoriesnya. Memang butuh waktu santai kalau mau melakukan itu semua ;)) Oke, saya akan berbagi karya cipta dari hasil mengacak-ngacak one repositories page git-hub by victornpb! This is the page victornpb (Victor) repositories. AA Koben menemukan ini urlchecker! Karena tidak ada demo page, maka saya download dulu, tampaklah seperti ini:urlcheckerNamanya urlchecker, mungkin tujuan kreasi itu adalah untuk mengecek url apakah masih aktif/tidak yang akan tampil di dalam konten iframe. Dulu saya pernah membuat hal serupa (menampilkan web pada kolom frame meny style), tetapi lupa judul postingannya :D
Dikarenakan tampilan url-checker masih polos, saya coba memasukan bootstrap by bootstrapious. Ternyata cukup memusingkan harus tahu selector, description, identify bla-bla-bla untuk membuatnya #:-S Hasil akhir urlcheckerFitur apa saja yang gue tanamkan di sana...hohoho :-"
Encode-DecodeMini CodePen in 439 Bytes get from Tommy Hodgins.codegolfIDEcodegolfIDEmarkdownmarkdown-herebrowserpadjQuery MiniColors

Itulah fitur-fitur yg gue cekokin, di samping fitur tersembunyi lainnya! Apakah sobat tertarik memiliki itu semua? Silahkan beli seharga $1 billion =)) Download saja, kemudian silahkan kalian tes-tes dan pelajari sendiri karyaku ini :-B
Download here urlchecker modification by Beben-Koben URLchecker-Project.7z - Google Drive.

Kalau websitenya pakai anti iframe, tidak akan muncul, dan kalau ada website yang memasang ikaln popup akan terdeteksi, sobat tinggal pencet tombol TAB pada keyboard untuk mengizinkan.

BONUS

To-do List with animated interactions - Text Image Mosaic - Menu - Radio Button Group with Gradient - Image loading effects [background-size: 0, :before, :after] - CSS Mega Menu - CSS 3d box - editable content - Product Template powered with Bootstrap - Pure CSS Drag & Drop - Morphing Fullscreen Navigation Menu [~60fps animation]

Tunggu karya-karyaku yang lainnya okeee *-:) :-h

1 Komentar WTF
Gara-gara memosting tentang image tilt fffect CSS, saya jadi melanglang buana menjelajah! Ternyata kalau kita berbicara mengenai efek pada gambar, itu bisa termasuk juga ke dalam tutorial dengan tema image manipulation (manipulasi gambar) :D Salah satu javascript yang lumayan terkenal dalam urusan memanipulasi gambar adalah CamanJS.
Berikut beberapa sources kreasi yg memakai Caman-JavaScript:
  • CamanJS Interactive Examples.
  • CamanJS Filter Example.
  • Image Editor Demo Built with Caman.
Dari ketiga rujukan itu, ternyata tidak ada yg menyertakan fitur upload image dari local storage :-?? Saya jadi penasaran, dan mencoba-coba kasak-kusuk dengan modal nekat mencari cara bagaimana dari ke-3 source di atas digabungkan fitur-fiturnya plus fitur upload local image from your storage? Hasil akhir seperti berikut:CamanJSKarena saya pengguna sejati mozilla, karya ini hanya bisa di buka pada browser tersebut :D Soalnya kalau di buka di chrome ada perbedaan penulisan path yg mana saya malas alias tidak ngerti kinerja browser google chrome ;)) Bagi yg berminat mencoba dan mengembangkan silahkan download CamanJS 127 KB.
Tested on mozilla versi 42 & 52. Kalau kepengen yg lebih canggih dan keren punya juga ada kok! Let's cekidot...

jspaint

jspaint

miniPaint

miniPaint

webgl-filter

webgl-filter

pm-image-editor

pm-image-editor

JsImgEditor

JsImgEditor

nuophoto

nuophoto

jie

JIMP-Image-Editor

tui image-editor

tui.image-editor

summer

summer

iwage

iwage

imageeditor by ckm100

imageeditor

photo-editor

photo-editor

Sino Image Editor

SinoImageEditor

Image Editor by Tom Yuan

ImageEditorDemo

Html Image Editor

HtmlImageEditor

editest

editestHarap diperhatikan syarat-syarat yg berlaku baik itu file atau browser sobat sudah mendukung atau belum (canvas, webgl, etc). Satu lagi, karena ini permainan dengan si canvas, jangan coba-coba ngedit gambar dengan size yg besar kalau nggak mau browsernya nge hang yah >:)

Jangan tanya saya soal script, karena saya tidak mengerti sama sekali ^:)^

0 Komentar WTF
Salah satu cara mendapatkan ide untuk postingan adalah mengacak-ngacak arsip web-blog orang :D In 2015/05/28 master Mary Lou telah memposting tentang Image Tilt Effect. Silahkan sobat baca, lihat demonya kemudian jangan lupa download juga sourcenya. Menurut gue pengertian tilt effect adalah suatu efek ngeblur, berbayang, bergerak-gerak di campur menjadi satu...nah begitu kira-kira ;)) AA Koben cuman mau menjelaskan cara bagaimana pemakaian image tilt-effect karya Mary-Lou ini!

Perhatian: Teknik ini menggunakan beberapa properti CSS yang hanya bekerja di browser modern (yaitu 3D Transforms). Efeknya hanya bekerja pada hover yang berarti efeknya tidak dapat dilihat pada perangkat sentuh pada saat ini.

Setelah mendapatkan hasil download berupa ImageTiltEffect.zip silahkan sobat lakukan un-zip. Kalau di sana file menjadi satu dengan keterangan dan demo dari si-empunya. Inilah tugas saya untuk memisahkan bumbu-bumbu utama dalam membangun efek tilt. Hal pertama yang mesti sobat lakukan adalah memasang tilteffect.css & tiltfx.js ke dalam template blog

Berikut adalah kode CSS hasil pemisahan yg saya buat. Silahkan sobat edit-edit lagi sesuai dengan keperluan. Kalau sobat sudah mempunyai CSS selector gambar pd template, tinggal atur-atur propertinya saja!

.tilt_img {
position: relative;
height: 0;
width: 400px;
height: 300px;
margin: 5px auto;
cursor: move;
}
.tilt_img-4 {
overflow: hidden;
}
.tilt_img img {
max-width: 100%;
display: block;
}
.tilt_img-2::after {
content: '';
position: absolute;
box-shadow: inset 0 0 50px 30px rgba(2,0,37,0.8);
pointer-events: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.tilt_img-3 .tilt {
-webkit-filter: grayscale(100%) brightness(105%) contrast(120%);
filter: grayscale(100%) brightness(105%) contrast(120%);
-webkit-transition: filter 0.5s, -webkit-filter 0.5s;
transition: filter 0.5s, -webkit-filter 0.5s;
}
.tilt_img-3 .tilt:hover {
-webkit-filter: none;
filter: none;
}
.tilt_img-4 .tilt {
width: 120%;
height: 120%;
top: -10%;
left: -10%;
}

/* tilteffect.css */
.tilt {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}
.tilt__back,.tilt__front {
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.tilt__back {
position: relative;
}
.tilt__front {
position: absolute;
top: 0;
left: 0;
}
.tilt_img-border .tilt__back,.tilt_img-border .tilt__front {
border: 1px solid #333;
}
.tilt_img-border .tilt {
overflow: visible;
}

Ada 12 macam efek yg bisa kalian dapatkan, selain penggunaan untuk background! Sobat bisa lihat demonya. Sudah begitu aja ah...wekekekekkk =:)

Similar and other

  • Dua Cool CSS3 Effect.
  • Cool CSS3 Zooming and Tilting Effect
  • Mouse over Parallax or 3D Tilt Effect
  • jQuery Plugin To Create Tilt / Parallax Effects For Images
  • A tiny parallax tilt effect for jQuery
Bay Bai :-h

0 Komentar WTF
Dapat korban baru lagi untuk dijadikan mode offline working >:) Tidak sengaja menclok ke blog.kangrian.com ternyata gue tengok ada artikel dengan judul berbau-bau "HTML Live Preview Editor Online" Kemudian pada main menu ada link tertuju ke editor tersebut! Pas saya lihat WOW so smooth HTML editornya ;)) ane coba dan JRENG tidak jalan 8-X Usut punya problemo sepertinya dia lupa menghostingkan seluruh script yang ada ke hostingan miliknya! Teliti itu karya punya source ternyata datang dari TheInsomniac CloudEditCloudEdit.

Sama Kang Rian di modif dengan menambahkan ini-itu. Sama AA Koben di modifikasi lagi dengan tambahan yang lebih edan punya B-) In screenshotHTML-Live-EditorTerlihat sama saja iya kan bro ;)) Cloudedit HTML-editor jika sobat melakukan klik kanan pada area kotak akan tampak beberapa framework yg sudah tersedia antara lain:Autoprefixer, Less CSS, Sass CSS (experimental), bootstrap, dll. Editor ini juga sudah langsung terintegrasi dengan jQuery script. Jadi kalau sobat mau bermain-main dengan jQuery/JavaScript tinggal pakai. Berikut beberepa extra yg gue sisipkan!

ColorPicker

ColorPicker

Live HTML Escape Editor

Live-HTML-Escape-Editor

Live Less Editor

Live-Less-Editor

Live Markdown Editor

Live-Markdown-Editor

Playground for Sass.js

Playground-SASS

HTML, CSS & JavaScript Minifier/Maxifier

Minifier-Maxifier

Mudah-mudahan semua file source sudah terambil dan dapat berjalan dengan offline secara maksimal :)
Silahkan: drive.google.com/open?id=1NzLofctFU6t9Da0GuIxIQl0B-U0HZawM
Pass .7z: hL*J3WK-W%fxV=_&

Hadiah halloween :(|)


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE