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

WTF
Berbicara tentang "animation" sudah pasti berkaitan erat dengan yang namanya pergerakan. Intinya ada sesuatu yang bergerak-gerak! Mau itu sedikit atau banyak gerakannya, pokoknya gerak-gerak :D Untuk mempercantik tampilan blog, khususnya pada bagian header, AA Koben punya satu rekomendasi untuk membuat header blog sobat menjadi lebih atraktif! Jika kepengen tau bagaimana hasil akhirnya silahkan kunjungi halaman jakob-e on CodePen.
Kalau mau yg keren dan sudah jadi tinggal comot bumbunya, absolutely come from Codrops.

jakob-eAnimasi header karya master Jakob E ini, di bangun dengan beberapa gambar utama, yaitu: 2 gambar awan, burung dan balon udara! Untuk balon udara gue tidak pakai. Ambil dan save link gambar burung pada halaman sumber yg sudah berupa data URI base64
Gambar: clouds3 - clouds4

Kode CSS
.content-jakob-e {
position: relative;
overflow: hidden;
max-height: 300px;
height: 100vh;
width: 75%;
margin: 9px auto;
}
.content-jakob-e:before, .content-jakob-e:after {
-webkit-animation-duration: 195s;
animation-duration: 195s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
content: '';
position: absolute;
display: block;
width: 75vw;
min-height: 62.5vw;
top: 50%;
left: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: 80%;
pointer-events: none;
}
.content-jakob-e:before {
background-image: url(LINK-IMAGE/clouds4.jpg);
-webkit-animation-name: cloud1;
animation-name: cloud1;
z-index: 1;
}
.content-jakob-e:after {
background-image: url(LINK-IMAGE/clouds3.png);
-webkit-animation-name: cloud2;
animation-name: cloud2;
z-index: 3;
}

@-webkit-keyframes cloud1 {
0% {
-webkit-transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
}
20% {
-webkit-transform: translate(-50%, -50%) scale(1.4) rotate(5deg);
transform: translate(-50%, -50%) scale(1.4) rotate(5deg);
}
40% {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
60% {
-webkit-transform: translate(-50%, -50%) scale(1.4) rotate(-5deg);
transform: translate(-50%, -50%) scale(1.4) rotate(-5deg);
}
80% {
-webkit-transform: translate(-50%, -50%) scale(1.3) rotate(15deg);
transform: translate(-50%, -50%) scale(1.3) rotate(15deg);
}
100% {
-webkit-transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
}
}

@keyframes cloud1 {
0% {
-webkit-transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
}
20% {
-webkit-transform: translate(-50%, -50%) scale(1.4) rotate(5deg);
transform: translate(-50%, -50%) scale(1.4) rotate(5deg);
}
40% {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
60% {
-webkit-transform: translate(-50%, -50%) scale(1.4) rotate(-5deg);
transform: translate(-50%, -50%) scale(1.4) rotate(-5deg);
}
80% {
-webkit-transform: translate(-50%, -50%) scale(1.3) rotate(15deg);
transform: translate(-50%, -50%) scale(1.3) rotate(15deg);
}
100% {
-webkit-transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
}
}
@-webkit-keyframes cloud2 {
0% {
-webkit-transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
}
20% {
-webkit-transform: translate(-48%, -33%) scale(1.45) rotate(3deg);
transform: translate(-48%, -33%) scale(1.45) rotate(3deg);
}
40% {
-webkit-transform: translate(-50%, -38%) scale(1.05);
transform: translate(-50%, -38%) scale(1.05);
}
60% {
-webkit-transform: translate(-40%, -40%) scale(1.45) rotate(-3deg);
transform: translate(-40%, -40%) scale(1.45) rotate(-3deg);
}
80% {
-webkit-transform: translate(-52%, -30%) scale(1.35) rotate(13deg);
transform: translate(-52%, -30%) scale(1.35) rotate(13deg);
}
100% {
-webkit-transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
}
}
@keyframes cloud2 {
0% {
-webkit-transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
}
20% {
-webkit-transform: translate(-48%, -33%) scale(1.45) rotate(3deg);
transform: translate(-48%, -33%) scale(1.45) rotate(3deg);
}
40% {
-webkit-transform: translate(-50%, -38%) scale(1.05);
transform: translate(-50%, -38%) scale(1.05);
}
60% {
-webkit-transform: translate(-40%, -40%) scale(1.45) rotate(-3deg);
transform: translate(-40%, -40%) scale(1.45) rotate(-3deg);
}
80% {
-webkit-transform: translate(-52%, -30%) scale(1.35) rotate(13deg);
transform: translate(-52%, -30%) scale(1.35) rotate(13deg);
}
100% {
-webkit-transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
}
}
@-webkit-keyframes zep {
0% {
-webkit-transform: translate(-10%, -51%);
transform: translate(-10%, -51%);
}
50% {
-webkit-transform: translate(50%, -75%);
transform: translate(50%, -75%);
}
75% {
-webkit-transform: translate(-30%, -51%);
transform: translate(-30%, -51%);
}
100% {
-webkit-transform: translate(-10%, -51%);
transform: translate(-10%, -51%);
}
}
@keyframes zep {
0% {
-webkit-transform: translate(-10%, -51%);
transform: translate(-10%, -51%);
}
50% {
-webkit-transform: translate(50%, -75%);
transform: translate(50%, -75%);
}
75% {
-webkit-transform: translate(-30%, -51%);
transform: translate(-30%, -51%);
}
100% {
-webkit-transform: translate(-10%, -51%);
transform: translate(-10%, -51%);
}
}
[class*=bird] {
position: absolute;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAADICAYAAADhnmEjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUYxQTcyQTdFQ0ZDMTFFMDgxN0RDQjQ4RDcxNTFGNkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUYxQTcyQThFQ0ZDMTFFMDgxN0RDQjQ4RDcxNTFGNkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFRjFBNzJBNUVDRkMxMUUwODE3RENCNDhENzE1MUY2QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFRjFBNzJBNkVDRkMxMUUwODE3RENCNDhENzE1MUY2QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuTJfGkAAAT3SURBVHja7JpvaFdVGMfv3fqzVqhtMtN0lJpoNHqRSFOi0BdhhBbR/Ef4whBNhN671fRFgUG9EETBaEJSvtCUJJ0GBZFCooX/0DlmrU2JaepQ11r68/vs9z36/M7O7957JhOxc+CD/sY933vPuef53uc898a5XC66kxYHgTsXiIoIjFG8DDrB3+ACeA6U3+pLgRg8CMpADfiNnARn5VjFIfAxqNYCovgZ6AH/qoPbKSJideARMA38JcJaYDn4yTqTMLnIyBtAqxbocXTeAiqKCDwP5mqBTtXxOtgKHs50AxwCf3BSM93BEv5/pPp7E4W81sECsAR0eK8hCoziotkNHvARCNEYBIbU0lwWtwFcZiiPp7mUZBEQT9gEzjHItoMvwQwwzKz7sWApmKM6PgSWgY3KmeaDLh47V7yjfw7iOD6DH09ZZ75CP3yUPhnxBOKTr4NGcNUMwXZe+T3VZxK1I13I3FkJnFcCzw7mNv4M/gMtg10HL4LNnKQ4BFMQuPuO5Nkmgf1yUoNPE2f6ExzVArLuV4JK0Ms46GNIlzDAJF94AjQz7N9Gx6tG1X6Ui/NUg7X8fZ2BJpwGC5U7JbYP6Q03lE8s0RGcNgeSNz4OfuBwxJF/BxNtgbASg8D9lOKowBjFxGGz4xE3AuzRx+v9gmkzwSvgBXqAbjXMjxKvQCcZB60901f5wwuvwBaQs/+jRE4wV5KndrekPWlDOGZttqaAnWA4hWvtEdgC4oHf2HcKlNLmjqbNgenQpIYhRrofrLCPdw3BTOQuXrLJUmu5ty7NcgURD5SN+A4Kyt75F/BM2l2w29OyeHgVE2SCbYEQjUHg3vREiYHRXLrl1qGfSmSmRaOYyatgNndyuhnhxCt40pXSsG3M4omTlSe204mlvclUpztNoJmZmbmKbgq8y9+1aXOwwPJJ2R/P4ib0MBPNxDkoVyme4Ro4ABa7PLGYIzWwQKeH877cZh9LK+MlJ3piUtVK7kYry2NvcT46QjQGgf+JqaY1qaHt80kw7PaJhHmSQBlxVXJWGZtLsrTj4CL42soXK1SO+GvSHOgsdYs6bBH/tk2ytaQhvGf54besJcrLiy+cJ3VMYo3yRC22NKuA9sQBeaKPgDNPDJvvIBAE7hFXFmuTl7hdJu31EagCR1TiddBHYDTLAcadFhpvzCJQoTo3Rvm3G7eGbwusY/XiAC/3VHT77ccNFiujJIFqZqtTaOuS4l7mDn45N+AFAmElBoEgEARM6983xnHqK0bJkeqZL0qR4lKUf2nRleVzCfHENeA1MIx/k1LA9n7HsoZgvsepi25/j9Om3HgeK7tVhcaY7ziORtoTFb6cySmxaueTifviTdHAz2mE1amPNlay2xydP8j0bER7A3yvOm51VrETBB4DH9H/f3TUkEIsBIEgcFdSXZewKsC+xCjtZMZ2WFc20zxxKv/VJiOp7l5boJgn9lmeWEOvGG4LeHuiLbCeaW1mT7QFrjg6N2TZZ7i+BrrGJ1HkI9CrBNp8djr294nywHxnMALm+0SpVkz0EQjRGASG1NLsVk8i5841w679GKnKKiCe2E4D1UbTwhLhAAHxxLGsm15SXmj84RCFplP4OzBTC4xJ8MQ1jiHJy5sO2xPPetha4jfbmZPMJIGmrEvAFKZ30s6MP+71XUgyiZ/z7HVefdU6qOTtGuEjEMI5im4KMAAuxrvFQhwucwAAAABJRU5ErkJggg==") no-repeat;
width: 20px;
height: 16px;
display: block;
-webkit-animation: bird-move 79s infinite, bird-flap 0.8s steps(10) infinite;
animation: bird-move 79s infinite, bird-flap 0.8s steps(10) infinite;
z-index: 2;
opacity: 0.7;
left: -2vw;
}
.bird-1 {
top: 38%;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.bird-2 {
top: 51%;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.bird-3 {
top: 40%;
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.bird-4 {
top: 43%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
.bird-5 {
top: 48%;
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.bird-6 {
top: 50%;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
@-webkit-keyframes bird-flap {
100% {
background-position: 0 -200px;
}
}
@keyframes bird-flap {
100% {
background-position: 0 -200px;
}
}
@-webkit-keyframes bird-move {
0% {
left: -2vw;
}
100% {
left: 102vw;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
}
@keyframes bird-move {
0% {
left: -2vw;
}
100% {
left: 102vw;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
}
Gantikan tulisan "LINK-IMAGE/clouds4.jpg" & "LINK-IMAGE/clouds3.png" dengan link image.
Atur nominal width & margin kalau perlu!
Markup HTML
<div class="content-jakob-e">
<div class="bird-1"></div>
<div class="bird-2"></div>
<div class="bird-3"></div>
<div class="bird-4"></div>
<div class="bird-5"></div>
<div class="bird-6"></div>
</div>
DEMO

Bonus

Quote hovering - Shake Effect - 3D Rotating Carousel with CSS and JavaScript - Simple On-click Search Field Interaction (Pure CSS) - CSS-Only Nested Dropdown Navigation (ARIA) - Javascriptless Before/After Slider - CSS images with Costum Properties - Profile Image Hover Effect - Collage Parallax - Neon Button - Direction Aware Tiles using clip-path Pure CSS - Share Icons With Hover Effects (All CSS) - Pop-Up Overlay - Animated Search Box - floating animation - Venetian Blinds - Morphing tab button with list

WTF
Koben in the net, ingin berbagi tutorial dari website dynamicdrive (sebuah tempat untuk mendapatkan DHTML & Javascript gratis dan asli untuk meningkatkan situs web!) Original posted title is "jQuery Full Screen Image Viewer" Setelah melihat, ternyata trik untuk menampilkan gambar secara mandiri itu di buat dengan menggunakan 2 buah plugin jQuery! fullscreen image viewer dan zoomio. Jika anda tertarik memasang trick jQuery ini, maka kita akan mendapatkan 2 gaya dalam menampilkan image? Yang pertama, gambar akan ditampilkan dengan metode klik dan akan tampak secara full, lalu bisa zoom with hover! Yang ke dua, gambar akan ditampilkan dengan gaya zoom saja!
Dengan kelebihan URL link gambar hasil upload hostingan blogspot, cocok sekali trik ini ;) Seperti biasa, saya di sini hanya melakukan optimalisasi kode & script. Dan membantu (kalau terbantu) menerangkan cara pemakaiannya saja :D Masukan seluruh kode CSS di tempat biasa

/* ddfullscreenimageviewer */
body.revealviewer {
overflow: hidden;
}
#fullscreencanvas {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
visibility: hidden;
opacity: 0;
background: white;
z-index: 9000;
pointer-events: none;
display: block;
transition: opacity .3s, visibility 0s .3s;
}
body.revealviewer #fullscreencanvas {
opacity: 1;
pointer-events: auto;
visibility: visible;
transition: opacity .5s, visibility 0s .0s;
}
#fullscreenimagearea {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#fullscreencanvas img {
position: relative;
cursor: pointer;
transition: all .5s;
}
div#closeviewer {
/* Large x close button */
width: 35px;
height: 35px;
overflow: hidden;
display: block;
position: fixed;
cursor: pointer;
text-indent: -1000px;
z-index: 100000;
top: 10px;
right: 10px;
}
div#closeviewer::before, div#closeviewer::after {
/* render large cross inside close button */
content: "";
display: block;
position: absolute;
width: 100%;
height: 6px;
background: black;
top: 50%;
opacity: 0;
margin-top: -3px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: transform .5s, opacity .5s;
}
body.revealviewer div#closeviewer::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 1;
}
body.revealviewer div#closeviewer::after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
opacity: 1;
}
/* Loading DIV CSS */
#fullimageloadingdiv, #zoomioloadingdiv {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
visibility: hidden;
overflow: hidden;
display: flex;
pointer-events: none;
z-index: 10000;
align-items: center;
justify-content: center;
background: white;
}
#fullimageloadingdiv .spinner {
width: 40px;
height: 40px;
margin: 100px auto;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
/* zoomio */
#zoomiocontainer {
/* container containing enlarged image (native sized image) */
position: absolute;
z-index: 9999;
overflow: hidden;
background: white;
visibility: visible;
}
#zoomiocontainer img {
/* image inside zoom container */
width: auto;
height: auto !important;
position: absolute !important;
display: block !important;
cursor: move;
}
.disablepointer {
pointer-events: none;
}
#zoomiocontainer.mobileclass {
/* CSS class added to zoom container on mobile OS */
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#zoomioloadingdiv .spinner {
width: 40px;
height: 40px;
margin: 100px auto;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
/* opsional */
.thumbnails {
cursor: zoom-in;
}
Kemudian download dan lakukan host javascript berikut jangan lupa di masukan ke template :P:
  1. ddfullscreenimageviewer.js
  2. www.dynamicdrive.com/dynamicindex4/fullscreenimageviewer/ddfullscreenimageviewer.js
  3. zoomio.js
  4. www.dynamicdrive.com/dynamicindex4/zoomio/zoomio.js
Sisipkan seonggok script berikut sebelum tag </body>
<script>//<![CDATA[
jQuery(function () {
    $('img.thumbnails').fullscreenimage({
        scale: 2
    })
    $('.zoomio').zoomio({
        fadeduration: 500
    })
    $('.nolargeimg').zoomio({
        w: '500px',
        h: '400px'
    })
})
//]]></script>
SAVE.

Ketika memosting nanti syntax URL img harus dituliskan dengan aturan main sbb!

Untuk jQuery Full Screen Image Viewer<img src="URL-GAMBAR-UKURAN-KECIL" class="thumbnails" data-large="URL-GAMBAR-UKURAN-BESAR" alt="" />

<img src="URL-GAMBAR-UKURAN-KECIL" class="thumbnails" data-large="URL-GAMBAR-UKURAN-BESAR" data-scale="3" alt="" />
Untuk Zoomio<img class="zoomio nolargeimg" src="URL-GAMBAR" width="300" alt="" />

<img class="zoomio" src="URL-GAMBAR-UKURAN-KECIL" data-largesrc="URL-GAMBAR-UKURAN-BESAR" />

DEMO
codepen.io/beben-koben/full/NvWgVv/

WTF
Saya hanya ingin memberitahukan informasi ringan, yang mungkin dari kebanyakan orang sudah pada tahu info ini :D Sobat tentu kenal dengan dengan salah satu playground terkenal dengan nama codepen.io? Jika kita perhatikan secara teliti di dalam editor codepen sudah tertanam secara default beberapa macam Preprocessor! HTML preprocessor: HAML, Markdown, Slim & Pug. CSS preprocessor: LESS, SCSS, Sass, Stylus & PostCSS. JavaScript preprocessor: CoffeeScript, TypeScript, LiveScript & Babel.
Kita tinggal memilih saja apa yang akan digunakan dalam membuat sebuah hasil karya?

Lantas bagaimana caranya jika kepengen mencomot kode, namun kode tersebut di tulis dengan bahasa yg tidak kita tahu? Gampang bin mudah, sobat tinggal klik tanda arrow ke bawah yg berada di pojok kanan atas pada tiap-tiap kotak code. Kemudian elo pilih opsi View Compiled ... Dengan otomatis kode akan berubah secara instan ;))compiledSebagai contoh gue akan melakukan kompilasi kode SCSS ke CSS. Kunjungi halaman berikut CSS-only Notifications Component. Tidak mungkin kita langsung mencomot kode yg ada untuk di pakai di blog? Karena koding template blogspot tidak mendukung SCSS? Adapun hasil kompilasi akan menjadi banyak bro, karena penulisan syntax SCSS lebih canggih dari pada CSS!

Berikut link download hasil kompilasi dari postingan CSS only Notifications Component CSS Notifications.7z Jadi ada 33 gaya CSS notifikasi. Silahkan sobat pilih & pasang sesuai kebutuhan dan selera :)

CSS-Filter (blur) on image-caption - Codepen embed theme - Solarized light - All CSS Water Themed UI Demo - Movie Booking - Attract hover effect - CSS-only Fade Siblings on Hover - Social Icons vision 3D

WTF
Mau mosting apaan kok jadi bingung sendiri, rasa-rasa sudah ada semua di dunia internet ini apa yang kita cari ;)) Ada mesin pencari/penjelajah gunanya untuk mencari, carilah apa yang kita cari! Lantas kalau yg kita cari itu sudah tidak ada, bagaimana? Cara tercepat yaitu menggunakan jasa cache dari si search engine. Cara lain dengan menggunakan jasa bantuan Wayback Machine. Ada satu snippet jQuery untuk menerapkan Augment links jquery archival. Jangan lupa untuk melihat halaman hubgit repositories!

Ada satu blog lain lagi yg menarik, di mana artikelnya keren punya? Chris West's Blog (JavaScript, Math, and much more...) Gue baca tentang ini dari sono use canvas To watermark images. Apakah ada yg bisa melakukan custom pada script tsb agar dapat berjalan pada hyperlink normal?
Demo: codepen.io/atelierbram/pen/RgKLZK
Ada yg mau coba memendekan URL dengan metode emoji, try this Mosho. Untuk lazy blogger bisa mencicipi simple sharing buttons generator. Pernah bertemu dengan jssnip? Bagi yg lagi cari & butuh forms form CSS Forms From CodePen!

So cool bro Trendy CSS Text Shadows :-bd

The new object-fit property for cropping images in CSS. You can try this also exploring blend modes in CSS. Interesting posted create direction aware CSS only hovers effect. Chris Coyier’s favorite codePen by David Walsh some amazing work on CodePen and favorito CodePen Demos II.

Hampura O:-)
al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE