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 ☺
Ketika kita menemukan sesuatu yang membuat terkesima, mau tak mau ada rasa ingin melakukan penelusuran lebih akan suatu hal tersebut! Bagi saya pribadi jika bertemu dengan hal semacam itu akan langsung melihat source link dan melakukan sedikit utak-atik apa bisa dijadikan bahan postingan atau tidak ;)) Dua contoh hal yg membuat gue berdecak towewewww creativity pure using CSS :-O
Kadang sangkin asyiknya melakukan atik-utak gue lupa menyimpan link tujuannya, habisan masuk sampai ke dalam-dalam merangseuk bagaikan mesin bor :)) Seperti contoh yg satu ini, membuat taging VS seperti tabel, laksana compare display @-)
Silahkan edit-edit/tambah-tambah lagi kode yg ada sesuaikan dengan kebutuhan masing-masing :) Link sumber ini yg saya lupa ada dimana! Tetapi ada disatu tempat didalam link BONUS yg akan gue bagikan untuk kalian :)>-
BON US
Hover with Clip-Path Effect - Sliding tabs | CSS transitions only - Image Compare Viewer - CSS Speech Bubble (svg data uri) - Holiday Feature Folding Cards - Expand Information - NOISY IMAGE GRID - Image Hovers - Card Reveal - CPC - Image hover - Shifting Image on Hover - Image Magnifier Glass on Hover - CSS Image Hover Effects - Random Picker (Image Hover) - Extreme Hover - HTML + CSS - CSS Clip-Path Hover Effect - Custom Search - TGMT - Morse - CSS Image Gallery - Declaring Bits of Unselectable Text - CSS Image Hover Effects - Very Simple Pure CSS Carousel - CSS-only modal - CSS variable image zoom ππ - Select All... Then Select Some - A Pen by ycw - Pure CSS "Authentication" π π - Pure-CSS Tooltips - A Very Simple Pure CSS 3D Room - px2rem - CSS Only, Content Overflow Shadows - Button Neon (: hover fx) - Border Buttons - Social Media Buttons Hover Effect - Pure CSS navigation toggle animation - Movie Ticket Animation - Loop 23 - Gradient border - Button Hover
Keder euy mosting pake editor blog baru #-o mau upload gambar saja jadi ribet :))
Tahun telah berganti menjadi baru kembali, tetapi aktifitas mosting belum ada sama sekali :P Bukan tanpa sebab belum melakukan post! Akan tetapi di tahun 2019 ini front-end blog/web sudah semakin maju dan instant. Banyak para developer berlomba memamerkan kabisa dengan membuat berbagai macam tools :D Apakah sobat kenal dengan Tutorial Republic Salah satu web online development tutorials seperti W3Schools. Di website tutorialrepublic ada beberapa tools, salah satunya adalah HTML Editor Seperti kalian ketahui, blog gue tempat mengumpulkan source html-editor? Dengan nama codelab, dia adalah korban gua berikutnya ;)) Sobat bisa mencomot dengan gratisan, plus tool color picker jebolan developer.mozilla.org
Codelab
Color Picker
Download: tutorialrepublic.7z in Google Drive.
Password: siganteng-kalem
Jika sobat ingin mempelajari tentang color alias warna, sobat bisa mencoba ColorBox by Lyft Design. Kepengen emoticon or emoji you can try OpenMoji & Emoji Builder. Ingin melihat efek color blend sobat bisa satroni Blendy. Cobalah terlebih dahulu google fonts dengan menggunakan Tyffle. Fix broken css grid using by Broken Grid. Secuil koleksi Front-End-Wizard by chiragbhansali. Easily make tints and shades in 10% increments use Tint & Shade Generator or Color Tinter and Shader.
BONUS...
Material UI popup - Minimal Button with Amazing Hover Effects - Fancy Hover Animation #2 - CSS Image Comparison Slider - Multiline padded text: experiments - CSS3 buttons hover effects with FontAwesome5 - Opening Credits - CSS3 Glass Buttons v2 - PaperTooltip - Perspective Mouse Scroll - CSS button with bubbles - SVG water effect - CSS only drop down menu - Slider on hover - Custom Checkbox Slider with Label - Sticky Progress - Four Side Navigation - CSS-only ripple toggle with dynamic text colour - Image Scrambler Ft. Hunter the Pup! - 3D Retro Buttons - Emerging dropdown - Folding Profile Gallery - CSS Reflection - Overlay menu - Simplicity 6 - Minimap with CSS element() & HTML input range - Hotel page concept - position sticky can do a lot - CodePen Portfolio Generator - Search Box Focus Effect - Select Text And Share - Expanding grid on click - iFrame Preview on Hover - GLITCH
Sepertinya pada tahun 2019 ini saya akan banyak menjadi silent reader dari pada posted writer :D :-h
Ada satu topik hangat yang lagi menjadi sorotan di dunia CSS! Tepatnya adalah CSS Borders. Topic ini menjadi ramai karena si border dikombinasikan dengan efek animation. Sehingga border yang biasanya kita lihat selalu statis sekarang bisa menjadi dinamis berlenggak-lenggok seperti seorang penari jaipong :D
Salah satu contoh telah dibuatkan oleh codepener Mstr. Piotr Galor Pure CSS Gooey MorphMantap toh :-bd Mungkin itu terlalu berdisko, bagaimana dengan karya dari Mstr Nick Lewis Animating border-radius
Animating border radius
Bagaimanakah caranya kita bisa mendapatkan gaya border seperti itu? Kalau bikin secara manual mungkin akan sedikit ribet, tetapi berbeda cerita jika kita mempunyai tools-nya :D
Silahkan pilih mau pakai yg mana:
Border radius
Fancy Border Radius
Sudah begitu ajah mostingnya, urusan sobat mo dipakai untuk apaan tinggal kreasikan sesuai dengan kebutuhan :)
Bonus
envelope border - Making an Image Magnifier in jQuery - ColorBox by Lyft Design - Exploding Bubble Text - Pure CSS Toggle Buttons | ON-OFF Switches - Social Media 3D Ghost Buttons in just CSS - A Fancy CSS Animated Gallery Covers - Color Namer - Random color harmonies - Black Mirror Cracked Text Effect - 100DaysCSS-12 - Generate a Colour - Glitch Effect on Hover - Stacked Image Gallery - SVG Menu Experiments w/viewBox Zoom - Portfolio Items CSS3 transitions effects - Pure CSS Select Box With Direction Aware Hover Effect - Just Another Menu (Pure CSS) - Social share button - Media Icons
Lumayan sudah agak lama tidak login ke account blogger, padahal online tiap hari :D eh sekalinya log-in ada beberapa pemberitahuan!Apakah ada di antara sobat yang memposting dan menerangkan tentang hal tersebut :-?? Gue menemukan satu tutorial CSS mengenai Hover Effect Macam begini saja bumbunya
Informasi berharga di tahun 2018 bagi blogger yang tidak mau di panggil ketinggalan berita up to date, from Mr. Beben Koben in the house :-) Pada postingan sebelumnya mengenai text editor, gue punya satu rekomendasi lagi bagi kalian untuk melihat Textbox.io Bagi kalian yg berminat, silahkan dipelajari lebih lanjut, ini saya kasih mode offline-nya textbox.io.7z ;))
Mungkin di antara elo-elo semua sudah tidak asing lagi dengan Font Awesome? Jangan dikira tidak akan ada saingan, are you ready for Fontisto :-? Kalau mau memepelajarinya, ini saya kasih fontisto mode off-line tetapi masih versi v=201 :D
Sudah 2 siki info tuh gue berikan! Lanjutkan inpoh dengan yg lagi mencari tutorial ttg zoom image you must check this out swapping images with the sizes attribute. Saya membaca artikel dari Philip Walton, walau kagak ngerti juga! Satu hal yg menjadi perhatian ane adalah halaman demonya tentang Responsive Components! Kalau anda mau berkreatifitas sedikit, bisa dijadikan halaman dashboard admin tuh :-" Kalau malas buatnya silahkan sikat sufee admin dashboard by puikinsh. Nih juga niiih hajar WebSlides. Mau memanipulasi gambar dengan HTML5 canvas, gua beri blend.js Build a download button full of micro interactions for stylish blogger.
Apalagi yaaa...
Tidak punya aplikasi photoshop gunakanlah versi online
Pixlr Editor
Pixlr Express
Photopea
Photoshop Online Free
Sumopaint Lite
miniPaint
Bagi kalian twitter maniac Twemoji Awesome. CKEditor 5 v10.0.0 sudah keluar loh! Udahan ajah yah bro, capek ngeutik, males :P
Memasuki bulan ke-2 di awal tahun 2018 ini, belum menemukan sesuatu yang gereget punya bro :-< Lumayan ada informasi dari CSS-Tricks yg bisa sobat baca! Melakukan keliling ternyata para developer sedang rajin pada membuat tolls warna. Ini ada beberapa gue dapet, colorable, colouris and .colors(). Ini baru juga sob, tool untuk melihat jumlah kata/kalimat word counter. Rada susah untuk saya dalam mengikuti perkembangan berita dari web Codrops. Karena web browser engine ane tidak update :D
Dikarenakan belum ada yg keren punya, dan lagi pada doyan membuat tools, maka dari itu AA Koben juga akan berbagi sedikit 1 buah tools bagi kalian ;)) Bagusnya enggak seberapa dan sudah tersedia pada setiap bawaan engine-browser. Kalian sudah pada kenal tentunya, tak lain dan tak bukan tool tersebut adalah fitur View Page Source. Klik kanan pada mouse atau pencet tombol keyboard Ctrl + U langkah tercepat untuk mengaksesnya!
Kalau mau melihat page source 10 halaman pages-site sekaligus bagaimana, dan tanpa membuka halaman tersebut terlebih dahulu?
Silahkan bagi kalian yg perlu, lakukan Save Page As pada link berikut view-page-source.
Kalau mau berjalan secara offline, silahkan buka hasil save pada text editor kalian, kemudian cari kode...<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>...gantikan link jQuery kepunyaan google dengan link script jQuery yg ada pada komputer/host/hard-disk/flash-disk kalian!
BONUS
Css text effects - Social.svg.min - CSS-Cursors - Simple and Responsive Menu (HTML5 and CSS3 only) - Full Page Horizontal Accordion - Pure CSS Emoji Checkbox - Inspirational hover in portrait image - The Social Drawer
Apa yang sobat lakukan jika menemukan sebuah link page dimana kontennya tampak berguna. Apalagi kegunannya itu bisa dipakai di kemudian hari. Minimal pasti kita akan melakukan save link tersebut! Cara lain yaitu dengan melakukan Save Page As... toh? AA Koben akan berbagi trik & tips bagaimana cara menyimpan/mengkoleksi links-page yg bermanfaat bagi kita, untuk bisa dibaca kapan saja sobat inginkan! Cara tercepat sudah tentu melakukan Save Page As...(Web Page, complete), cara kedua dengan jasa web convertor (image, PDF, Word, or etc), cara ketiga dengan bantuan tools bawaan browser (Web Developer).
Ide ini saya dapatkan dengan menggunakan browser mozilla, dimana pada browser engine ini terdapat satu fitur Enter Reader View (berada tepat dibelakang box search dekat tombol Reload Page), ditandai dengan icon buku.Kalau icon buku tidak muncul, sobat bisa melakukannya secara manual dengan rumusan about:reader?url=LINK-TUJUAN Kita akan melakukan Save Page As... di mana posisi halaman page terbuka dengan format Reader View :-? Sebagai contoh silahkan sobat download About-Reader.7z kemudian ekstrak.
Tahapan dalam membuat Reader-View adalah
Buat satu folder dan beri title (About-Reader).
Di dalam folder About-Reader, buat sebuah folder lagi beri title (Data-files).
Di dalam folder Data-files, buat kembali 3 buah folder (atau lebih sesuai kebutuhan) beri nama (css, image, and js)
Folder-folder tersebut gunanya adalah untuk menyimpan data hasil dari melakukan Save Page As...dengan format Reader-View.
Ilustrasi...
Ketika sobat menemukan halaman website dan dirasakan isi konten sangat bermanfaat, lakukan klik pada icon buku (Enter Reader View). Dilanjutkan dengan klik kanan pada mouse (pada keyboard pencet Ctrl + S) Simpan hasil save pada folder yg dibuat tadi (dalam contoh folder About-Reader)
Nanti akan didapatkan 2 jenis hasil save file yg berbeda. Saya melakukan percobaan dengan link address https://www.w3schools.com/html/default.asp Ketika di save akan menghasilkan hasil save-an HTML Tutorial.htm dan HTML Tutorial_files Buka folder HTML Tutorial_files, kalau ada gambar simpan gambar tersebut pada folder image yg berada di folder Data-files.
Kemudian buka teks editor sobat (Notepad), buka file HTML Tutorial.htm, gantikan semua link yg tertuju ke folder HTML Tutorial_files degantikan dengan link ke Data-files (css, images, and js).
Memang agak sedikit kelihatan ribet, tetapi kalau sudah dipraktekan sangatlah mudah sob :) Inti dari trik ini membuat semua halaman page yg ingin kita simpan tetapi dalam format Reader-View. Dengan begini, kita tidak usah melakukan save CSS, JS secara utuh seperti kita melakukan Save Page As... secara normal. Kalau normal CSS/JS yg tidak perlu akan ikut tersave!
Semoga kalian faham & mengerti apa yg saya maksudkan, sebagai contoh hasil kerja saya melakukan save-page-as dengan format reader-view, dengan korban web
https://adam-marsden.co.uk/css-cheat-sheet
Download CSS Cheat Sheet on Reader-View Mode.
Bonus
Recursive Hover Nav (Only CSS) - MacOS Dock with CSS - Floating Nav to Top Fix Expand v2 - Split Text Menu - VVVVV - Show Hide - Drop Menu Pure CSS3 - Curtain Reveal Effect with Sticky Positioning & Scroll Snap Points No-JS - Bubbly button (Design by Gal Shir) - HTML5 Tags
Banyak sekali kegunaan dari keberadaan fitur syntax highlighter Apalagi bagi kalangan para coderer, programmer, writer, or blogger! Sangkin pentingnya banyak di luaran sana web online yang menawarkan jasa pemasangan/pemakaian dari SyntaxHighlighter. Paling instant dan mengenakan sobat bisa mencoba: hilite, highlight.hohli, or tohtml. Kalau sobat pengen permanen dipasangkan di blog, maka pilihan AA Koben patut diperhitungkan ;))
Pilihanku jatuh kepada CodeMirror. Yes, kenapa gue memilih ini, karena ada beberapa penggunaan tag yg tidak biasa dalam pemakaiannya nanti! Pada umumnya taging yg di gunakan dalam pemakaian syntax-highlighting ketika sobat melakukan posting code/script adalah penggunaan tag <pre> atau <code>
Dengan bantuan codemirror & jQuery, sekarang kita bisa menuliskan script/coded secara suka-suka. Nanti sobat bisa memakai tag pre, code, div, p, or etc dalam pemanggilannya. Bahan-bahan yg mesti tersedia adalah...
Tempatkan bahan² di tempat semestinya :D Tambahkan declaration properti CSS sesuai selera. Jika sudah terpasang, jQuery script, tidak usah dipasangkan lagi. Perhatikan juga mode codemirror-nya. Pada kasus ini saya mencomot mode htmlmixed. Kalian bisa ganti/tambahkan sesuai kebutuhan modenya. Ane juga memakai link via CDN by cdnjs.
Langkah terakhir pasangkan seonggok script berikut sebelum/diatas tag </body>
Ketika mau postingkan kode/script ada baiknya di lakukan phrase terlebih dahulu. Berikut tag yang bisa kalian pergunakan dalam postingan...<code class="codek inline">Your
balh-bleh-bloh</code><div class="codek">bleh() {
return bloh;
}</div><div class="codek inline"><h4>unescape test</h4></div><pre class="codek">
your phrase script add here
</pre>Kuncinya harus ada class="codek"Source & demo by jsfiddle.net/mofle/tZVsSBONUS
Menu - CSS Mega Menu - CSS 3d box - Product Template powered with Bootstrap - Pure CSS Drag & Drop - Gooey text background with SVG filters - Sticky Title/Page Progress Bar - Hexagon Badges with Font Awesome icons - CSS Transform Creator - CSS-Only Nested Dropdown Navigation - CSS-only shimmering neon text - Pure CSS Background Image Scroll Effect - Perspective Nav CSS Only One Page Design
Setiap bertemu dengan bagian akhir kebanyakan dari kita mengucapkan, tidak terasa sudah di penghujung tahun 2017 lagi yah! Dilanjutkan dengan, selamat datang tahun baru 2018...WTF. Dengan seiring bergantinya tahun ke tahun sudah tentu diikuti dengan silih bergantinya sesuatu itu sendiri. Yang tua digantikan sama yang muda, yang usang jadi baru kembali, siklus ya begitu 3:-O
Di penghujung tahun ini, AA Koben akan berbagi sedikit informasi ringan. Apakah kalian penggemar dari Font Awesome? Silahkan sikat versi terbaru yaitu Font Awesome 5 Released! Kurang seru kalau awesome cuma sejenis! Nih awesome yg lain buat kalian agar lebih awwsome lagih emoji-awesome. Salah satu trik jika ingin membuat emotikon tanpa menggunakan javascsript, full CSS dan image doang B-)
Salah satu andalan bahan untuk postingan di blog ini adalah mengenai HTML Editor Saya tidak bosan² berburu terus sampe bosan =)) Menclok di blogsite www.bachors.com, silahkan sobat kunjungi sekedar melihat-lihat. Ican Bachors lumayan punya proyek/coding yg bisa kalian comot :D Ini salah satunya
Code Sandbox Fiddle
Kalau kurang, silahkan dipilah-pilih saja mau yg mana:
jstinker by eakman.
jstinker by johncipponeri.
Tiny-editor by lipten.
codeFiddle by sw4.
Saya sendiri sudah buatkan satu Try it Editor hasil nyomot buat kalian, itu juga kalau mau ;))
Sebenarnya kepunyaan javascriptkit.com :D Gue hanya ngedit sana-sini biar sedikit full style. JavaScript Kit Try-It-Yourself code editor di bangun menggunakan the high performance code editor for the web is ACE. Saya nemu ini juga danielsadventure.info/HTML5FileDemo/SaxonInterface.html gak tauk buat apaan. Ke dua tools tersebut bisa sobat miliki secara gratis :(|)
Download editor.javascriptkit.com via Google Drive.
Password .7z 2%!7%!-ZQBe^4g&K
Ini mah cuma iseng saja, silah cari ada tools apa saja di site ini Index of /, kalau ketemu bisa kalian miliki =))
Pusing mau mosting apaan, para developer sedang berlomba-lomba dalam pemberian jasa dengan kemudahan yang sangat membantu! Framework istilah orang bilang :D Okelah info ringan-ringan saja, dari pada tidak ngepost :P Jika sobat menemukan gambar dengan tampilan sedikit gelap, namun ingin jadi lebih terang tanpa mengedit gambar tersebut dengan tujuan mempertahankan size image, maka sobat bisa mencoba menggunakan trik & tips dari Andy Bell CSS filter image contrast. One good option dude ;)
Agar dalam belajar kita santai dan tenang, diharapkan anda memiliki W3Schools Offline Web Tutorials. Ada dua versi, yg di kompres/tidak. You can get in w3schools offline version free download or w3schools offline version download full website! This is a good for fun coy writing 'n bigpicture.js
Hajar bray!!!
Polaroid Memories - CSS only - Win8 Tiles Style - Day or Night Mode Toggler - Pure CSS Candle - Animated Scene - Quote Page - Teamy – a package with CSS animations for a team section - 3D Cube Menu (Full Page) - CSS3 Perspective Playground ✨ - Netflix style text animation with CSS - Multiple Shadows - Options Button - Responsive CSS Lightbox with No JavaScript - MOckup1 - Hello World! Popup (html, LESS) - CSS Modal
Ini mah ulangan saja sob, bagi yang mau memasang slide-show di blognya dengan kode yg minimalis bisa coba opsi fading slideshow berikut! Ada 3 varian...tinggal pilih :D
<script type="text/javascript">//<![CDATA[
// Original JavaScript code by Chirp Internet: www.chirp.com.au
// Please acknowledge use of this code by including this header.
document.addEventListener("DOMContentLoaded", function(e) {
var stage = document.getElementById("stage");
var fadeComplete = function(e) { stage.appendChild(arr[0]); };
var arr = stage.getElementsByTagName("a");
for(var i=0; i < arr.length; i++) {
arr[i].addEventListener("animationend", fadeComplete, false);
}
}, false);
//]]></script>
<script type="text/javascript">//<![CDATA[
document.addEventListener("DOMContentLoaded", function (e) {
var stage = document.getElementById("stage2");
var fadeComplete = function (e) {
stage.appendChild(arr[0]);
};
var arr = stage.getElementsByTagName("a");
for (var i = 0; i < arr.length; i++) {
arr[i].addEventListener("animationend", fadeComplete, false);
}
}, false);
//]]></script>
<script type="text/javascript">//<![CDATA[
document.addEventListener("DOMContentLoaded", function (e) {
var stage = document.getElementById("stage3");
var slideComplete = function (e) {
stage.appendChild(arr[0]);
};
var arr = stage.getElementsByTagName("a");
for (var i = 0; i < arr.length; i++) {
arr[i].addEventListener("animationend", slideComplete, false);
}
}, false);
//]]></script>
Source by: Fading slideshow with a touch of JavaScript
Di bulan suci yang penuh rahmat dan barokah ini, bulan yg sangat dinantikan oleh seluruh umat islam di penjuru dunia manapun RAMADHAN. AA lebih memfokuskan ke ilmu agama dulu dari pada ilmu blogging di bulan ini sob ;)) Ternyata tidak jauh berbeda dengan kebiasaan orang-orang pada umumnya di Indonesia kalau datang bulan puasa paling enak itu ngabuburit menunggu waktu berbuka :D Karena aktifitas kebanyakan di depan komputer, maka dari itu ngabuburitnya jalan-jalan ke blogs/webs resources bro! Sekedar melihat hasil jerih payah para coder berkreasi b-)
Siapkah anda berbuburit?
Subscribe Form on Event Scroll - Rainbow Trail (using dom elements) - Instagram Filter Rapid Prototype (Vue + CSSGram) - CSS3 Button Hover Effects with FontAwesome - Opening a letter - Text Decoration Skip Hack - jquery-resizable - Resizable Splitter Panels - Google Adwords | Simulador de AnΓΊncios • Ads Simulator (Non oficial) - GRAVITY TEXT - Animated Stacked Pages - Swaying Vertical Tabs - CSS Tabs - Page Switching Using CSS Negation - Before & After Slider Gallery With SVG Masks - Customize the Browser's Scrollbar with CSS - random terminal/code colors (click for more) - CSS only nav with animated moving background - Front End Day 80 - Operating System Forms - Upload crop & save - Fit images with css - Stylish chat window design - Search in the navbar - classbxr Bookmarklet - Website Bookmarker
Input UI Animation - Bootstrap List Grid View - css custom properties explained - Animated menus palette for WordPress default menu structure - CSS Only Icons w/ Hovers (Font-Awesome Friendly) - Input Live Style Changer - Gradient Hover Effect - Wavy Shadows on a Flag using CSS Gradients - Sheen Hover - Accordion / Tabs with animation - Toggle Tabs - mouse position color picker (scroll for saturation) - generate random font combinations (Google Fonts, Vue.js) - Letter People Text Generator - Looking through Dirty Glass - Liquid button - foldable carousel - CSS effect for search input
simple 3D photo - Menu Effect Like windows 8 (beta) - Firebase Image uploader test #2 - Expand images - Menu effect like windows 8 2.0 - Simple image preview with mobile version - Mini lightbox - Css3 slide - Test hover effects Chrome - Simple lightbox
Lanjut...:D
Get color on click #2 - Take poster of video - Html demos with data uri - Data uri converter - Another Gallery - Gallery with list style - Experiment - The bottom - Gallery experiment - Amur leopard image gallery with CSS vars (responsive, WebKit only) - CSS Animated Header - Ten hover effects - Button hover effects with box-shadow - Animating typed chars - - - Pure CSS Slide Out Menu - Stacked Image Slideshow (feat. kittens) - Image Overlay Slider - Simplest Infinite Slider - ALL CSS Slider 4Slides with Dot Nav
Kunjungilah links di atas walau hanya sekedar menikmati karya orang, iciper :P
Sekarang gw mau bereksperimen ria dengan variabel feColorMatrix, feBlur and feOffset! Coba lihat terlebih dahulu a pen by Paresh Deshpande. Saya forked kode yang sudah ada, dan berlaku untuk browsingan mozilla! Begini hasilnya. Nggak ada kerjaan ya sudah eksperimen saja dengan kode-kode yg sudah ada ;))
Masih di lingkungan codepen.io, ada seorang member @Sasha sudah membuat Floating Action Button sederhana yg terinspirasi dari web google! Tugas Koben hanya meng-kompile & mengakali satu variabel saja!
Before and After - Image Preview - CSS Paper Text - Responsively crop copy, restore onclick via slide animation - Responsive fonts - auto-scaling root font-size in pure CSS - Share Your Profile - HSL color picker - Color Stuff (CSS only) - Custom Context Menu With Toasts - CodeMirror GitHub theme with Copy to clipboard - CSS Horizontal Scrolling - Polyrize.js - Converting colors using filters - CSS sidebar toggle - Slide to Open - Split Text Slides - A Web Dev's Valentine - Text Visual - Team Cards - CSS Flip Cards - blurry hover effect 2 - Flexbox Demo - Popular Pens, Sort by Stat - Jelly Checkbox - Interactive 3D Video Thumbnail - Scrolling Pattern - SVG folding line hover effect - ruler - jQuery drawers - Push Notifications and Newsletter Signup Form with Transitions - Atom Button - Repeatable Patterns in CSS - Rings Navigation Concept - Blurry checkbox style
Di awal tahun 2017 ternyata para developer or creator langsung menggebrak dengan karya2 mereka! Setelah menunggu banyak di antara pengembang berbicara variabel CSS terbaru. Salah satu yang banyak dibicarakan adalah tentang CSS Blend Modes. Mr Bennett Feely salah seorang pencipta Image Effects with CSS. You can look and read on codepen or CSS Fun.
Tidak di sangka ternyata CSS sekarang dapat membuat hal seperti itu? Sebagai rujukan sobat bisa baca juga how to create spotify colorizer effects with CSS blend mode or mix-blend-mode by codrops.
Berbeda dengan master Tovic, dia malah membuat Text Editor sederhana namun kaya fitur Text Editor by Taufik Nurrohman. Dua tools warna teranyar dapat sobat miliki ColorMe inspired by SassMe. You can look top pens of 2016 on CodePen the most hearted of 2016. Di tahun 2017 ini sobat enggak usah repot² bagaimana cara membuat tombol atau text effect? Sudah ada di sini semuanya bray 112 CSS Buttons and 61 CSS Text Effects.
Demikian saja secuil info yang dapat AA Koben sampaikan, silahkan sobat berkreasi dengan ide masing-masing.
Bonus
Link Preview Prototype - Path Length Calculator - Style <input> based on maxlength="" - Blur Buttons - Image Sharing App Concept - Plus Button Expanded - font:cabin+sketch - Bootstrap Navbar Papillon Style
Tidak terasa sudah sampai ke penghujung tahun 2016, dan akan kita songsong tahun 2017! Pada akhir tahun kebiasaan orang pasti telah merancang travelling alias jalan-jalan melancong ke daerah entah di mana :D Tema artikel saat ini adalah traveling to cool resource in the world. Jangan harap sobat blogger akan menemukan pemandangan indah, birunya langit dan dinginnya air terjun yah :))
Perjalanan akan kita mulai dari melihat jernih percikan air yg di bangun dengan teknologi HTML5 HTML5 water ripples demo. Jangan lupa kunjungi experiments lainnya! Trik baru bagaimana cara membangun pure CSS content filter.
Tutorial dan inspirasi semua tentang CSS animasi, jangan ketinggalan CSS animation. Tidak seru kalau sobat tidak meriahkan liburan akhir tahun dengan emoji engine. Dari dunia icon AA berikan feathericon and CSS icon animate. Ingin memberikan sentuhan berbeda pada header blog sobat? You must read how to zoom hero images on scroll. Dengan hadirnya customize robot.txt pada platform blogger, setidaknya harus mengetahui bagian dasar dari file robots.txt fun with robots.txt!
Belajar dengan melihat contoh cssreference.io adalah panduan visual gratis CSS. Ini fitur yang paling populer, dan menjelaskannya dengan contoh-contoh ilustrasi dan animasi.
Apakah kalian di buat lelah membuat warna gradient yg memang sedikit repot untuk membuat itu semua! Jangan khawatir telah hadir grade.js Seperti biasa kalau sudah jalan² paling males itu beres-beres dan bersih-bersih :P
Enggak jauh berbeda dengan dunia maya, paling ribet itu langkah ingin menghapus sesuatu?
Hati-hati menggunakan layanan jasa web deseat.me This is clean up your existence in cyberspace!!!Bonus:
luxury buttons - Auto-scaling iframes - css tabs - Simple CSS Tooltips - CSS only Sliding menu (Hamburger menu) - CSS Accordion using {:target} selector - Menu hover effect - CSS only tooltips - Dead simple markdown editor - Schedule Template - Windows 10 Desktop - A Menu Overlay Simulating a Camera Focus Change
Apa boleh buat demi menjaga eksistensi memosting dapat tema post hover maninghover lagi Jika berbicara tentang effect hover khususnya untuk image, sobat bisa kunjungi website berikut LittleSnippets.net ± ada 56 halaman (on 16 maret 2016) semua berbicara tentang efek-efek edun punya :-bd
Mungkin berawal dari konten yg isinya kebanyakan berbicara tentang efyek, site littlesnippets yg berbasis joomla ini sudah membuatkan satu modul effects dengan nama Imagehover.css
Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scalable image hover effects. Choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only 19KB. Each effect uses the same basic markup allowing you to change effect by simply editing the containing class.imagehover.css
Kalau mau modulnya sobat tinggal sikat saja langsung ciar4n
Demo: Pure CSS Image Hover Effect Library or on codepen.
Please visit for bonus ;))
balloon.css --> github.com/kazzkiq/balloon.css
pageSwitch --> github.com/qiqiboy/pageSwitch
viewerjs --> github.com/fengyuanchen/viewerjs
Responsive Table --> codepen.io/ivillamil/pen/jWjgzE
Textbox / Text Input field Inspiration (Pure CSS) --> codepen.io/takeradi/pen/mPyYeq
Pure CSS3 Text Carousel --> codepen.io/cassidoo/pen/MyaWzp
CSS transitions - Form label placeholders --> codepen.io/jamesa91/pen/PNNYEm
Social Share Button --> codepen.io/PavelLaptev/pen/zqBjbP
Pure CSS bread-loaf Carousel --> codepen.io/tonkec/pen/JXRjPQ
Colourful Flower Popup Menu --> codepen.io/jordanlachance/pen/yOJdRr
Peeking Panels --> codepen.io/tylerfowle/pen/XdjzjO
Live Chat Using Google Spreadsheets --> codepen.io/arianalynn/pen/YqGeoz
Puzzle with your own picture --> codepen.io/kiyutink/pen/NNrBxy
Styling Broken Images --> bitsofco.de/styling-broken-images
Sebenarnya sudah terlalu banyak artikel di blog ini membahas tentang cara membuat accordion use CSS Tapi apa mau di kata, ketemu bahan untuk postingan sekarang ya dengan tema itu juga ;)) Gue dapat dari master Chris Ota, he is talked about "Pure HTML and CSS Accordion" on codepen. Ada keunikan tersendiri accordion karyanya, di mana ada efek timbul ke permukaan kala kita mengklik salah satu accordeon! You can get look of here pure HTML and CSS Accord.
Hilangkan kode checked="checked" kalau pingin ke tutup.
Jika sobat mau menambahkan konten, maka perhatikan & buat syntax HTML seperti berikut <li class="accordion-item">
<input id="XX" class="hide" type="checkbox">
<label for="XX" class="accordion-label">TITLE</label>
<p class="accordion-child">BLEH BLEH BLEH</p>
</li>Kode ini harus berbeda XX
Demikian dan terima kasih :)
Sebagai bonus sikat tools sederhana keren punya and links source oke bingit'z:
>> Colofilter.css lukyvj.github.io/colofilter.css
>> Long Shadow Text codepen.io/gau/pen/JGWZed
>> Pure CSS Header Menu codepen.io/suez/pen/gPRjBo
>> CSS3 Image Filters on Hover codepen.io/gomezisdan/details/bEWdma
>> CodePen User Card codepen.io/andytran/pen/zrzvYQ
>> Awesome split-in-half hover effect codepen.io/vajkri/pen/LGjyzX
>> Star wars GIF maker codepen.io/jagarikin/pen/PZOrRP
>> Fullscreen Search codepen.io/suez/pen/obpLvy
>> Itchy Tanuki codepen.io/jasesmith/pen/pgdmdv
>> slidedoor codepen.io/nizhanjun/pen/JGOVNj
>> The Scroll of Lorem Ipsum codepen.io/browles/pen/pgdMbK
>> Pure CSS Modalbox codepen.io/brycesnyder/pen/JGOwwX
>> A Pen by Amanze Ogbonna codepen.io/darlingtonamz/pen/MKrYGL
>> Find the match - memory game codepen.io/kunukn/full/OMzvrM
>> Word Counter codepen.io/ChynoDeluxe/pen/obpOog
>> Rasteroid codepen.io/golle404/pen/NxqVKN
>> Easy Whitelist Regex Builder :) codepen.io/rlo206/pen/bEvVQN
>> Responsive Image Breakpoints Generator www.responsivebreakpoints.com
>> photo-editor github.com/fengyuanchen/photo-editor
Postingan perdana di awal tahun 2016 AA Koben akan membahas tentang variabel <ul> atau <ol> Dengan var ul/ol tersebut kita bisa membuat aneka karya cipta yang mempesona ;))
Unordered atau ordered list ternyata tidak sesederhana kelihatannya. Berikut contoh sederhana kreasi ol/ulSelain berdiri sendiri variable ol|ul bisa dipadukan dengan varible lainnya. Sehingga akan terjadi campur aduk di sana dan menghasilkan drop down Take a look small dropdown menu
.sdm a {
background: #f65041;
color: inherit;
display: block;
text-decoration: none;
padding: 1rem;
}
.sdm ul {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4rem;
letter-spacing: .1rem;
position: relative;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.sdm ul ul a:hover,.sdm ul ul a:focus,.sdm ul ul a:active {
background: #ff7d74;
}
.sdm ul ul {
display: none;
padding-top: 1rem;
position: absolute;
}
.sdm ul:hover ul,.sdm ul:focus ul,.sdm ul:active ul {
display: block;
}
.sdm ul:first-child:hover > li:first-child:before,.sdm ul:first-child:focus > li:first-child:before,.sdm ul:first-child:active > li:first-child:before {
border: .7rem solid transparent;
border-top-color: #fff;
}
.sdm ul ul > li:not( :last-child ) {
border-bottom: 2px solid #ff7d74;
}
.sdm ul > li:first-child:before {
content: "";
position: absolute;
}
.sdm ul:first-child > li:first-child:before {
border: .7rem solid transparent;
border-top-color: #fff;
pointer-events: none;
right: 1.3rem;
top: 1.6rem;
}
.sdm ul ul > li:first-child:before {
border: .7rem solid transparent;
border-bottom-color: #f65041;
top: -.4rem;
right: 1.3rem;
}
.sdm .fa {
margin-right: .5rem;
}
Ada yg lebih ekstrim lagi dengan menyertakan jQuery script! Coba lihat dulu halaman berikut Pada bagian country ada variabel dropdown disertai animation effect. Begitu saja first post in 2016 year.
This is some bonus for you:
>> Jemoticons
>> Ace Editor
>> Web Terminal
>> Tabs Modal
>> Corner Ribbons
>> gradStop.js
>> Simple SVG Editor
>> Flexbox Film Credits
>> CSS Social Ribbon Flags
>> Pixelate an image
>> Expanding Share Button
>> Modal/blurred background
>> Generate palettes from an image
>> Smooth, Semantic Tab Box
>> CSS sliding multi-level accordion
>> Login For Webapp Using CSS and Javascript
>> ReboundGen, Pre-Canned CSS3 animations
>> Awesome Jumping Game Using CSS and Javascript
>> A Style Switcher with Pure CSS using :checked
>> Collapsable link lists with CSS only (no JS)
>> View/Hide - Content & Change title text onclick
>> COLOR.JS a color manipulation library
>> CSS Only Dropdowns With The Checkbox Hack
