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
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!

.container, .button, .nav {
position: absolute;
}
.container {
margin: auto;
top: 1em;
right: 55px;
width: 50px;
height: 100px;
}
#toggle {
display: none;
}
.button {
z-index: 999;
width: 43px;
height: 43px;
background: #F28482;
border-radius: 100%;
transition: all 0.5s ease-in-out;
box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.button:before {
position: absolute;
top: 20px;
left: 9px;
content: '';
width: 25px;
height: 2px;
background: #FFF;
transform: rotate(90deg);
}
.button:after {
position: absolute;
top: 20px;
left: 9px;
content: '';
width: 25px;
height: 2px;
background: #FFF;
}
.nav {
transform: translateY(-10%);
visibility: hidden;
top: 20px;
left: -55px;
transition: all 0.5s ease-in-out;
background: #FFF;
width: 150px;
border-radius: 2px;
transform: translateY(0%);
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}
.nav a {
text-align: center;
display: block;
margin: 15px 0;
color: #F28482;
text-decoration: none;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
#toggle:checked ~ .nav {
visibility: visible;
transform: translateY(10%);
}
#toggle:checked ~ .button {
transform: rotate(135deg);
box-shadow: 0 0 0 0 transparent;
}

<div class="container">
<input type="checkbox" id="toggle" />
<label class="button" for="toggle"></label>
<nav class="nav">
<a href="#" target="_blank">Home</a>
<a href="#" target="_blank">About</a>
<a href="#" target="_blank">Hire Me</a>
<a href="#" target="_blank">Subscribe</a>
</nav>
</div>

This is for other resources
  • Floating Action Button aka FAB (Material Google inspired)
  • Material Design floating action button for web, that really stands out
  • react material floating button
  • 35 Cool Floating Action Button Animations
Jikalau sobat mau dapat ide cari saja di web ini yah Free HTML, CSS and JS examples, di jamin towewew!

Bonus:

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

0 Komentar WTF
Salah satu teknik dalam membuat terkenal weblog kita adalah dengan disediakannya navigasi berupa link tautan berbagi ke web jejaring! Dari sekian banyak web yang menawarkan jasa berbagi itu adalah AddThis share buttons. Seperti di blog AA koben yg keren ini penampakannya seperti:Pada platform blogspot syntax link berbeda pada umumnya! Sobat harus tauk apakah entuh yg disebut Layouts Data Tags. Kenapa saya memberitahukan hal tersebut, karena dalam memuat kode bentrok dengan code emoticon, jadi takut salah :P
Original idea and demo you can look here: Share Your Profiles
Untuk blog yang sudah memakai technique font-awesome pada templatenya, maka kode sbb:

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
.social {
display: flex;
text-align: center;
position: relative;
width: 300px;
height: 70px;
font-size: 18px;
font-weight: 700;
border-top: 2px solid #dbe3ea;
border-bottom: 2px solid #dbe3ea;
color: #9aa9b5;
background: #fff;
overflow: hidden;
margin: auto;
transition: box-shadow .2s ease-out;
}
.social span, .social div {
margin: auto;
box-sizing: border-box;
}
.social .social-links {
display: flex;
text-align: center;
position: absolute;
top: 0;
left: 0;
background: rgba(62, 130, 251, 0);
width: 100%;
height: 100%;
padding: 0 30px;
transition: all .25s ease;
}
.social .social-links a {
margin: auto;
padding-top: 13px;
background: #fff;
color: #3e82fb;
width: 40px;
height: 28px;
line-height: 40px;
font-size: 15px;
transform: translate3d(0, 60px, 0);
transition: all .2s;
}
.social .social-links a:hover {
background: #89b3fd;
color: #fff;
}
.social:hover {
border: none;
box-shadow: inset 0 0 0 2px #dbe3ea, 0 1rem 20px rgba(62, 130, 251, 0.2);
}
.social:hover .social-links {
background: #3e82fb;
}
.social:hover .social-links > a {
animation: elastic .5s ease-out forwards 0s;
}
.social:hover .social-links > a:nth-child(2) {
animation-delay: 0.05s;
}
.social:hover .social-links > a:nth-child(3) {
animation-delay: 0.1s;
}
.social:hover .social-links > a:nth-child(4) {
animation-delay: 0.15s;
}
.social:hover .social-links > a:nth-child(5) {
animation-delay: 0.2s;
}
@keyframes elastic {
0% {
transform: translate3d(0, 60px, 0);
}
40% {
transform: translate3d(0, -5px, 0);
}
70% {
transform: translate3d(0, 5px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}

<div class="social">
<span>Share your link</span>
<div class="social-links">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-plus" aria-hidden="true"></i></a>
</div>
</div>
Bagi sobat yg ingin memakai gambar, sediakan gambar dengan resolusi 15px x 15px, kode sbb:
.social {
display: flex;
text-align: center;
position: relative;
width: 300px;
height: 55px;
font-size: 18px;
font-weight: 700;
border-top: 2px solid #dbe3ea;
border-bottom: 2px solid #dbe3ea;
color: #9aa9b5;
background: #fff;
overflow: hidden;
margin: auto;
transition: box-shadow .2s ease-out;
}
.social span, .social div {
margin: auto;
box-sizing: border-box;
}
.social .social-links {
display: flex;
text-align: center;
position: absolute;
top: 0;
left: 0;
background: rgba(62, 130, 251, 0);
width: 100%;
height: 100%;
padding: 0 30px;
transition: all .25s ease;
}
.social .social-links a {
margin: auto;
padding-top: 13px;
background: #3e82fb;
color: #3e82fb;
width: 40px;
height: 28px;
line-height: 40px;
font-size: 15px;
transform: translate3d(0, 60px, 0);
transition: all .2s;
}
.social .social-links a:hover {
background: #4285F4;
color: #fff;
}
.social:hover {
border: none;
box-shadow: inset 0 0 0 2px #dbe3ea, 0 1rem 20px rgba(0, 0, 0, 0.2);
}
.social:hover .social-links {
background: #fff;
}
.social:hover .social-links > a {
animation: elastic .5s ease-out forwards 0s;
}
.social:hover .social-links > a:nth-child(2) {
animation-delay: 0.05s;
}
.social:hover .social-links > a:nth-child(3) {
animation-delay: 0.1s;
}
.social:hover .social-links > a:nth-child(4) {
animation-delay: 0.15s;
}
.social:hover .social-links > a:nth-child(5) {
animation-delay: 0.2s;
}
@keyframes elastic {
0% {
transform: translate3d(0, 60px, 0);
}
40% {
transform: translate3d(0, -5px, 0);
}
70% {
transform: translate3d(0, 5px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}

<div class="social">
<span>Share your link</span>
<div class="social-links">
<a href="#"><img src="IMAGE-FACEBOOK 15px x 15px"></a>
<a href="#"><img src="IMAGE-TWITTER 15px x 15px"></a>
<a href="#"><img src="IMAGE-LINKEDIN 15px x 15px"></a>
<a href="#"><img src="IMAGE-G-PLUS 15px x 15px"></a>
<a href="#"><img src="IMAGE-MORE 15px x 15px"></a>
</div>
</div>

Sebelumnya saya sudah kasih tau ttg layouts data tag? Ini berlaku pada penulisan syntax-HTML! Pada tutor di atas gue buat<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>atau<a href="#"><img src="IMAGE-FACEBOOK 15px x 15px"></a>Buat blogspot berbeda, dan tergantung link tujuan web?
Contoh:
<a expr:href='&quot;//www.facebook.com/share.php?u=&quot; + data: post.url + &quot;&amp;title=&quot; + data: post.title' target='_blank'><i class="fa fa-facebook" aria-hidden="true"></i></a>
or
<a expr:href='&quot;//www.facebook.com/share.php?u=&quot; + data: post.url + &quot;&amp;title=&quot; + data: post.title' target='_blank'><img src="IMAGE-FACEBOOK 15px x 15px"></a>
Demo. Good luck :D

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

See you :-h

0 Komentar WTF
Welcome to 2017 year! AA Koben akan berbagi tutorial ringan bagaimana cara menghias gambar dengan menambahkan bingkai atau frame indah di setiap sisinya. Jadi jika sobat mempunyai sebuah image, kebetulan images tersebut memang layak diberikan keindahan dalam tampilannya, maka anda tidak salah membaca artikel ini :P
This is tutorial how to make iframe picture using CSS.
.frame img {
max-width: 100%;
max-height: 100%;
border: solid 2px;
border-color: #ccb #eed #ffe #eed;
}
.frame {
height: 80vh;
padding: 8vmin 0;
margin: 10px 28%;
border-radius: 3px;
position: relative;
text-align: center;
display: inline-block;
background-color: #ddc;
box-sizing: border-box;
border: solid 5vmin #eee;
border-color: #ddd #eee #fff #eee;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25) inset, 0 5px 10px 5px rgba(0, 0, 0, 0.25);
}
.frame:before {
content: "";
top: -2vmin;
left: -2vmin;
right: -2vmin;
bottom: -2vmin;
border-radius: 3px;
position: absolute;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25) inset;
}
.frame:after {
content: "";
top: -2.5vmin;
left: -2.5vmin;
right: -2.5vmin;
bottom: -2.5vmin;
position: absolute;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
<div class="frame">
  <img src="LINK-IMAGE" alt="" />
</div>
DEMO: codepen.io/chris22smith/full/PbBwjp/

Sudah begitu saja, kalau mau versi galeri berarti harus terus menyimak ;))

figure {
padding: 20px;
overflow: hidden;
position: relative;
border-width: 10px;
border-style: solid;
display: inline-block;
vertical-align: middle;
border-color: #ccc #ddd #efefef #ddd;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) inset, 0 5px 7px rgba(0, 0, 0, 0.5);
}
figure:before, figure:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
position: absolute;
}
figure:before {
z-index: -2;
border: 30px solid #ddc;
box-shadow: 0 0 5px black inset;
}
figure:after {
z-index: -1;
background: transparent;
border-top-left-radius: 300% 300%;
box-shadow: -20px -20px 100px rgba(255, 255, 255, 0.5);
}
figure figcaption {
bottom: 6px;
right: 29px;
padding: 5px;
font-size: 16px;
position: absolute;
text-align: center;
white-space: nowrap;
display: inline-block;
max-width: calc(100% - 60px);
-webkit-transition: .3s;
transition: .3s;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: scale(0.6);
transform: scale(0.6);
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;

}
figure figcaption:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
figure img {
z-index: -3;
width: auto;
height: 50vmin;
position: relative;
}
<figure title="YOUR TITLE I">
 <img src="LINK-IMAGE" alt="" />
 <figcaption>YOUR CAPTION IMG I</figcaption>
</figure>

<figure title="YOUR TITLE II">
 <img src="LINK-IMAGE" alt="" />
 <figcaption>YOUR CAPTION IMG II</figcaption>
</figure>
DEMO: codepen.io/vank0/full/BQqBOx/

BONUS:

Focal Point Picker - Multiple Dropdown Menus - World Places (CSS 3d hover) - BUTTON LOVE - Simple Button Rollover - Time in Words - Tilt to read - wick editor - polr - 110 CSS Menu - bttn.css - Masonry - csssecrets - csssecrets on dabblet - The SVG Font Machine
al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE