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

Happy holiday :-h

0 Komentar WTF
Mungkin salah satu cara agar eksis memposting di blog adalah melakukan update artikel yang sudah pernah dibahas sob :D Waktu itu AA Koben pernah bercerita tentang seekor kancil eh salah, pure CSS cinema effect! Pada sesi itu masih menyertakan sebuah gambar untuk memperlihatkan efek cinemanya. Nah kesempatan kali ini murni 100% akan menggunakan kode CSS.
Look demo in make cinema grain effect use css3 Source by Old Timey Film In 1 Div
.pane {
height: 350px;
width: 500px;
margin: 15px auto;
overflow: hidden;
position: relative;
filter: sepia(100%);
border: 5px dashed #111;
background-repeat: no-repeat;
background-color: transparent;
background-position: center 0px;
animation: jitter 5s linear infinite;
}
.pane img {
top: 50%;
left: 50%;
width: auto;
height: 100%;
position: absolute;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.pane:hover,.pane:hover:before,.pane:hover:after {
border: none;
filter: none;
animation: none;
background: none;
transition: all .5s ease-in-out;
}
.pane:before {
top: 0px;
left: 0px;
content: '';
width: 100%;
height: 100%;
padding: 5px 0;
filter:blur(2px);
position: absolute;
animation: jitter2 5s linear infinite;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.01) 47%,rgba(0,0,0,0) 48%,rgba(0,0,0,1) 100%);
}
.pane:after {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
content: '';
filter:blur(3px);
position: absolute;
border-left: solid 1px black;
border-right: solid 1px black;
animation: artifacts 5s linear infinite;
}
@keyframes jitter {
0% {
}
10% {
background-position: center -10px;
}
21% {
background-position: center -5px;
filter:brightness(2) sepia(100%);
}
21.1% {
background-position: center -35px;
}
21.2% {
background-position: center -4px;
filter:brightness(1) sepia(100%);
}
21.3% {
background-position: center -25px;
}
21.4% {
background-position: center -52px;
}
21.5% {
background-position: center -5px;
}
21.6% {
background-position: center -60px;
}
22% {
background-position: center 0px;
}
91% {
background-position: center -5px;
}
91.1% {
background-position: center -35px;
}
91.9% {
background-position: center -4px;
}
91.3% {
background-position: center -95px;
}
91.4% {
background-position: center -59px;
}
91.5% {
background-position: center -5px;
}
91.6% {
background-position: center -60px;
}
99% {
background-position: center 0px;
}
}
@keyframes jitter2 {
0% {
}
10% {
margin-top:-10px;
content: '°';
color:rgba(0,0,0,.6);
}
21% {
margin-top:-5px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.31) 47%,rgba(0,0,0,.2) 48%,rgba(0,0,0,1) 100%);
content:'';
}
21.1% {
margin-top:-25px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.31) 47%,rgba(0,0,0,.2) 48%,rgba(0,0,0,1) 100%);
}
21.2% {
margin-top:-4px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.01) 47%,rgba(0,0,0,0) 48%,rgba(0,0,0,1) 100%);
}
21.3% {
margin-top:-15px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.31) 47%,rgba(0,0,0,.2) 48%,rgba(0,0,0,1) 100%);
}
21.4% {
margin-top:-25px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.01) 47%,rgba(0,0,0,0) 48%,rgba(0,0,0,1) 100%);
}
21.5% {
margin-top:-5px;
}
21.6% {
margin-top:-30px;
}
22% {
margin-top:0px;
}
91% {
margin-top:-5px;
}
91.1% {
margin-top:-25px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.31) 47%,rgba(0,0,0,.2) 48%,rgba(0,0,0,1) 100%);
}
91.9% {
margin-top:-4px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.01) 47%,rgba(0,0,0,0) 48%,rgba(0,0,0,1) 100%);
}
91.3% {
margin-top:-5px;
}
91.4% {
margin-top:-21px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.31) 47%,rgba(0,0,0,.2) 48%,rgba(0,0,0,1) 100%);
}
91.5% {
margin-top:-5px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.01) 47%,rgba(0,0,0,0) 48%,rgba(0,0,0,1) 100%);
}
91.6% {
margin-top:-31px;
}
99% {
margin-top:0px;
}
}
@keyframes artifacts{
0%{
left:0%;
width:100%;
}
20%{
left:20%;
width:70%;
}
40%{
left:10%;
width:80%;
}
60%{
left:50%;
width:0%;
filter:blur(5px);
}
80%{
left:60%;
width:20%;
}
90%{
left:10%;
width:60%;
filter:blur(3px);
}
100%{
left:0%;
width:100%;
}
}
Syntax HTML<div class="pane">
<img src="LINK-IMAGE" alt="" />
</div>
Harap perhatikan property CSS sudah memakai level 3. Tingkat advanced ;)) Selain kreasi efek yg tak kunjung habis, ada beberapa karya yang tak henti-henti selalu saja ada yg membuat :"> Do you still remember about CSS TABS! Fitur yg punya fungsi mirip dengan accordion Lets how to make responsive pure css tabs & accordion, without position absolute & with a selected state.
.tabs {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 112%;
}
.tabs label {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
display: block;
padding: 0.7rem 1rem;
margin-right: 0.1rem;
cursor: pointer;
background: #90CAF9;
font-weight: bold;
-webkit-transition: background ease 0.2s;
transition: background ease 0.2s;
}
.tabs .tab {
-webkit-box-ordinal-group: 100;
-webkit-order: 99;
-ms-flex-order: 99;
order: 99;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 100%;
display: none;
padding: 1rem;
background: #fff;
}
.tabs input[type="radio"] {
position: absolute;
opacity: 0;
}
.tabs input[type="radio"]:checked + label {
background: #fff;
}
.tabs input[type="radio"]:checked + label + .tab {
display: block;
}
@media (max-width: 45em) {
.tabs .tab,
.tabs label {
-webkit-box-ordinal-group: NaN;
-webkit-order: initial;
-ms-flex-order: initial;
order: initial;
}
.tabs label {
width: 100%;
margin-right: 0;
margin-top: 0.2rem;
}
}

<div class="tabs">
<input type="radio" name="tabs" id="tabone" checked="checked">
<label for="tabone">Tab One</label>
<div class="tab">
<p>YOUR CONTENT I HERE.</p>
</div>

<input type="radio" name="tabs" id="tabtwo">
<label for="tabtwo">Tab Two</label>
<div class="tab">
<p>YOUR CONTENT II HERE..</p>
</div>

<input type="radio" name="tabs" id="tabthree">
<label for="tabthree">Tab Three</label>
<div class="tab">
<p>YOUR CONTENT III HERE...</p>
</div>
</div>
Jika sobat kepengen menambahkan koten tab, harus perhatikan baris kode berikut
<input type="radio" name="tabs" id="UNIK-ID">
 <label for="UNIK-ID">Tab Three</label>
Harus sama dalam kesatuan tagging, berbeda secara keseluruhan.
Source & demo by mikestreety

Efek sudah, urusan tabs beres juga, terakhir bonus AA akan coba-coba bahas salah satu topik yg tidak kunjung abis pada ngebahas yaitu mengenai hover
Now i will shared to you, how to make hover with shine effect!

.btn-wrapper {
display: block;
margin: 10px 0 0 -74.5px;
text-align: center;
}
.btn {
display: inline-block;
background: #A09EBB;
padding: 10px 30px;
position: absolute;
z-index: 0;
overflow: hidden;
cursor: pointer;
border-radius: 2px;
color: #FFF;
border: 1px solid #6c3b96;
font-weight: bold;
font-family: sans-serif;
letter-spacing: 1px;
}
.btn:after {
content: "";
display: inline-block;
position: absolute;
z-index: 1;
background: rgba(255,255,255,0.1);
width: 150%;
height: 100%;
bottom: -80px;
right: 40px;
transform: rotate(35deg);
}
.btn-wrapper:hover a {
animation: grow 600ms ease-in-out forwards;
}
.btn-wrapper:hover a:after {
animation: shine 2s ease-in-out forwards;
animation-iteration-count: infinite;
}
@keyframes shine {
from {
transform: translateX (0px) translateY(0px) rotate(35deg);
opacity: 0.1;
}
to {
transform: translateX (200px) translateY(-300px) rotate(35deg);
opacity: 1;
}
}
@keyframes grow {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}
HTML language syntax<div class="btn-wrapper">
<a href="" class="btn">TITLE</a>
</div>
Demo in hover and shine Source by John Garcia

BONUS:

HEX 2 RGB 2 HSL Conversion - Pure CSS Flickering TV screen - CSS Icons - CSS Hover Effects for Links - Descender Capable Underlines - Dots (Image Interpolation) - Quick modal animation test - Image Instagram like - Hidden menu - Printer Pull Down To Refresh - Hamburger Icon Animations - Sticky positioning - FAB Animation: Share Button - Material Cards Design - User Profile - Styling without ids/classes - gradient-randomizer - CSS Only Image Tile Filtering Effect - Woohooo! - Quick nav with sub-menu - Links with Marginalia Notes - Basic Tooltip - pure css drawer - Email Vault - Throw your letters

Bye :-h

0 Komentar WTF
Jika sobat perhatikan pada web plus.google.com atau www.youtube.com ketika kita mengklik navigasi yang ada, maka akan tampak indicator berupa garis lurus tipis tepat di bawah kotak address bar browsingan. Pada halaman youtube di beri nama progress indicator! Kalau pada web jalantikus.com kala kita masuk pada sesi artikel dan melakukan scroll ke bawah, akan tampak pula indicator tersebut. Memang banyak versi dan bentuk untuk tutorial satu ini bro :DCSS Scroll IndicatorTetapi AA Koben akan berbagi bagaimana cara membuat indikator itu hanya dengan kode CSS? Sebelum mulai, harap diperhatikan oleh kalian selektor kode CSS yg ada! Karena akan menggunakan kode CSS Selector :root For reference you can read here CSS Selector Reference Cek apakah browser sobat mendukung atau tidak terhadap kode-kode nanti yg diberikan ;))

Secara teknikal sobat hanya perlu menambahkan kode CSS berikut ke dalam template kalian.

:root {
  --si-height: .3em;
  --si-fg: #0bf;
  --si-bg: transparent;
  --bg: #fff;
  --fuzz: 0%;
}
body {
  background: var(--bg);
  background-image: -webkit-linear-gradient(top, transparent var(--si-height), var(--bg) var(--si-height)), -webkit-linear-gradient(left bottom, var(--si-fg) calc(50% - var(--fuzz)), var(--si-bg) calc(50% + var(--fuzz)));
  background-image: linear-gradient(to bottom, transparent var(--si-height), var(--bg) var(--si-height)), linear-gradient(to right top, var(--si-fg) calc(50% - var(--fuzz)), var(--si-bg) calc(50% + var(--fuzz)));
  background-size: 100% 100%, calc(100% + var(--fuzz)*2) calc(100% - 100vh + var(--si-height));
  background-repeat: no-repeat,  no-repeat;
  background-attachment: fixed,  scroll;
}
Jika template kalian memakai gambar maka akan ada bentrok dengan kode background-repeat, background-size & background-attachment Oleh sebab itu buatlah variabel baru saja ;)
Source and demo: codepen.io/jasesmith/pen/YGvGjm

Dengan trik tersebut memang akan hanya didapatkan indikator di dalam tag body. Lantas bagaimana kalau kita ingin memasang indikator di tempat lain? Mau nggak mau sobat harus belajar dari pos berikut PrognRoll.

Lebih dan kurangnya AA minta maaf, wabillahi taufiq walhidayah wassalamua'laikum warahmatullahi wabarakatuh.

Bonus:
Fancy Camera - Google maps fade in animation - Flat-style drawer Contact Me - Hovering Shiny CodePen in Space - Make any text look ugly and horrible yet strangely beautiful - Back to Top button in pure CSS without HTML anchors or JS - CSS Waves - CSS ICON - Learn CSS Animation - Emoji Engine

0 Komentar WTF
Tepatnya AA Koben tidak tahu, tampilan home page www.blogger.comHome Page Blogger berubah menjadi full stylish! Sepertinya telah terjadi perubahan di sana-sini dari pihak google? Ada banyak layanan embah google yang diberhentikan. Ya sudahlah, sekarang gue mau berbagi tutorial CSS bagaimana cara membuat awesome hover lists image. Jika sobat mempunyai beberapa gambar (4 image) dan ingin ditampilkan secara bersamaan di dalam satu konten, maka pelajarilah trik berikut ini :D
Mungkin dengan adanya snapshoot akan terlihat lebih cuamik :Pawesome hover lists imageSudah terbayangkan betapa kerennya tutorial saat ini! Ke empat gambar di bungkus menjadi satu & memiliki efek transition yg akan memanjakan mata para pelancong :"> Kalau gambarnya kuntilanak, pelancong bakalan minggat =))

.rangka-fix {
margin: -15px 0 0 -15px;
}
.rangka .rangka-dalam {
float: left;
display: inline;
text-align: left;
margin: 10px 0 0 15px;
width: 250px;
padding: 5px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #2c2c2c;
}
.rangka .rangka-dalam a {
display: block;
outline: 0;
}
.rangka .rangka-dalam:hover {
background: #1a1a1a;
}
.rangka-dalam .gambar {
position: relative;
background: #000000;
overflow: hidden;
}
.rangka-dalam .gambar img {
display: block;
width: 100%;
height: auto;
text-align: center;
}
.rangka .gambar img.gambar2, .rangka .gambar img.gambar3, .rangka .gambar img.gambar4 {
position: absolute;
width: 60px;
height: auto;
border: 1px solid #7c7c7c;
opacity: 0.7;
transition: all 0.3s;
}
.rangka .gambar img.gambar1 {
transition: all 0.3s;
}
.rangka .gambar img.gambar1:hover {
transform: scale(1.3);
}
.rangka .gambar img.gambar2:hover, .rangka .gambar img.gambar3:hover, .rangka .gambar img.gambar4:hover {
opacity: 1;
z-index: 4;
width: 100px;
height: auto;
}
.rangka .gambar img.gambar2 {
right: 5px;
bottom: 5px;
z-index: 3;
}
.rangka .gambar img.gambar3 {
right: 15px;
bottom: 15px;
z-index: 2;
}
.rangka .gambar img.gambar4 {
right: 25px;
bottom: 25px;
z-index: 1;
}
.rangka .gambar {
line-height: 135px;
}
.rangka-dalam .judul {
color: #fff;
padding: 3px;
height: 13px;
overflow: hidden;
display: block;
text-align: center;
font-size: 15px;
letter-spacing: 1px;
}
Silahkan sobat ganti/atur height, width, padding, or margin.
<div class="rangka">
<div class="rangka-fix">
<div class="rangka-dalam">
<a href="SYNTAX LINK 1" title="">
<div class="gambar">
<img class="gambar1" src="IMAGE LINK 1" alt=" " />
<a href="SYNTAX LINK 2" title="title 2"><img class="gambar2" src="IMAGE LINK 2" alt=" " /></a>
<a href="SYNTAX LINK 3" title="title 3"><img class="gambar3" src="IMAGE LINK 3" alt=" " /></a>
<a href="SYNTAX LINK 4" title="title 4"><img class="gambar4" src="IMAGE LINK 4" alt=" " /></a>
</div>
<span class="judul">Your Title Here</span>
</a>
</div>
</div>
</div>
Kalau di kasih screenshot sepertinya kurang gereget, mungkin musti ada demonya :-?
DEMO: codepen.io/beben-koben/pen/yaGbyL

Sobat bisa gantikan gambar 'n link 2, 3, dan 4 dengan gambar web jejaring untuk berbagi or terserah mau apapun! Source saya dapatkan dari salah satu website bokep :D
Be a creative ;)
al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE