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 ☺

0 Komentar WTF
Berbicara mengenai effects tentu tidak akan ada habisnya. Dengan menggunakan bahasa CSS saja ada bejibun hasil yang sudah bisa kita comot secara gratis ;)) Salah satu efek paling kreatif yg memikat mata adalah The Gooey Effect. Salah seorang kreator dari gooey efek ini adalah bernama Lucas Bebber! Kalau mau membaca artikel tentang The Gooey Effect
Berikut adalah beberapa kreasi goo-ey pilihan dari web playground codepen
  • Gooey toggle switch.
  • Social Icon with Gooey Effect.
  • Pure CSS gooey nav menu button.
  • SVG Filter Gooey Share, Social Media Button.
Ada banyak sih, searching saja sendiri, try also in github ;)
Setelah gue baca dan mengamati, ternyata efek yang dihasilkan itu bisa murni menggunakan bahasa CSS, SVG, atau Script? Tergantung sobat terbiasa dengan yg mana, tinggal pilih sesuai kebutuhan! Untuk lebih jelas, silahkan sobat buka HTML Editor Playground kalian atau secara online bisa kunjungi Create a New Pen, Create a new fiddle or Live HTML Editor.

Masukan syntax HTML pada kotak HTML, kode CSS pada kotak CSS begitu jg JavaScript pd kotak script! Berikut kode awal untuk melihat bagaimana indahnya si gooey efek tercipta dengan CSS?

.blobs{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 400px;
height: 200px;
margin: auto;
background-color: #FFF;
filter: contrast(15) contrast(.5) sepia(1) brightness(1.85) hue-rotate(319deg) saturate(3.45);
overflow: hidden;
}
.blob{
background-color: #000;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
transition: cubic-bezier(.8,0,.25,1) 1.3s;
box-shadow: 0 0 30px 10px black;
}
.blobs:hover .blob:first-child{
transform: translate(-50%, -50%) translateX(-70px);
}
.blobs:hover .blob:last-child{
transform: translate(-50%, -50%) translateX(70px);
}
<div class="blobs">
<div class="blob"></div>
<div class="blob"></div>
</div>

Salah satu creation perpaduan goo_ey efek dgn memakai SVG and jQuery SVG Filter Gooey Share, Social Media Button. By dynamicdrive you can get free code for Slide Out Social Icon Buttons. Di awal tadi salah seorang master sudah membuat Gooey Menu dengan 4 varian menggunakan CSS and SVG Filters! Sekarang AA Koben akan bagi pada kalian satu persatu ke-4 varian tersebut. Kode yg saya buat khusus untuk browser mozilla? This is my experiment bro HA...HA :))

The code is the creation of an experiment for the mozilla browser only.

Gooey Menu Version 1

.menu-item, .menu-open-button {
background: #ff4081;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 20px;
color: white;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 50%;
margin-left: -190px;
padding-top: 20px;
padding-left: 190px;
width: 380px;
height: 250px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
-webkit-filter: url("#shadowed-goo");
filter: url("#shadowed-goo");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'shadowed-goo\'><feGaussianBlur in=\'SourceGraphic\' result=\'blur\' stdDeviation=\'10\'/><feColorMatrix in=\'blur\' mode=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7\' result=\'goo\'/><feGaussianBlur in=\'goo\' stdDeviation=\'3\' result=\'shadow\'/><feColorMatrix in=\'shadow\' mode=\'matrix\' values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2\' result=\'shadow\'/><feOffset in=\'shadow\' dx=\'1\' dy=\'1\' result=\'shadow\'/><feBlend in2=\'shadow\' in=\'goo\' result=\'goo\'/><feBlend in2=\'goo\' in=\'SourceGraphic\' result=\'mix\'/></filter></defs></svg>#shadowed-goo");
}
.menu-item:hover {
background: white;
color: #ff4081;
}
.menu-item:nth-child(3) {
-webkit-transition-duration: 70ms;
transition-duration: 70ms;
}
.menu-item:nth-child(4) {
-webkit-transition-duration: 130ms;
transition-duration: 130ms;
}
.menu-item:nth-child(5) {
-webkit-transition-duration: 190ms;
transition-duration: 190ms;
}
.menu-item:nth-child(6) {
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
}
.menu-item:nth-child(7) {
-webkit-transition-duration: 310ms;
transition-duration: 310ms;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 160ms;
transition-duration: 160ms;
-webkit-transform: translate3d(114.42548px, 11.48084px, 0);
transform: translate3d(114.42548px, 11.48084px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 240ms;
transition-duration: 240ms;
-webkit-transform: translate3d(77.18543px, 85.2491px, 0);
transform: translate3d(77.18543px, 85.2491px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 320ms;
transition-duration: 320ms;
-webkit-transform: translate3d(0.09158px, 114.99996px, 0);
transform: translate3d(0.09158px, 114.99996px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: translate3d(-77.04956px, 85.37192px, 0);
transform: translate3d(-77.04956px, 85.37192px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
-webkit-transition-duration: 480ms;
transition-duration: 480ms;
-webkit-transform: translate3d(-114.40705px, 11.66307px, 0);
transform: translate3d(-114.40705px, 11.66307px, 0);
}
nav.menu a, .fa {
width:80px;
height:80px;
line-height:80px;
vertical-align:middle;
}
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-cog"></i> </a>
</nav>
DEMO:

Gooey Menu Version 2

.menu-item, .menu-open-button {
background: #e91e63;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 150px;
color: white;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 50%;
margin-left: -190px;
padding-top: 20px;
padding-left: 190px;
width: 380px;
height: 250px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
-webkit-filter: url("#shadowed-goo");
filter: url("#shadowed-goo");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'shadowed-goo\'><feGaussianBlur in=\'SourceGraphic\' result=\'blur\' stdDeviation=\'10\'/><feColorMatrix in=\'blur\' mode=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7\' result=\'goo\'/><feGaussianBlur in=\'goo\' stdDeviation=\'3\' result=\'shadow\'/><feColorMatrix in=\'shadow\' mode=\'matrix\' values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2\' result=\'shadow\'/><feOffset in=\'shadow\' dx=\'1\' dy=\'1\' result=\'shadow\'/><feBlend in2=\'shadow\' in=\'goo\' result=\'goo\'/><feBlend in2=\'goo\' in=\'SourceGraphic\' result=\'mix\'/></filter></defs></svg>#shadowed-goo");
}
.menu-item:hover {
background: white;
color: #e91e63;
}
.menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(4) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(5) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(6) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(7) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(8) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(9) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
-webkit-transform: translate3d(0.08361px, -104.99997px, 0);
transform: translate3d(0.08361px, -104.99997px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 280ms;
transition-duration: 280ms;
-webkit-transform: translate3d(90.9466px, -52.47586px, 0);
transform: translate3d(90.9466px, -52.47586px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 380ms;
transition-duration: 380ms;
-webkit-transform: translate3d(90.9466px, 52.47586px, 0);
transform: translate3d(90.9466px, 52.47586px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 480ms;
transition-duration: 480ms;
-webkit-transform: translate3d(0.08361px, 104.99997px, 0);
transform: translate3d(0.08361px, 104.99997px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
-webkit-transition-duration: 580ms;
transition-duration: 580ms;
-webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
transform: translate3d(-90.86291px, 52.62064px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(8) {
-webkit-transition-duration: 680ms;
transition-duration: 680ms;
-webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
transform: translate3d(-91.03006px, -52.33095px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(9) {
-webkit-transition-duration: 780ms;
transition-duration: 780ms;
-webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
transform: translate3d(-0.25084px, -104.9997px, 0);
}
nav.menu a, .fa {
width:80px;
height:80px;
line-height:80px;
vertical-align:middle;
}
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-cog"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-ellipsis-h"></i> </a>
</nav>
DEMO:

Gooey Menu Version 3

.menu-item, .menu-open-button {
background: #00bcd4;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 20px;
color: white;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 7%;
margin-left: -80px;
padding-top: 20px;
padding-left: 80px;
width: 650px;
height: 150px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
-webkit-filter: url("#shadowed-goo");
filter: url("#shadowed-goo");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'shadowed-goo\'><feGaussianBlur in=\'SourceGraphic\' result=\'blur\' stdDeviation=\'10\'/><feColorMatrix in=\'blur\' mode=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7\' result=\'goo\'/><feGaussianBlur in=\'goo\' stdDeviation=\'3\' result=\'shadow\'/><feColorMatrix in=\'shadow\' mode=\'matrix\' values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2\' result=\'shadow\'/><feOffset in=\'shadow\' dx=\'1\' dy=\'1\' result=\'shadow\'/><feBlend in2=\'shadow\' in=\'goo\' result=\'goo\'/><feBlend in2=\'goo\' in=\'SourceGraphic\' result=\'mix\'/></filter></defs></svg>#shadowed-goo");
}
.menu-item:hover {
background: white;
color: #00bcd4;
}
.menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(4) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(5) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(6) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 190ms;
transition-duration: 190ms;
-webkit-transform: translate3d(110px, 0, 0);
transform: translate3d(110px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 290ms;
transition-duration: 290ms;
-webkit-transform: translate3d(220px, 0, 0);
transform: translate3d(220px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 390ms;
transition-duration: 390ms;
-webkit-transform: translate3d(330px, 0, 0);
transform: translate3d(330px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 490ms;
transition-duration: 490ms;
-webkit-transform: translate3d(440px, 0, 0);
transform: translate3d(440px, 0, 0);
}
nav.menu a, .fa {
width:80px;
height:80px;
line-height:80px;
vertical-align:middle;
}
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
</nav>
DEMO:

Gooey Menu Version 4

.menu-item, .menu-open-button {
background: #ffc107;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 20px;
color: white;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 7%;
margin-left: -80px;
padding-top: 20px;
padding-left: 80px;
width: 650px;
height: 150px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
-webkit-filter: url("#shadowed-goo");
filter: url("#shadowed-goo");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'shadowed-goo\'><feGaussianBlur in=\'SourceGraphic\' result=\'blur\' stdDeviation=\'10\'/><feColorMatrix in=\'blur\' mode=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7\' result=\'goo\'/><feGaussianBlur in=\'goo\' stdDeviation=\'3\' result=\'shadow\'/><feColorMatrix in=\'shadow\' mode=\'matrix\' values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2\' result=\'shadow\'/><feOffset in=\'shadow\' dx=\'1\' dy=\'1\' result=\'shadow\'/><feBlend in2=\'shadow\' in=\'goo\' result=\'goo\'/><feBlend in2=\'goo\' in=\'SourceGraphic\' result=\'mix\'/></filter></defs></svg>#shadowed-goo");
}
.menu-item:hover {
background: white;
color: #ffc107;
}
.menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(4) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(5) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(6) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 170ms;
transition-duration: 170ms;
-webkit-transform: translate3d(80px, 0, 0);
transform: translate3d(80px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-webkit-transform: translate3d(160px, 0, 0);
transform: translate3d(160px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 330ms;
transition-duration: 330ms;
-webkit-transform: translate3d(240px, 0, 0);
transform: translate3d(240px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 410ms;
transition-duration: 410ms;
-webkit-transform: translate3d(320px, 0, 0);
transform: translate3d(320px, 0, 0);
}
nav.menu a, .fa {
width:80px;
height:80px;
line-height:80px;
vertical-align:middle;
}
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
</nav>
DEMO:

For fun

CSS3 Keyframes Animation Link Style - Animated Search Box - What is Clojure - Wavy Walrus & the Carpenter - Floating Social Buttons (Font Awesome) - Asana Style Buttons - Flat Buttons' Psuedo Striped Shadows - Styled file input - Laser Text animation - Header Resize on Scroll Simple Page Layout - CSS 3 Icons - Panels - Button with orbit #1 - Split fractured text - Kata - Simple gallery - Ordered List Hacks - What does a developer share? - Text Rotater - Simple toggle - Border-Image : SVG - Split Screen - CSS Text animation - floating button wants to be clicked - Magazine Template - Destination magazine - CSS only 3D paper fold text effect - Gradient Buttons with Background-Color Change (CSS-only) - Open menu effect | Pure CSS - Emoji as a cursor - Cascading text effects 📶✍️🤓 - File Dropper - ASCII art - Fading text with CSS blend modes - Pure CSS Responsive Flexbox Navigation - PX to EM calculator - Bokeh Pattern - 3D Magazine flip preview in CSS - Draggable Menu Icon - CSS3 Social buttons vol.1 - Numscrubber.js - Quick CSS3 tooltips (No images, no js) - Stacked Cards Hover Effects - Vue.js Border Radius Generator

Bye :-h

0 Komentar WTF
Dulu saya pernah menuliskan artikel tentang PDF viewer for browser mozilla & chrome bertujuan untuk melihat file PDF pada mesin browser. Eh sekarang sudah tertanam secara permanen di mozilla ;)) Sekarang AA Koben akan berbagi informasi bagaimana kita akan menulis dan kemudian di convert ke dalam bentuk word? Seperti yg kita ketahui bersama, untuk membuat sebuah file .word kebanyakan web di luaran sana menawarkan jasanya dengan cara mesti register terlebih dahulu! Dari banyaknya editor salah satu yg terkenal adalah TinyMCE. Dengan editor tersebut gue dapat dari web GitHub html-docx-js.html-docx-js

HTML docx js

Ini adalah perpustakaan yang sangat kecil yang mampu mengkonversi dokumen HTML ke format DOCX yang digunakan oleh Microsoft Word 2007 dan seterusnya. Itu berhasil melakukan konversi di browser dengan menggunakan fitur yang disebut 'altchunks'. Singkatnya, hal itu memungkinkan konten embedding dalam bahasa markup yang berbeda. Kami menggunakan dokumen MHT untuk mengantar konten tertanam ke Word karena memungkinkan untuk menangani gambar. Setelah word membuka file tersebut, ia mengubah konten eksternal untuk mengolah kata ML (ini adalah markup dari file DOCX disebut) dan menggantikan referensi.

Altchunks tidak didukung oleh Microsoft Word untuk Mac 2008 dan tidak didukung oleh LibreOffice dan Google Docs.

Compatibility

Perpustakaan ini harus bekerja pada setiap browser modern yang mendukung blob (baik native atau melalui Blob.js). Itu diuji pada Google Chrome 36, Safari 7, Firefox 42.0 dan Internet Explorer 10.

Ini juga bekerja pada Node.js (diuji pada v0.10.12) menggunakan Buffer bukan Blob.

Images Support

Perpustakaan ini hanya mendukung gambar base64 inline (bersumber melalui DATA URI). Tetapi mudah untuk mengkonversi gambar biasa (bersumber dari folder statis) dengan cepat.

Seperti biasa aku hanya menambahkan di sana-sini agar .html ini bisa beroperasi secara offline ;) Satu lagi saya sudah menambahkan fitur get local image pada bagian menu Insert >>> Image.

Download

4shared or Google Drive

Password:

Berikut beberapa resources buat sobat untuk mempelajari lebih lanjut...
  • TinyMCE documentation
  • TinyMCE on CodePen
  • TinyMCE Image Upload
  • TinyMCE 4 w/ Twitter Bootstrap
Semoga bermanfaat, dan silahkan dikembangkan, kalau sudah ngembang kasih tauk saya yah :D :)

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