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
Berawal dari mencari itu, tetapi malah mendapatkan ini! Mungkin hanya saya saja yang tahu ini-itu apaan ;)) Memulai niat akan melakukan posting jika mendapatkan sesuatu yg unik, aneh, dan berbeda serta tidak melupakan faktor pentingnya yaitu mudah dalam pemakaian :D
Pertama gue mendapatkan ini colorful shadows! WOW, ternyata ada trik bagaimana cara membuat bayangan (shadows) untuk gambar, seolah-olah bayangannya itu mengikuti warna yg ada pada gambar. Gimana penjelasan sedepnya ya!

Sobat mungkin sudah melihat dan tidak aneh membuat bayang, namun bayangan yg dihasilkan hanya terbatas pada satu warna saja toh? Dengan trik sederhana sekarang kita bisa membuat bayangan dengan warna mengikuti dari gambar asli.colorful-shadowsBeberapa hal yg mesti diperhatikan jika sobat menginginkan trik ini masuk ke blog kalian:

  • Browser sudah support CSS3 transform & filter
  • Trick ini akan menggunakan 2 tags image!
  • Jadi bagi kalian para blogger yg mempertimbangkan loading dalam pemuatan, harap diperhatikan ;)
  • Niat & keinginan dalam penerapan ke dalam template :D
.colors_shadows {
  position: relative;
  padding: 0;
  width: 500px;
  max-width: 90vw;
  margin: 25px auto;
}
.light-shadow {
  transform: translate3d(0,0,0);
  filter: blur(5px) brightness(1.1) saturate(1);
}
.large-shadow {
  transform: translate3d(0,5px,0);
  filter: blur(15px) brightness(1) saturate(1);
}
.colors_shadows::after, .large-shadow, .light-shadow {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-size: 100% 100%;
  filter: blur(15px) saturate(2);
}
.colors_shadows img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}
<div class="colors_shadows">
 <img src="URL-IMAGE" alt="" />
 <img src="URL-IMAGE" class="large-shadow" alt="" />
</div>
Gue sudah buat 2 biji efek filter light-shadow and large-shadow Kalian tinggal panggil salah satu atau mau dipakai dua²nya (class="large-shadow" or class="light-shadow") Kreasikan juga dengan menambahkan kode CSS ke dalam property declaration.

Masih ingat dengan hal diatas Pertama gue mendapatkan ini..., sebagai bloglang gue telusuri dari mana sumbernya. Ternyata mentok ke cosha. Silah kunjungi halaman tsb jika ingin memakai versi script dan tentunya memakai shiny new picture tag :P
Petualangan masih berlanjut, aku satroni web empunya guys dgn alamat http://robinloeffel.ch/ We..ee...eee ternyata disana ada hal sedikit berbeda dengan trik diatas? Gue nemuin gambar ditutupi dengan warna bergaya gradient sebagai pelapisnya (kue kelezzz lapis) :))

Ketika melakukan hover/sorot ke gambar, maka akan sirna gradient background and title as protector!Project-linkAslinya memakai script dengan berbagai embel-embel keren lain yg dibawanya. Gue hidupkan developer tools browser, dan mulai beraksi comot sana-sini dan diperoleh...

.robin_title {
 font-size: 202%;
 position: absolute;
 text-align: center;
 transition: opacity .5s ease-in-out;
}
.robin_image {
 z-index: -1;
 object-fit: cover;
 object-position: center;
}
.robin_image,.robin_link {
 padding: 0;
 height: auto;
 width: 500px;
 max-width: 100%;
 margin: 0 auto;
 position: relative;
}
.robin_link {
 z-index: 1;
 display: flex;
 color: white;
 overflow: hidden;
 border-radius: 15px;
 align-items: center;
 text-decoration: none;
 justify-content: center;
 transition: transform .5s ease-in-out;
}
.robin_link:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 border-radius: inherit;
 box-sizing: border-box;
 background-color: #444;
 transition: opacity .5s ease-in-out;
}
.robin_link.pengki:after {
 background: linear-gradient(180deg,rgba(58,28,113,.5),rgba(253,187,45,.5));
}
.robin_link.pingki:after {
 background: linear-gradient(90deg,rgba(255,0,132,.5),rgba(255,255,255,.5));
}
.robin_link:hover {
 transform: scale(1.05);
}
.robin_link:hover .robin_title,.robin_link:hover:after {
 opacity: 0;
}
<a class="robin_link pingki" href="LINK-TUJUAN" title="">
 <h2 class="robin_title">PINGKI</h2>
 <img class="robin_image" src="URL-IMAGE" alt=""/>
</a>
Gue sudah buat 2 biji efek linear pengki dan pingki Kalian tinggal panggil salah satu atau mau dipakai dua²nya (class="robin_link pingki" or class="robin_link pengki") Kreasikan juga dengan menambahkan kode CSS ke dalam property declaration. Biar lebih full stylish :-)
NB:

Saya hanya seorang blogger dengan guru bernama ONE (Otodidak NEkat). Harap maklum jika ada kesalahan dalam aturan pengkodean. Koreksi dan benarkan menurut aturan oleh kalian ya :)

BONUS:

Button Effect - 3D Editable Text Effect - Rainbow Effect - Animate feTurbulence Filter - Turbulence - Color: Your name as a color - Password generator - Card hover FX - Wave Text - dashed border icon animations - Native smooth scrolling - How to Build a Simple Full-Screen Slideshow With Vanilla JavaScript - Placeholder support for contentEditable elements, without JavaScript - Useful Broken Images - Stacked rainbow cards - Extract colors from Image (React) - Neumorphic Color Palette - Digital Bookshelf - Parallax Horizontal Image Scroller -- No JS! - Glass Effect with CSS Masks - Exciting Multi-line Highlights - Buttons popper - Adding an image to a document... - Tucked Corners - AppleTV 3D Parallax Cards - Dynamic Active Table of Contents - Card Hover Interaction | HTML & CSS - Goldsmiths Uni - glitch - Search animation - Only CSS - Masked & Skewed - Website Hero

Salam COVID-19 bin corona :-&

0 Komentar WTF
2020 telah tiba! Pembaharuan terjadi disana-sini. Tidak terkecuali pemberhentian layanan dimana-mana :D Jarang melakukan kegiatan posting, sampai² lupa rumus/jurus gue dalam mengetik =)) Ngemeng-ngemeng tentang pembaharuan (blogspot), mungkin diantara sobat sudah melihatnya! Terlihat pada bagian dashboard blog sudah lebih full stylish saat ini. Sebagai salah satu mesin pencari yang digandrungi orang google, pada bagian search box mengalami perubahan!search boxSekarang AA Koben mau coba berbagi cara membuat kotak pencarian yg seperti itu! Saat anda mengetik pada kotak pencarian akan muncul icon search (🔍) imut-imut :(|) Tidak sama dengan google, tetapi konsepnya yg mirip.search boxDemo I & source kode
search-boxDemo II & source kode
Yang terakhir, mirip dengan yang ke-II, tetapi diberikan sedikit sentuhan efek B-)
Demo III & source kode

Harap diperhatikan, disini gue hanya memberikan kode CSS. Adapun penulisan syntax <form> pencarian sobat ganti sendiri :)>-

Original idea by Liam on codepen with title :placeholder-shown selector
Bonus link codepen selection buat kalian yg cari ide/bahan postingan:
simple popover - Sign Up Modal - Buttons UI Kit - double exposure carousel slider - Build a Filtering Component in Pure CSS - The more menu - Accordion / Dropdown / Toggle Pure CSS - My First Color Tools Project - Polygon-style gradient pull quote - CSS TABS - Pure CSS menu cutout effect - BBC News style joined bullets - Pure CSS Accordion - 5-Way Gradient Generator - Pure CSS Card Carousel - Tabs - CSS + JS - Old Typewriter Text Effect - Center Focus Feature Section - Pure CSS Animated Search Bar - CSS-Only Gooey Content Toggle - Gradient Ordered List - Scrolling table - -webkit-box-reflect & SVG filters - Social Menu Share with SVG - Social Media Share Cards - Floating Aside HTML Buttons - CSS Grid Menu - Awesome Flexbox - Details element with custom arrow - Scroll Based Animation - Drop Spread Blur - Reveal Effect Text Animation - Image slideshow HTML and CSS only - Drag-n-drop sticky, with no JS! - PUZZLE MAKER - Blur background on click (modal window) - The circular menu - Video created using HTML and CSS only - Taking advantage of :target / Proposing :target-within - Underline.js - Sliding Tile Puzzle with Custom Images in Vue - Info Button - Amazing Button Hover - React select and crop image - Box skew hover - Image glitch effect - Banners - final demo - Social Media Buttons - Link & Button - Shatter Effect - Locked input field - CSS only - Gradient Playground - Styled "select" options using CSS3 and Flexbox - Color Search w/ React Hooks 🎨 - Find emoji by description - Tabs Navigation UI - Night Party Mode - CSS Only - Social Icons - Hover Effect - Challenges: CSS Strange Nav - magnifying image view with zoom 🔍 - Input group :focus-within - Palette Panda - Simple image comparison slider - Line distortion - Scroll page loader (pure CSS no JS) - Animated Verbs - Animated Portrait w/ GSAP 2.0 - Mini Music Player - VueJS - CSS Modal - (2019) Custom Checkbox, Radio, Switch - CSS Grid-ient - Gradient color button with hover glow - Multiplication Lookup Table - 50+ Pure CSS3 Preloaders (Latest) - Share Selected Text - Modern Gradient Buttons - Happy Fun Nav - Dark mode toggle expanding circle - CSS Swinging Text Animation - LazyLoading Videos with IntersectionObserver - Instagram downloader - 2019 Mood Calendar - TechGirlz CSS Animation (Finished) - Social Animation - Dribbble//Simple Icons - Menu Interaction - One background for multiple divs - Pure CSS Responsive List & Tooltips - Only CSS: Sunset Bird (Orange&Blue) - Footnotes - RSS Single Element - Random Password Generator - Blur Reveal - Navigation Menu w/ Animations - Navigation with Sub-Navigation (CPC) - Document Title Ticker - Web Design - Hover, I dare you! - CSS Only - Multi-line spanning animated underline. - Image Password Strength - Link Fill on Hover - Image Animation Effects - Utilities - Fullscreen Nav - Horizontal - Section numbering with CSS - Stylish Social Buttons - CSS only slider - smallest slider ever w/o JS - cpc-checkbox-hack - Magic with details // CSS Only Dropdown - Animated Search Interaction - 3D CSS Transform Rotation Builder - Menu Hover Fill Text - Pure CSS circular border patterns - Cut/Copy/Paste - Gradient Text Overlay - Color Wheel - Social Icon Gooey Effects - Bring Back the Marquee - Multi line text underline CSS - Clip Path Hover Animation - Keyboard accessible
Adios Amigos...Parantos...Yuk Babay :-h

0 Komentar WTF
Ada sedikit update os windows di tempat gawe, yang dulu masih pakai windows XP, sekarang dipasangin Windows Embedded 8.1 Industry Enterprise. Ternyata selama belum update windOwS, browser yg gue pakai mentok di versi yg hanya support terhadap Win-XP! Dampaknya gw tidak bisa melihat hasil karya dari para developer and master :( Setelah update os & browser...WOW ternyata kreasi orang pada keren punya B-) + makin pusing kodingnye :-O
Begitulah curcol edisi kali ini, dan pertama kali masuk ke dashboard blogger ada notification:Notification%2Bof%2BBloggerKarena keterbatasan ilmu & pengetahuan saya, maka artikel sekarang akan mengulang tentang bagaimana membuat beautyful CSS modal n' awesome accordion menu murni hanya menggunakan CSS :)

Pure CSS Modals A Pen By Akshay

.modal-open {
color: inline;
cursor: pointer;
display: inline;
}
.modal-label {
position: relative;
}
.modal-radio {
opacity: 0;
position: absolute;
visibility: hidden;
}
.modal {
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
transform: scale(0);
transition: opacity .25s, transform .25s;
z-index: 99;
}
.modal2 {
transform: scale(0.8) translate(0,-100%);
transition: transform .35s,opacity .35s;
}
.modal3 {
transform: translate(0,100%) scale(.9);
}
.modal4 {
transform: scale(0) rotate(180deg);
}
#modal-open:checked + .modal {
opacity: 1;
transform: scale(1);
}
#modal-open2:checked + .modal2 {
transform: scale(1) translate(0,0);
opacity: 1;
}
#modal-open3:checked + .modal3 {
transform: scale(1) translate(0,0);
opacity: 1;
}
#modal-open4:checked + .modal4 {
transform: scale(1) rotate(0deg);
opacity: 1;
}
.overlay {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background: rgba(0, 0, 0, 0.789);
}
.modal .content {
width: 70%;
top: 15%;
left: 15%;
height: 300px;
padding: 20px;
max-height: 70%;
background: #fff;
border-radius: 15px;
position: absolute;
box-shadow: 0 3px 15px -2px #ccc;
}
.close-btn {
width: 30px;
height: 30px;
top: 10px;
right: 20px;
cursor: pointer;
position: absolute;
border-radius: 50%;
border: 2px solid #f44336;
}
.close-btn:after,.close-btn:before {
content: "";
width: 70%;
height: 2px;
left: 15%;
top: 50%;
position: absolute;
background: #f44336;
top: calc(50% - 1px);
transform-origin: 50% 50%;
transform: rotate(45deg);
}
.close-btn:before {
transform: rotate(-45deg);
}
.action-btn {
color: #fff;
border-radius: 15px;
display: inline-block;
padding: 10px 20px;
background: #4caf50;
}

Harap diperhatikan kode CSS tersebut! Karena kode itu berisikan 4 jenis gaya MODAL BOX. Jika sobat ingin memakai satu gaya saja, hapus selector dan isi kode dari .modal2, .modal3, .modal4, #modal-open2:checked + .modal2, #modal-open3:checked + .modal3, #modal-open4:checked + .modal4
Berikut cara/contoh penulisan taging HTML untuk ke-4 gaya modal.
<div class="content">
<label class="modal-open modal-label" for="modal-open">
<p>Open Modal 1</p>
</label>
<input type="radio" name="modal" value="open" id="modal-open" class="modal-radio"/>
<div class="modal">
<label class="modal-label overlay">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
<div class="content">
<div class="top">
<h2>Heading </h2>
<label class="modal-label close-btn">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
</div>
<p>BLA BLA MODAL 1</p>
</div>
</div>
</div>

<div class="content">
<label class="modal-open modal-label" for="modal-open2">
<p>Open Modal 2</p>
</label>
<input type="radio" name="modal" value="open" id="modal-open2" class="modal-radio"/>
<div class="modal modal2">
<label class="modal-label overlay">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
<div class="content">
<div class="top">
<h2>Heading </h2>
<label class="modal-label close-btn">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
</div>
<p>BLA BLA MODAL 2</p>
</div>
</div>
</div>

<div class="content">
<label class="modal-open modal-label" for="modal-open3">
<p>Open Modal 3</p>
</label>
<input type="radio" name="modal" value="open" id="modal-open3" class="modal-radio"/>
<div class="modal modal3">
<label class="modal-label overlay">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
<div class="content">
<div class="top">
<h2>Heading </h2>
<label class="modal-label close-btn">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
</div>
<p>BLA BLA MODAL 3</p>
</div>
</div>
</div>

<div class="content">
<label class="modal-open modal-label" for="modal-open4">
<p>Open Modal 4</p>
</label>
<input type="radio" name="modal" value="open" id="modal-open4" class="modal-radio"/>
<div class="modal modal4">
<label class="modal-label overlay">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
<div class="content">
<div class="top">
<h2>Heading </h2>
<label class="modal-label close-btn">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
</div>
<p>BLA BLA MODAL 4</p>
<label class="modal-label action-btn">
OK <input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
</div>
</div>
</div>
Maybe you want to try Interactive Modal with Funny Animations? Please explore coidea.website for other awesome content. Beres urusan modol lanjut pada topik kedua yaitu akordion!

Awesome accordion menu using only HTML & CSS A Pen By Ahmad Emran

.mainMenu {
width: 100%;
display: block;
border-radius: 10px;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.item {
border-top: 1px solid #444857;
overflow: hidden;
}
.btn {
display: block;
padding: 15px 20px;
background-color: #1a1b1f;
color: #aaaebc;
position: relative;
}
.btn:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right:8px solid transparent;
border-top:10px solid #1a1b1f;
right: 15px;
bottom: -10px;
z-index: 9;
}
/*
.btn i {margin-right: 10px;}
*/
.subMenu {
background: #333641;
overflow: hidden;
transition: max-height 0.7s;
max-height: 0;
}
.subMenu a {
display: block;
padding: 15px 20px;
color: #fff;
font-size: 14px;
border-bottom: 1px solid #1a1b1f;
position: relative;
}
.subMenu a:before {
content: '';
opacity: 0;
transition: opacity 0.3s;

}
.subMenu a:hover:before {
content: '';
position: absolute;
height: 0;
width: 6px;
left: 0;
top:0;
opacity: 1;
/* background-color: #d8d824; */
border-top: 24px solid transparent;
border-left: 11px solid #fff;
border-bottom: 24px solid transparent;
}
.subMenu a:after{
content: '';
opacity: 0;
transition: opacity 0.3s;

}
.subMenu a:hover:after {
content: '';
position: absolute;
height: 0;
width: 6px;
right: 0px;
top:0;
opacity: 1;
/* background-color: #d8d824; */
border-top: 24px solid transparent;
border-right: 11px solid #fff;
border-bottom: 24px solid transparent;
}
.subMenu a:hover {
background: #273057;
background: -moz-linear-gradient(top, #333641 0%, #333641 50%, #666B7A 51%, #666B7A 100%);
background: -webkit-linear-gradient(top, #333641 0%, #333641 50%, #666B7A 51%, #666B7A 100);
background: linear-gradient(to bottom, #333641 0%,#333641 50%,#666B7A 51%,#666B7A 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#333641', endColorstr='#666B7A',GradientType=0 );
transition: all 0.3s;
border-bottom: 1px solid #666B7A;
}
.subMenu a: last-child {
border:none;
}
.item:target .subMenu {
max-height: 10em;
}
<div class="wrapper">
 <ui class="mainMenu">
 <li class="item" id="account">
 <a href="#TITLE I" class="btn">TITLE I</a>
 <div class="subMenu">
  <a href="">item-1</a>
  <a href="">item-2</a>
  <a href="">item-3</a>
 </div>
 </li>
 <li class="item" id="about">
 <a href="#TITLE II" class="btn">TITLE II</a>
 <div class="subMenu">
  <a href="">item-1</a>
  <a href="">item-2</a>
 </div>
 </li>
 <li class="item" id="support">
 <a href="#TITLE III" class="btn">TITLE III</a>
 <div class="subMenu">
  <a href="">item-1</a>
 </div>
 </li>
 <li class="item">
 <a href="#" class="btn">Close All</a>
 </li>
 </ui>
</div>
Pada sumber disertakan dengan bumbu font-awesome, disini saya menghilangkannya :D Jadi jika bagi kalian yg memang menggunakan font-icon harap melihat pada sumer cara tag HTML-nya ;)

Bonus

previewSlider - Trippy CSS effect - Map-inspired border - CSS Animations: Obvious CTA Buttons - Off-Canvas menu on Pure CSS - File Tree CSS - Client side screenshot - Random Color Palette Generator with Tinycolor.js - css scroll-behavior: smooth - Full Page slider - Dark Mode without Javascript - Checkboxes and radios pure css - Typewriter Effect HTML & CSS - Pure JS FLIP Transition - Animated Info Card - Under-Engineered Toggles - Anime Quote Image Maker - Splitting an image - Reduced Motion Mixin - Dolly/Hitchcock Zoom Effect in CSS

Bye :-h

0 Komentar WTF
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

CodelabColor Picker
codelabcolor-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

MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE