Cyber Jellyfish Team

HTML5 merupakan salah satu bahasa yang paling populer di kalangan komunitas pengembang karena menawarkan sejumlah fitur seperti dukungan browser modern, struktur tag tertentu, elemen visual seperti sudut membulat sekarang dibangun di, drag dan drop interaktif, video baru, elemen kanvas audio dan, animasi SVG, dan banyak lagi.dan kali ini kita akan bahas Jenis Framework HTML5 terbaik pada tahun 2015.



Foundation adalah kerangka open source pertama untuk menjadi responsif, semantik, mobile pertama dan sekarang, memiliki parsial dengan Interchange.
Foundation 5 baru saja dirilis, yang merupakan rilis tercepat sampai saat ini - lebih cepat dalam semua aspek produk bangunan dan situs.Framework satu ini adalah framework paling terbaik menurut CJT



Enyo adalah suatu kerangka kerja untuk membangun aplikasi HTML5 berkualitas asli. Ini cross-platform yang kompatibel dan pertempuran diuji. Enyo telah didukung aplikasi untuk ponsel Palm, HP TouchPad dan sekarang 2014 LG Smart TV.

Titon Toolkit adalah kumpulan yang sangat kuat komponen user interface dan kelas utilitas untuk web responsif, ponsel, dan modern. Masing-masing komponen mewakili HTML dienkapsulasi, CSS, dan JavaScript fungsi untuk peran elemen halaman tertentu.
Toolkit memanfaatkan teknologi terbaru dan terbaik. Ini termasuk HTML5 untuk semantik, CSS3 untuk animasi dan gaya, Sass untuk CSS pra-pengolahan, Gulp untuk tugas dan manajemen paket, dan kuat API browser baru untuk lapisan JavaScript.

Pikabu adalah kerangka kerja untuk menciptakan off-kanvas panel flyout. Memiliki markup sederhana, mendukung bergulir asli, dan sepenuhnya disesuaikan. Tidak ada tema, hanya barebone HTML dan CSS. Pikabu super disesuaikan dengan kebutuhan Anda.

FastShell adalah kerangka yang dibangun untuk pengembang modern yang mendorong alur kerja yang lebih baik. Ini mencakup boilerplate HTML5, setup Sass OOCSS, dan Gulpjs. JavaScript task running, build processes, auto minification and file concatenation dibungkus dengan HTML5 framework boilerplate ditingkatkan. cucok kan? hahaha

Onsen UI adalah kerangka pembangunan front-end untuk PhoneGap / Cordova aplikasi hibrida. Ini berfokus pada penciptaan aplikasi mobile yang dapat digunakan. Juga, digunakan dengan Monaca, itu adalah sederhana untuk mengembangkan fitur backend dan menambahkan dukungan perangkat. Onsen UI dikembangkan menggunakan Angular.js dan Topcoat.

Ionic adalah HTML5 kuat kerangka pembangunan aplikasi asli yang membantu Anda membangun asli-perasaan aplikasi mobile semua dengan teknologi web seperti HTML, CSS, dan Javascript. Ionic difokuskan terutama pada tampilan dan nuansa, dan interaksi UI dari aplikasi Anda. Ionic gratis dan open source, dibangun dengan Sass dan dioptimalkan untuk AngularJS. Ini adalah model off dari SDK pengembangan mobile asli populer, sehingga mudah dipahami bagi siapa saja yang telah membangun aplikasi native untuk iOS atau Android.

Clank adalah sebuah HTML open source dan kerangka CSS untuk prototipe aplikasi mobile dan tablet asli. Menggunakan teknik CSS modern, dengan Sass dan Kompas, dan itu komponen berbasis sehingga Anda dapat memilih dan memilih apa yang Anda butuhkan.

Dan terakhir iio Engine adalah sebuah kerangka aplikasi open source untuk pembuatan lebih mudah dan penyebaran aplikasi HTML5. Memiliki SDK kaya fitur, mesin penyebaran cross-platform, dan sistem debugging maju.


Oke cukup sekian dulu bray,just info semoga bermanfaat :D

Hello guys,bagaimana kabarnya?,CJT mau share trik tentang CSS nih pernah liat postingan seperti dibawah ini?

Sebelum kita belajar,patutnya kita mengenal sejarahnya dulu guys.Sejarah JavaScript dimulai sekitar tahun 1994, ketika internet dan website sedang mengalami perkembangan yang pesat. Website pada saat itu umumnya dibuat menggunakan bahasa pemograman PERL yang pemrosesannya hanya bisa dilakukan di sisi web server.
Pada tahun 1995, Brendan Eich seorang programmer dari Netscape mulai mengembangkan sebuah bahasa pemograman script yang dinamakan Mocha. Netscape pada saat itu merupakan perusahaan software ternama yang memiliki web broser Netscape Navigator.
Pada saat bahasa pemograman tersebut akan dirilis, Netscape mengadakan kerjasama dengan Sun Microsystems untuk mengembangkan LiveScript, dan tepat ketika Netscape Navigator 2 dirilis, Netscape merubah nama LiveScript menjadi JavaScript dengan tujuan bahasa baru ini akan populer seperti bahasa Java yang saat itu sedang booming di kalangan programmer. Versi JavaScript ini dinamakan dengan JavaScript 1.0.

#just info

Freebies adalah semacam penarik perhatian bagi para pengunjung. Kita semua suka gratisan kan? Umumnya freebies berisi template atau aplikasi tertentu yang bisa didownload gratis. Membuat freebies memerlukan ketrampilan teknis. Namun ada juga yang memberikan freebies dalam bentuk kupon diskon, voucher atau sample produk. Blog menjadi sangat “berwarna” dengan adanya freebies ini.Dan kali ini kita akan ngeshare freebies berformat PSD yup untuk belajar-belajar desain juga bisa freebies ini CJT dapatkan disini sebagai refrensi aja bro,tapi terkadang juga kita buat freebies sendiri juga sama berformat PSD kapan-kapan kita share

Download Freebies

Halo guys!,kali ini CJT akan ngeshare kumpulan beberapa plugin Photoshop untuk design grafis dan pengolahan desain web untuk mempermudah pekerjaanmu dan biasanya plugin ini digunakan para web designer jadi untuk yang ingin belajar frontend kurang jos bila mana tidak pakai plugin ini :), oke  berikut ini adalah daftar Pluginnya guys! monggo dicicip

Bingung netuin warna dan font yang pas yang cocok bagi web kalian?,design logo kalian? atau apalah hahaha sekarang gak usah bingung bray ada Paletteb  sebuah aplikasi untuk membuat/menetukan "Skema Warna" yup ekstensi ini bagus banget dan cocok untuk kalian ekstensi ini tersedia di Google Chrome yang menghasilkan palet baru (dengan pilihan font juga!) setiap kali kalian mengklik untuk membuka tab baru.
Gimana masih penasaran? pengen nyoba nih bray install ekstensinya disini
Oke just info aje bro gak usah panjang kali lebar kayak matematika aja (LOL)
selamat mencoba :*

Wah lama gak ngeshare trik blog nih hahahaha,udah pada banyak yang kangen ya? sama trik blog kita?.
sok atuh kali ini kita akan bahas "Modifikasi Placeholder dengan CSS3". yap placeholder tuh kayak gini lah lebih jelasnya
Oke langsung aje ya gak pakai lama kita share triknya  1.Siapkan Kopi dan Martabak (LOL) 2.Siapkan rich editor kalian,entah itu sublime,notepad++,brackets sama aja lah :D 3. Copas coding ini: /*------------------------------------*\ MAIN \*------------------------------------*/ /* GO! */ body { font: 14px/20px Arial; background: #ccc; padding: 50px; width: 600px; margin: 0 auto; } h1,h2,h3,h4,h5,h6 { font-size: 16px; font-weight: bold; margin: 20px 0 5px; } p { margin: 0 0 10px; } a { color: teal; } a:hover { color: black; } input { padding: 10px 15px; border: 1px solid #666; -webkit-appearance: none } .searchlabel { font-size: 15px; font-family: Georgia; font-style: italic; color: #666; cursor: text; margin: -31px 0 0 15px; position: absolute; display: block; } .place:focus + .searchlabel { margin-top: -70px; } .place:hover + .searchlabel { opacity: 0.5; } .place:focus + .searchlabel { opacity: 1; cursor: auto; } .searchlabel::after { content: 'Enter Text To Search'; } .place:hover + .searchlabel::after { content: 'Click to Remove This'; } .place:focus + .searchlabel::after { content: 'Press Enter To Submit'; } .searchlabel { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } <div style="text-align: center;"> </div> }</span></pre> </center> 4.Ketik coding HTML ini <body id="home"> <input class="place" type="search" id="search" size="50">
<label class="searchlabel" for="search"></label>
jangan lupa includekan CSS yang tadi 
'

selamat mencoba ^^

Hello kawan-kawan lama tidak ketemu nih,bagaimana kabarnya?.maaf kita banyak urusan proyek-proyek kali ini kang dighca akan share trik desain CSS3,udah tahu apa itu css3?CSS 3 adalah versi CSS terbaru yang masih dikembangkan oleh W3C. Namun beberapa web browser sudah mendukung CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan, hanya ada beberapa penambahan, sehingga ketika bermigrasi dari CSS 2 ke CSS 3, tidak perlu mengubah apapun

• Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight
• Beberapa efek teks, seperti teks berbayang, kolom koran, dan "word-wrap".
• Jenis huruf eksternal, sehingga dapat menggunakan huruf yang tidak termasuk "web-safe fonts".
• Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 3 dimensi, sudut-sudut yang tumpul dan bayangan. (sumber)

 Banyak yang tanya bagaimana cara membuat sebuah desain TYPOGRAPHY yang biasanya ada di ilustrator dan photoshop,kini kalian bisa membuatnya di sublime atau notepad++,kali ini yang kang dighca share yang simple dulu aja ya bukan animasi hanya permainan font dan text shadow :3.yuk mari let's make!
sebagai contoh kita buat long shadow typoflat yang begini penampakannya...
1.Copas Script
body { background: #ffe402; } #cloud { width: 350px; height: 120px; background: #f2f9fe; background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%); background: -webkit-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%); background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%); background: -ms-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%); background: -o-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; position: relative; margin: 120px auto 20px; } #cloud:after, #cloud:before { content: ''; position: absolute; background: #f2f9fe; z-index: -1 } #cloud:after { width: 100px; height: 100px; top: -50px; left: 50px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; } #cloud:before { width: 180px; height: 180px; top: -90px; right: 50px; border-radius: 200px; -webkit-border-radius: 200px; -moz-border-radius: 200px; } .shadow { width: 350px; position: absolute; bottom: -10px; background: #000; z-index: -1; box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4); border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } .container { padding: 50px; background: rgb(34,45,58); /* dark grey */ } .typoflat { font-family: "Bonbon Regular"; font-weight: bold; color: #fff; background-color: rgb(22, 160, 133); height: 150px; width: auto; font-size: 75px; line-height: 150px; text-align: center; display: block; overflow: hidden; text-shadow: rgb(219, 196, 2) 1px 1px, rgb(219, 196, 2) 2px 2px, rgb(219, 196, 2) 3px 3px, rgb(219, 196, 2) 4px 4px, rgb(219, 196, 2) 5px 5px, rgb(219, 196, 2) 6px 6px, rgb(219, 196, 2) 7px 7px, rgb(220, 197, 2) 8px 8px, rgb(220, 197, 2) 9px 9px, rgb(220, 197, 2) 10px 10px, rgb(221, 198, 2) 11px 11px, rgb(221, 198, 2) 12px 12px, rgb(221, 198, 2) 13px 13px, rgb(222, 198, 2) 14px 14px, rgb(222, 199, 2) 15px 15px, rgb(222, 199, 2) 16px 16px, rgb(223, 199, 2) 17px 17px, rgb(223, 200, 2) 18px 18px, rgb(223, 200, 2) 19px 19px, rgb(224, 200, 2) 20px 20px, rgb(224, 200, 2) 21px 21px, rgb(224, 201, 2) 22px 22px, rgb(225, 201, 2) 23px 23px, rgb(225, 201, 2) 24px 24px, rgb(225, 202, 2) 25px 25px, rgb(226, 202, 2) 26px 26px, rgb(226, 202, 2) 27px 27px, rgb(226, 202, 2) 28px 28px, rgb(227, 203, 2) 29px 29px, rgb(227, 203, 2) 30px 30px, rgb(227, 203, 2) 31px 31px, rgb(228, 204, 2) 32px 32px, rgb(228, 204, 2) 33px 33px, rgb(228, 204, 2) 34px 34px, rgb(228, 204, 2) 35px 35px, rgb(229, 205, 2) 36px 36px, rgb(229, 205, 2) 37px 37px, rgb(229, 205, 2) 38px 38px, rgb(230, 206, 2) 39px 39px, rgb(230, 206, 2) 40px 40px, rgb(230, 206, 2) 41px 41px, rgb(231, 206, 2) 42px 42px, rgb(231, 207, 2) 43px 43px, rgb(231, 207, 2) 44px 44px, rgb(232, 207, 2) 45px 45px, rgb(232, 208, 2) 46px 46px, rgb(232, 208, 2) 47px 47px, rgb(233, 208, 2) 48px 48px, rgb(233, 208, 2) 49px 49px, rgb(233, 209, 2) 50px 50px, rgb(234, 209, 2) 51px 51px, rgb(234, 209, 2) 52px 52px, rgb(234, 210, 2) 53px 53px, rgb(235, 210, 2) 54px 54px, rgb(235, 210, 2) 55px 55px, rgb(235, 210, 2) 56px 56px, rgb(236, 211, 2) 57px 57px, rgb(236, 211, 2) 58px 58px, rgb(236, 211, 2) 59px 59px, rgb(237, 212, 2) 60px 60px, rgb(237, 212, 2) 61px 61px, rgb(237, 212, 2) 62px 62px, rgb(237, 212, 2) 63px 63px, rgb(238, 213, 2) 64px 64px, rgb(238, 213, 2) 65px 65px, rgb(238, 213, 2) 66px 66px, rgb(239, 214, 2) 67px 67px, rgb(239, 214, 2) 68px 68px, rgb(239, 214, 2) 69px 69px, rgb(240, 214, 2) 70px 70px, rgb(240, 215, 2) 71px 71px, rgb(240, 215, 2) 72px 72px, rgb(241, 215, 2) 73px 73px, rgb(241, 216, 2) 74px 74px, rgb(241, 216, 2) 75px 75px, rgb(242, 216, 2) 76px 76px, rgb(242, 216, 2) 77px 77px, rgb(242, 217, 2) 78px 78px, rgb(243, 217, 2) 79px 79px, rgb(243, 217, 2) 80px 80px, rgb(243, 218, 2) 81px 81px, rgb(244, 218, 2) 82px 82px, rgb(244, 218, 2) 83px 83px, rgb(244, 218, 2) 84px 84px, rgb(245, 219, 2) 85px 85px, rgb(245, 219, 2) 86px 86px, rgb(245, 219, 2) 87px 87px, rgb(246, 220, 2) 88px 88px, rgb(246, 220, 2) 89px 89px, rgb(246, 220, 2) 90px 90px, rgb(246, 220, 2) 91px 91px, rgb(247, 221, 2) 92px 92px, rgb(247, 221, 2) 93px 93px, rgb(247, 221, 2) 94px 94px, rgb(248, 222, 2) 95px 95px, rgb(248, 222, 2) 96px 96px, rgb(248, 222, 2) 97px 97px, rgb(249, 222, 2) 98px 98px, rgb(249, 223, 2) 99px 99px, rgb(249, 223, 2) 100px 100px, rgb(250, 223, 2) 101px 101px, rgb(250, 224, 2) 102px 102px, rgb(250, 224, 2) 103px 103px, rgb(251, 224, 2) 104px 104px, rgb(251, 224, 2) 105px 105px, rgb(251, 225, 2) 106px 106px, rgb(252, 225, 2) 107px 107px, rgb(252, 225, 2) 108px 108px, rgb(252, 226, 2) 109px 109px, rgb(253, 226, 2) 110px 110px, rgb(253, 226, 2) 111px 111px, rgb(253, 226, 2) 112px 112px, rgb(254, 227, 2) 113px 113px, rgb(254, 227, 2) 114px 114px, rgb(254, 227, 2) 115px 115px, rgb(255, 228, 2) 116px 116px; background-color: rgb(255, 228, 2); height: 100%; width: 100%; font-size: 75px; text-align: center; } }}
2.Ketik HTMLnya
<div id = "cloud"><span class='shadow'></span></div><br><br>
<div class="typoflat">#DesainNewbie</div>
</div>

Udah beres,monggo diredisain :D
#SALAM CJT!

Halo bertemu lagi dengan saya kang dighca gimana kabarnya?.Banyak yang mengkontak saya lewat hp,fb,email,mereka kebanyakan berkata ingin belajar html5 ok kini saya akan mengajak kalian untuk belajar HTML5 tapi yang sederhana aja dulu untuk permulaan.Method yang kita gunakan adalah yaitu: rect().rect() disini adalah Rectangle ya hanya disingkat,yap kita memang akan membuat Sebuah persegi dengan menggunakan HTML 5 . kanvas persegi panjang dalam HTML 5 ini sendiri diposisikan oleh Parameter:
Parameter topLeftCornerX dan topLeftCornerY, <<. ukurannya dengan parameter width(lebar) dan height(tinggi).

Berikut susunan Method baru yang akan kita gunakan:
c.rect(topLeftCornerX,topLeftCornerY,width,height);


Dan berikut Script untuk membuatnya:
  <script> function drawRectangle() { var canvas=document.getElementById("myCanvas"); var c=canvas.getContext("2d"); var topLeftCornerX = 188; var topLeftCornerY = 50; var width = 200; var height = 100; c.rect(topLeftCornerX,topLeftCornerY,width,height); c.fillStyle="#a1a1a1"; c.fill(); c.lineWidth=5; c.strokeStyle="black"; c.stroke(); } </script> <body onload="drawRectangle()"> <canvas height="200" id="myCanvas" width="578"></canvas> </body>
Penjabaran keterangan:
var topLeftCornerX = 188; //ukuran sumbu X
var topLeftCornerY = 50; // ukuran sumbu Y
var width = 200; // ukuran lebar
var height = 100; // ukuran tinggi
c.rect(topLeftCornerX,topLeftCornerY,width,height); << Method kita gunakan 

c.fillStyle="#a1a1a1"; // kode warna
c.fill();
c.lineWidth=5; //lebar garis
c.strokeStyle="black"; //warna garis luar
c.stroke(); 

Hasil Screenshot:


Untuk mempraktekkannya, pakai notepad atau notepad ++ bisa juga dengan sublime silakan mencoba :)

Kalian pasti udah biasa liat efek salju,bintang,daun dan lain-lain turun diblog  agan atau orang lain.yap?,dan kali ini ane kang dighca akan mengeshare trik keren sangat cool bray hehehe yaitu seperti gambar dibawah ini.keren kan?,hujan turun di blog ente dan ini cukup realistis bro efeknya pokoknya joss.ente mau?

Pengen?, nih

Oke Just Info Guys :)

Hallo lama gak ngepost nih CJT,apalagi trik blog hehehe,untuk itu kali ini kita akan ngeshare dan kalian juga bisa belajar CSS3.Kalian terkadang buat sebuah karya pakai flash,photoshop,ilustrator dan lain-lain,kali ini udah gak jaman bro sekarang pakai CSS3.udah langsung aja ya
nih codingnya:
HTML
<div class="pug"> <div class="head"> </div> <div class="left-ear"> </div> <div class="right-ear"> </div> <div class="left-wrinkles"> </div> <div class="right-wrinkles"> </div> <div class="right-eye"> <div class="right-eye-ball"> </div> </div> <div class="left-eye"> <div class="left-eye-ball"> </div> </div> <div class="mouth"> </div> <div class="left-mouth"> </div> <div class="right-mouth"> </div> <div class="bottom-mouth"> </div> <div class="nose"> </div> </div>
CSS3
body{ } div{ position:absolute; } div:after, div:before{ position:absolute; content:""; } .pug{ width:550px; height:425px; margin: auto; overflow: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .head{ width:330px; height:340px; left:110px; top:5px; background:#efdec2; border-top-left-radius:150px; border-top-right-radius:150px; border-bottom-left-radius:75px; border-bottom-right-radius:75px; -webkit-box-shadow:inset 3px -3px 30px rgba(0,0,0,0.45); box-shadow:inset 3px -3px 30px rgba(0,0,0,0.45); } .left-ear{ width:150px; height:205px; top:10px; left:40px; background:#17262b; border-top-left-radius:55px; border-top-right-radius:25px; border-bottom-left-radius:15px; -webkit-transform: skew(0,-5deg); transform: skew(0,-5deg); -webkit-box-shadow:inset 13px 13px 50px rgba(0,0,0,0.75); box-shadow:inset 13px 13px 50px rgba(0,0,0,0.75); } .left-ear:before{ display:none; width:35px; height:50px; bottom:-10px; left:38px; background:#fff; border-radius:15px; } .left-ear:after{ width:200px; height:235px; top:15px; left:75px; background:#efdec2; border-radius:50px; -webkit-transform: rotate( 30deg ); transform: rotate( 30deg ); -webkit-box-shadow:inset 6px -5px 20px rgba(0,0,0,0.25); box-shadow:inset 6px -5px 20px rgba(0,0,0,0.25); } .right-ear{ width:150px; height:200px; top:10px; right:40px; background:#17262b; border-top-right-radius:55px; border-top-left-radius:25px; border-bottom-right-radius:15px; -webkit-transform: skew(0,5deg); transform: skew(0,5deg); -webkit-box-shadow:inset -13px 13px 50px rgba(0,0,0,0.75); box-shadow:inset -13px 13px 50px rgba(0,0,0,0.75); } .right-ear:after{ width:200px; height:235px; top:15px; right:75px; background:#efdec2; border-radius:50px; -webkit-transform: rotate( -30deg ); transform: rotate( -30deg ); } .left-eye{ width:140px; height:175px; top:90px; left:110px; background:#efdec2; border-radius:75px; border-top-right-radius:25px; -webkit-box-shadow:-1px 3px 3px rgba(0,0,0,0.25),1px -3px 3px rgba(0,0,0,0.25), inset 3px -3px 20px rgba(0,0,0,0.25); box-shadow:-1px 3px 3px rgba(0,0,0,0.25),1px -3px 3px rgba(0,0,0,0.25), inset 3px -3px 20px rgba(0,0,0,0.25); -webkit-transform: rotate( -20deg ); transform: rotate( -20deg ); } .left-eye:before{ width:100px; height:125px; left:20px; top:15px; background:#17262b; border-top-left-radius:50px; border-top-right-radius:25px; border-bottom-left-radius:25px; -webkit-box-shadow:inset -3px 1px 7px rgba(0,0,0,0.95); box-shadow:inset -3px 1px 7px rgba(0,0,0,0.95); } .left-eye-ball{ width:70px; height:70px; left:35px; top:35px; border-radius:50%; background:#674833; -webkit-box-shadow:inset -1px 2px 12px rgba(0,0,0,0.95); box-shadow:inset -1px 2px 12px rgba(0,0,0,0.95); } .left-eye-ball:before{ width:40px; height:40px; top:15px; left:15px; background:#000; border-radius:50%; } .left-eye-ball:after{ width:20px; height:20px; top:5px; left:20px; border-radius:50%; background:rgba(255,255,255,0.75); } .right-eye{ width:140px; height:175px; top:90px; right:110px; background:#efdec2; border-radius:75px; border-top-left-radius:25px; -webkit-box-shadow:-1px 3px 3px rgba(0,0,0,0.25),1px -3px 3px rgba(0,0,0,0.25), inset 3px -3px 20px rgba(0,0,0,0.25); box-shadow:-1px 3px 3px rgba(0,0,0,0.25),1px -3px 3px rgba(0,0,0,0.25), inset 3px -3px 20px rgba(0,0,0,0.25); -webkit-transform: rotate( 20deg ); -moz--transform: rotate( 20deg ); transform: rotate( 20deg ); } .right-eye:before{ width:100px; height:125px; left:20px; top:15px; background:#17262b; border-top-right-radius:50px; border-top-left-radius:25px; border-bottom-right-radius:25px; -webkit-box-shadow:inset -3px 1px 7px rgba(0,0,0,0.95); box-shadow:inset -3px 1px 7px rgba(0,0,0,0.95); } .right-eye-ball{ width:70px; height:70px; left:35px; top:35px; border-radius:50%; background:#674833; -webkit-box-shadow:inset -1px 2px 12px rgba(0,0,0,0.95); box-shadow:inset -1px 2px 12px rgba(0,0,0,0.95); } .right-eye-ball:before{ width:40px; height:40px; top:15px; left:15px; background:#000; border-radius:50%; } .right-eye-ball:after{ width:20px; height:20px; top:10px; left:10px; border-radius:50%; background:rgba(255,255,255,0.75); } .mouth{ width:215px; height:215px; top:150px; left:167px; background:#d4bea9; border-radius:40%; border-bottom-left-radius:50%; background: -webkit-radial-gradient(left bottom, #17262b 70%,#efdec2 86%); background: -moz-radial-gradient(left bottom, #17262b 70%,#efdec2 86%); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .left-mouth{ width:130px; height:180px; bottom:60px; left:143px; background:#17262b; border-top-left-radius:200px; border-bottom-left-radius:50px; -webkit-box-shadow:-3px -2px 5px rgba(0,0,0,0.95), inset 6px -6px 45px rgba(0,0,0,0.95); box-shadow:-3px -2px 5px rgba(0,0,0,0.95), inset 6px -6px 45px rgba(0,0,0,0.95); } .right-mouth{ width:130px; height:180px; right:143px; bottom:60px; background:#d4bea9; border-top-right-radius:200px; border-bottom-right-radius:50px; -webkit-box-shadow:-3px -2px 5px rgba(0,0,0,0.95), inset 6px -6px 45px rgba(0,0,0,0.95); box-shadow:-3px -2px 5px rgba(0,0,0,0.95), inset 6px -6px 45px rgba(0,0,0,0.95); background:#17262b; } .bottom-mouth{ width:100px; height:100px; background:#d4bea9; border-radius:50%; border-bottom-left-radius:15px; border-bottom-right-radius:15px; bottom:52px; left:225px; -webkit-box-shadow:inset -1px 3px 15px rgba(0,0,0,0.95), inset -6px -6px 45px rgba(0,0,0,0.95); box-shadow:inset -1px 3px 15px rgba(0,0,0,0.95), inset -6px -6px 45px rgba(0,0,0,0.95); background:#151e25; z-index:1; } .nose{ width:70px; height:70px; top:170px; left:240px; background:#0e1419; border-radius:50%; border-top-left-radius:15px; border-bottom-right-radius:15px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .left-wrinkles{ width:120px; height:130px; top:60px; left:135px; border-radius:30%; -moz-border-radius:30%; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); transform: rotate(-20deg); -webkit-box-shadow:3px -1px 5px rgba(0,0,0,0.45); -moz-box-shadow:3px -1px 5px rgba(0,0,0,0.45); box-shadow:3px -1px 5px rgba(0,0,0,0.45); } .right-wrinkles{ width:130px; height:130px; top:60px; right:135px; border-radius:30%; -moz-border-radius:30%; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -webkit-box-shadow:-3px -1px 5px rgba(0,0,0,0.45); -moz-box-shadow:-3px -1px 5px rgba(0,0,0,0.45); box-shadow:-3px -1px 5px rgba(0,0,0,0.45); }

1.Login BLOG
2.Pergi Ke TATA LETAK
3.COPAS Coding Script di atas
4.Look Demo

Oke just info selamat mencoba ^^

Bosen Background dengan gambar-gambar aja?,pengen ganti?.pakek CSS3 Gradient Background?,Mau?
Emang keren coy,apalagi dengan desain yang keren-keren pastinya hehehe mau?
Langsung aja pilih hehehe nih. gak pakek lama kok,ente juga gak perlu ngecoding lama-lama dan panjang



Oke just info bye.selamat mencoba ^^

Hoy Hoy,ketemu lagi nih dengan kami,gimana kabar kalian?,semoga baik ya amin.oke guys kalian terkadang capek ngecoding buat background yang ada efek gradientnya,tapi kali ini kita akan ngeshare generator buat Gradient Background,So jadi sekarang kalian gampang kagak pakek ngetik coding sampai ke bawah untuk buat background tersebut hehehe.

Hello Guys,lama gak jumpa hehehe kali ini kita,akan ngeSHARE trik blog keren nih bro dari judulnya aja kalian bisa belajar CSS3,kali ini kita akan belajar cara membuat DOODLE,tahukan doodle?,yap sebuah Google Doodle adalah logo-logo Google yang dimodifikasi sedemikian rupa yang ditampilkan pada saat ada peringatan atau event tertentu pada setiap negara yang support Google. Sudah sejak cukup lama koleksi google doodle yang dimiliki Google sendiri mulai diadakan.dan kali ini kita coba buat dengan CSS3 tak perlu JS (Javascript) dan JQUERY.Oke langsung aja copas coding dibawah dan hasilnya seperti ini

HTML:
<div class="doodle"> <input type="checkbox" id="play" name="play"/> <label for="play"> <img src="http://www.google.com/logos/2012/muybridge12-hp-p.jpg" alt="Play" /> </label> <div class="animate"> <div class="g"> </div> <div class="g"> </div> <div> </div> <div> </div> <div> </div> <div class="l"> </div> <div> </div> <div class="g"> </div> <div class="g"> </div> <div class="o"> </div> <div class="o play"> </div> <div class="g"> </div> <div class="l"> </div> <div class="e"> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div class="g"> </div> <div> </div> <div> </div> </div> </div>
CSS3:
body { font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif; font-size: 13px; } .doodle { width: 469px; height: 162px; margin: 40px auto; position: relative; } .animate div { width: 67px; height: 54px; float: left; position: relative; } .doodle .animate { position: relative; width: 100%; height: 100%; background: url(http://www.google.com/logos/2012/muybridge12-hp-f.jpg); } .doodle input:checked ~ .animate { /* We will set a delay so that the rewind effect can occur */ -webkit-animation: horse-ride .5s steps(12, end) infinite 5s; -moz-animation: horse-ride .5s steps(12, end) infinite 5s; animation: horse-ride .5s steps(12, end) infinite 5s; /* Imitating the Rewind effect before real animation starts */ background-position: -2412px 0; -webkit-transition: all 5s cubic-bezier(0.550, 0.055, 0.675, 0.190); -moz-transition: all 5s cubic-bezier(0.550, 0.055, 0.675, 0.190); transition: all 5s cubic-bezier(0.550, 0.055, 0.675, 0.190); } .animate div:after { content: ''; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 2; border-right: 2px solid #fff; border-bottom: 2px solid #fff; background: rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2); -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2); box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2); } .doodle div.g:after { background: rgba(53, 97, 182, 0.5); } .doodle div.o:after, .doodle div.e:after { background: rgba(230, 43, 36, 0.5); } /* :nth-last-of-type(1) or :last-of-type not working with ::after */ .doodle div.o.play:after { background: rgba(227, 230, 36, 0.6); pointer-events: none; } .doodle div.l:after { background: rgba(85, 151, 78, 0.6); } /* player */ .doodle label { cursor: pointer; display: inline-block; width: 68px; height: 55px; z-index: 2; position: absolute; top: 55px; left: 200px; } .doodle label:after { content: ''; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 2; background: rgba(227, 230, 36, 0); } .doodle input { display: none; } .doodle input:checked + label { overflow: hidden; } .doodle input:checked + label img { margin-left: -68px; -webkit-transition: margin 1s ease-in; } .doodle input:unchecked + label img { margin-left: 0; } @-webkit-keyframes horse-ride { 0% { background-position: 0 0; } 100% { background-position: -804px 0; } } @-moz-keyframes horse-ride { 0% { background-position: 0 0; } 100% { background-position: -804px 0; } } @keyframes horse-ride { 0% { background-position: 0 0; } 100% { background-position: -804px 0; } }

Oke Thanks for Visit selamat mencoba ^^

Tentu saja dengan ada nya efek keyboard seperti ini membuat suatu blog akan menjadi lebih menarik dan profesional apalagi untuk blog yang menyediakan game guides penampakan keyboard nya seperti ini
jika sahabat tertarik tinggal dipasang aja ;)
berikut langkah-langkah nya

1.masuk blogger
2.Template -> Edit HTML
3.masukan kode berikut tepat diatas ]]></b:skin> atau </style>

/*****************************************
Keyboard Style  CSS
******************************************/
kbd{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

 4.simpan template

sekarang untuk penulisan nya gunakan tag <kbd>
contoh nya seperti ini

<kbd>Masukan teks anda di sini</kbd>

sekian dulu.. semoga bermanfaat..
see u again ;)

<data:blogTeamBlogMessage/>

.thanks {
font-family:Arial, sans-serif;
font-size:12px;
right:360px;
margin-top:-58px;
padding:6px 12px;
background:#f8f8f8;color:#999;
border:1px solid #c9cacb;
border-radius:3px;
position:absolute;
}

Berikut ini adalah salah satu template yang belum jadi bukan fail kawan.aslinya mau kita pakai template ini,cuma kurang pas untuk pengguna awam bray,takutnya gak suka juga,template ini terinspirasi oleh desain Flat Metro UI.tapi kita lebih perfectkan,template satu ini dibandingkan yang laen lebih keren tampilannya karna menggunakan coding HTML5 dan CSS3 sehingga terlihat seperti flash padahal bukan.Oh iya satu lagi ini gak pakai namanya frame,table,javascript maupun jquery loh bray,pokoknya keren deh,kemudian dari fasilitas juga ada penambahan musik online dan efek foto yang AMAZING bro!,tapi sayangnya template ini mungkin tidak kepakai kenapa?,karna kang digcha telah membuat template baru diamond of heaven dan itu sekarang hampir 90% jadi bro,apa kang dighca mau menjual template ini,ketimbang juga ngaggur bray?, kalian mau?,tunggu aja kepastiannya,komen dan kritik ya dari tampilan template satu ini yang telah dibuat kang dighca "MetrOnimox Template" :D

Hallo frend'z,lama gak jumpa dengan gue nih kang dighca,ada yang kangen gak? LOL!,hahaha.kali ini gue akan ngeshare cara buat menu unik buatan gue :p :D.menu buatan gue,enaknya gue namain hmmm...,ahay menu buatan gue namain Shark Blue Menu,gimana keren gak?,seperti yang buat :D.kurang puas dengan screenshotnya?,pengen lihat demonya?,so' atuh gan, :) DEMO.gimana keren kan?.pengen ente pasang? diblog ente.okay silakan sob,gratis kok :)

Oke,seperti biasanya.
1.login blog ente
2.kemudian,ke tata letak
3.pilih tambah gadget pada bagian header
4.pilih HTML/Javascript
5.Terakhir copas coding CSS berserta HTMLnya
CSS
<style> #menucss{width:140px;height:140px;border-radius:110px;border:5px solid #60b5ff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmx_sMBVMbB6wTjtIEZIyc7nsb4xvfalQNsW9HBXXi5U-5e5cJYSyCovvi8W6bVQknVl9CDZcgN1bxv9-f_hhVIl2D8zcOl5hSZgbTYblI10qGbt52ChtYfgKfBs7BpC2iInvluU-l0Z0/s200/SharkDighca.gif)no-repeat center;box-shadow:0px 0px 20px #60b5ff; -moz-transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;float:right;margin-right:-20px;margin-top:245px;} #menucss:hover{-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); opacity:0;} #casing{width:440px;height:100px;border-bottom-right-radius:100px;border-right:10px solid #60b5ff;border-left:5px solid #60b5ff;background:#403d3d;box-shadow:0px 0px 20px #60b5ff; -moz-transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;float:right;margin-top:270px;overflow:hidden;font-size:14px;color:#fff;font-family: 'Lily Script One', cursive;} #d-tab{background:#fff; float: left; margin-left:0px; width: 55px; height: 55px; border-top: 5px solid #60b5ff; border-right: 5px solid #000; border-bottom: 5px solid #60b5ff; border-left: 5px solid #000; margin-top:5px; padding: 3px; border-radius:60px; -moz-transition: all 750ms ease-in-out; -webkit-transition: 750ms 1s ease-in-out; -o-transition: all 750ms ease-in-out; -ms-transition: all 750ms ease-in-out; transition: all 750ms ease-in-out;overflow:hidden;} #d-tab img{height:60px;width:60px;margin-left:-5px;margin-top:-5px;} #d-tab:hover{ width:60px; -moz-transition: all 850ms ease-in-out; -webkit-transition: 850ms 1s ease-in-out; -o-transition: all 850ms ease-in-out; -ms-transition: all 850ms ease-in-out; transition: all 850ms ease-in-out;} </style>
oh iya jangan lupa ente edit dulu yak,urlnya
<div id="casing"> <ul> <div id="d-tab"> <br /> <table><tbody> <tr><td><span style="font-family: 'Iceland';"><a href="https://www.cyberjellyfishteam.tk/" target="_blank" title="home"><marquee align="center" direction="left" height="200" scrollamount="2" width="100%"> <strong>Home</strong></marquee> </a> </span></td><td></td></tr> </tbody><tbody> <tr><td><span style="font-family: 'Iceland;">Home</span></td></tr> </tbody></table> </div> </ul> <ul> <div id="d-tab"> <br /> <table><tbody> <tr><td><span style="font-family: 'Iceland';"><a href="https://www.cyberjellyfishteam.tk/" target="_blank" title="profile"><marquee align="center" direction="left" height="200" scrollamount="2" width="100%"> <strong>Profil</strong></marquee> </a> </span></td><td></td></tr> </tbody><tbody> <tr><td><span style="font-family: 'Iceland;">Profil</span></td></tr> </tbody></table> </div> </ul> <ul> <div id="d-tab"> <br /> <table><tbody> <tr><td><span style="font-family: 'Iceland';"><a href="https://www.cyberjellyfishteam.tk/" target="_blank" title="kontak"><marquee align="center" direction="left" height="200" scrollamount="2" width="100%"> <strong>Kontak</strong></marquee> </a> </span></td><td></td></tr> </tbody><tbody> <tr><td><span style="font-family: 'Iceland;">Kontak</span></td></tr> </tbody></table> </div> </ul> <ul> <div id="d-tab"> <br /> <table><tbody> <tr><td><span style="font-family: 'Iceland';"><a href="https://www.cyberjellyfishteam.tk/" target="_blank" title="other"><marquee align="center" direction="left" height="200" scrollamount="2" width="100%"> <strong>Isi Sendiri...</strong></marquee> </a> </span></td><td></td></tr> </tbody><tbody> <tr><td><span style="font-family: 'Iceland;">Other</span></td></tr> </tbody></table> </div> </ul> <b><span style="font-family: Trebuchet MS, sans-serif; font-size: xx-small;">.::<a href="http://cyberjellyfishteam.blogspot.com/">Get Widget</a>::.</span></b><br /> <div id="menucss"> </div> </div> <div id="menucss"> </div> <br />

Oke Sekian dulu ya frend'z tunggu trik blog yang laen bye :)

Hello,para blogger apa kabar?,kali ini kita akan ngeshare trik unik nih,yaitu merubah template dinamis hanya dalam 5 Detik.
Bagaimana jika tampilan blog frend ketika memakai template DINAMIS / template pilihan dari Blogger? saatnya agan mencoba melihat tampilan blog sendiri tanpa harus mengganti template...!! Bagaimana bisa? dan bagaimana caranya? Gampang Banget tinggal masukkan Alamat blog agan disini :

Dalam 5 detik blog/website ente akan berubah menjadi template DINAMIS.tapi jangan kuatir ini hanya template ilusi LOL,jadi template yang asli ente pakai gak bakal hilang kok :D
ScreenShot:

Oke sekian dulu ya bye