Selection Good Resources March 2015

Pemilik yusugomori.com sudah membuat sebuah project yang diberi nama CSS SANS Font Kit. Deretan alphabet ditampilkan dengan menggunakan properties CSS! Sobat bisa datang untuk download dan mempelajari sendiri di alamat yusugomori.com/projects/css-sans/fonts AA Koben juga dapatkan satu tools generator fonts dengan nama localFont. Generator local storage yang mendukung 3 jenis format font .woff, .woff2 or .ttf agar kita bisa menghemat waktu ;)) Check and get in here jaicab.com/localFont
Untuk mempelajari bagaimana font agar responsive you can read it madebymike.com.au/writing/precise-control-responsive-typography Sebagai bonus informasi dari dunia seputar huruf (fonts) gue beri graphicdesignjunction.com/2015/03/new-text-effects-tutorials-2015 & www.designzzz.com/50-hd-quotes-and-typography-wallpapers

Apakah dari kalian ingin membuat tampilan design dengan gaya full stylish? Tidak lain kalian harus memiliki material design yg mumpuni. Paman kita google sudah membuatkan itu semua www.google.com/design/spec/material-design/introduction.html Kalau susah sobat bisa langsung sikat karya basic material-design google by Daemonite on github github.com/daemonite/material.

This is selection resources from codepen and cssdeck!

codepen.io/iign/pen/GgdbXx - codepen.io/team/webflow/pen/pvydKd - codepen.io/jcoulterdesign/pen/GgGrQO - codepen.io/davidicus/pen/ZYjoVO - codepen.io/ashmind/pen/ogMPQp - codepen.io/JTParrett/pen/fnCKE - codepen.io/fbrz/pen/Guysm - codepen.io/mfritsch/pen/dPqjdy - codepen.io/Himateja/pen/wBYJdm - codepen.io/lakotuts/pen/gbdjzL - codepen.io/TimRuby/pen/ykKEf - codepen.io/jbeason/pen/Wbaedb - codepen.io/alanizdesign/pen/gbBORP - codepen.io/vavik96/pen/gbBbpR - codepen.io/claarman/pen/gbBXyL - codepen.io/kenny-hibino/pen/MYPVqV - codepen.io/mostlymatthew/pen/bNmgbE - codepen.io/sturobson/pen/Wbazbw - codepen.io/MichaelArestad/pen/ohLIa - codepen.io/enxaneta/pen/zxJwap - codepen.io/iPawan/pen/zxmapZ - codepen.io/xaddict/pen/OPBEdK - codepen.io/kyleledbetter/pen/gbQOaV - codepen.io/XavaSoft/pen/OPayeb - codepen.io/balapa/pen/gbQbXR

codepen.io/chriswrightdesign/pen/GwfEq - codepen.io/lbebber/pen/XJRdrV - codepen.io/TimGThomas/pen/VYENyK - codepen.io/ge1doot/pen/EaOxvR - codepen.io/jaysalvat/pen/OPBZrZ - codepen.io/vasim/pen/VYERpN - codepen.io/toolmantim/pen/xbQRaL - codepen.io/ronniechong/pen/LEXWVw - codepen.io/waynedunkley/pen/bNQoXb - codepen.io/mattiabericchia/pen/xbQjew - codepen.io/donovanh/pen/QwzWrK - codepen.io/SachaG/pen/HKnkG - codepen.io/torbencolding/pen/VYqpEe - codepen.io/jonnymclaughlin/pen/qEyYwp - codepen.io/vineethtr/pen/EaGbxW - codepen.io/chrisdothtml/pen/azPYqq - codepen.io/that-beanbag/pen/xbmXQg - codepen.io/claarman/pen/bNOLNv - codepen.io/zapplebee/pen/bNORWG - codepen.io/pixelass/pen/zxaeVy - codepen.io/webcre8/pen/LEqOQQ - cssdeck.com/labs/direction-aware-hover-effect - cssdeck.com/labs/stack-of-cards - cssdeck.com/labs/esbtmdeg - cssdeck.com/labs/tgfbfe6x - cssdeck.com/labs/2jcy8mhl

See you :-h

Make Inline Quote Tweet use jQuery for Blogger

Tidak bisa dipungkiri keberadaan web jejaring sosial saat ini meraja-lela dalam menyebarkan berita-berita. Kecepatan kebutuhan manusia sekarang akan update berita sudah melebihi dari perkiraan. Twitter adalah salah satu web-jejaring yg sekarang merajai dunia secara global. Konon negara Indonesia merupakan salah satu terbesar di dunia sebagai pemakai aktif si twitter :-O
Adapun salah satu proses kinerja dari twitter-web yaitu dengan melakukan pengiriman link! Sekarang AA Koben akan berbagi satu tutorial cara grab kata/kalimat yg berada pada artikel post, kemudian akan dilanjutkan ke web twitter. Cara grab disini bukan seperti biasanya, melainkan dengan melakukan HTML <a> tag terhadap kalimat/kata tujuan.

Source & demo:

codepen.io/SachaG/full/NPePzX

Bahan-bahan membuat inline Quote tweets.

a[href~="#twitter"], .twitter-link {
background-color: #fff;
padding: 2px;
font-size: initial;
position: relative;
transition: background-color 300ms;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
a[href~="#twitter"]:after, .twitter-link:after {
width: 0px;
height: 23px;
position: relative;
right: -8px;
top: 2px;
vertical-align: text-bottom;
transition: width 300ms;
content: " ";
display: inline-block;
background: #fff url("https://abs.twimg.com/favicons/favicon.ico") right 6px center no-repeat;
background-size: 18px 18px;
}
a[href~="#twitter"]:hover, .twitter-link:hover {
background-color: #55ACEE;color: #fff
}
a[href~="#twitter"]:hover:after, .twitter-link:hover:after {
width: 32px;
}

Trik ini memakai jQuery, jadi harus sudah tertanam script<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    var capitaliseFirstLetter = function (string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
    // take a text and a link, and build the twitter link
    var buildTwitterLink = function (text, url) {
        var encodedUrl = encodeURIComponent(url);
        var referrer = encodeURIComponent("http://www.YOUR-ADDRESS.com");
        return "https://twitter.com/intent/tweet?original_referer=" + referrer + "&url=" + encodedUrl + "&text=" + encodeURIComponent(text) + "&via=yourTwitterUsername";
    }
    $('[href="#twitter"]').each(function () {

        var $link = $(this);
        var text = "“" + capitaliseFirstLetter($link.text()) + "”";
        var url = "http://www.YOUR-ADDRESS.com" + window.location.pathname;
        var twitterLink = buildTwitterLink(text, url);

        $link.addClass('twitter-link').attr('href', twitterLink).attr('target', '_blank');
    });
});
//]]></script>

NB:
Gantikan http://www.YOUR-ADDRESS.com dengan alamat blog anda!
Cara pemakaian, ketika sobat akan melakukan posting sama halnya dengan mebuat tag <a>
Ex:

<p>Retro lo-fi raw denim est excepteur dreamcatcher. <a href="#twitter">Nullam malesuada erat ut turpis. Suspendisse urna nibh</a>, viverra non, semper suscipit, posuere a, pede.</p>
<p>Wayfarers DIY raw denim, pariatur williamsburg incididunt fanny pack you probably haven't heard of them quinoa non helvetica aute laboris. <a href="#twitter">Aliquam porttitor mauris sit amet orci</a>. Aenean dignissim pellentesque felis.</p>
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>

Other technique:
Tweet selected text >> codepen.io/hugobessaa/pen/xDtri

Bye :-h

Simple Div Scrolling using JavaScript

Jika berbicara tentang property overflow, salah satu yang tidak bisa lepas dan biasanya selalu mengikuti adalah property scroll! Apabila kita membuat sebuah konten area kemudian diberi batasan jarak ketinggiannya, maka akan terciptalah si scroll itu? Jadi salah satu fungsi scrolling adalah memberitahukan kepada kita, bahwasannya isi dari sebuah konten masih ada. Cara konvensional dari penggunaan scroll biasanya dengan menahan klik kiri pada mouse. Lantas bagaimana jika mouse kita rusak klik kirinya, tentu dengan bantuan tombol keyboard masih bisa :P

Example:

Retro lo-fi raw denim est excepteur dreamcatcher. Fap eiusmod reprehenderit exercitation, cred terry richardson biodiesel incididunt ex tempor synth est do ut. Synth voluptate whatever chambray irony in, jean shorts tempor veniam twee. Irure tempor terry richardson, sunt wolf eu irony veniam craft beer master cleanse voluptate beard +1 banksy. Wayfarers DIY raw denim, pariatur williamsburg incididunt fanny pack you probably haven't heard of them quinoa non helvetica aute laboris. Wayfarers DIY raw denim, pariatur williamsburg incididunt fanny pack you probably haven't heard of them quinoa non helvetica aute laboris. Leggings Austin ad, sustainable labore fap wolf. Synth voluptate whatever chambray irony in, jean shorts tempor veniam twee. Irure tempor terry richardson, sunt wolf eu irony veniam craft beer master cleanse voluptate beard +1 banksy. Scenester you probably haven't heard of them 8-bit odio. Wayfarers DIY raw denim, pariatur williamsburg incididunt fanny pack you probably haven't heard of them quinoa non helvetica aute laboris. Vinyl tumblr letterpress craft beer trust fund.. Ethical veniam bicycle rights nisi, odio yr assumenda synth fap. Scenester you probably haven't heard of them 8-bit odio. Stumptown irony VHS, keffiyeh ex tumblr keytar aute excepteur. Stumptown irony VHS, keffiyeh ex tumblr keytar aute excepteur.

Sekarang AA mau berbagi cara membuat simple div scrolling menggunakan bantuan JavaScript. Ketika disorot (hover) maka secara otomatis scroll akan berjalan dengan sendirinya ke atas atau ke bawah.
DEMO

codepen.io/beben-koben/full/Joejrm

Kode CSStd.scroll {cursor: pointer;width:100%;height:25px;text-align:center;background:#f5f5f5;}
td.scroll:after {content:'Hover Here';}Silahkan sobat hias sendiri dengan menambahkan variabel pada CSS!

<table width="100%" border="0" cellspacing="0" cellpadding="3" bgcolor="#ffffff">
<tr>
<td id="toUp" onMouseOver="scrollStart('Up', 'div_content', 'toUp');" onMouseOut="scrollEnd('toUp');" class="scroll"></td>
</tr>
<tr>
<td>
<div id="div_content" style="height:200px; overflow-y:hidden; overflow-x:hidden;">

----------------------- BLAH-BLEH-BLOH HERE -----------------------

</div>
</td>
</tr>
<tr>
<td id="toDown" onMouseOver="scrollStart('Down', 'div_content', 'toDown');" onMouseOut="scrollEnd('toDown');" class="scroll"></td>
</tr>
</table>

NB:
Jika sobat ingin menambahkan div scrolling, pada markup HTML harus berbeda unik-id. Berikut unikID tersebut toUp, toDown and div_content Jadi dengan begitu mau sebanyak apapun scrolling content yg kalian inginkan harap perhatikan UNIK-ID!

<script type='text/javascript'>
//<![CDATA[
var ourInterval;
var origColor = "#f7f7f7";
var overColor = "#f3f3f3";
var scrollSpeed = 50;
var scrollHeight = 5;

function scrollStart(direction, divID, elementID){
//CHANGE THE BACKGROUND COLOR OF THE TD THE MOUSE IS OVER
document.getElementById(elementID).style.backgroundColor = overColor;
// REPEATED CALL EITHER scrollUp OR scrollDown
ourInterval = setInterval("scroll"+direction+"('"+divID+"')", scrollSpeed);
}
function scrollEnd(which){
// OUR MOUSE IS OUT, SO RETURN TD TO ORIGINAL COLOR
document.getElementById(which).style.backgroundColor = origColor;
// STOP CALLING THE SCROLL FUNCTION
clearInterval(ourInterval);
}
function scrollUp(which){
// SET THE SCROLL TOP
document.getElementById(which).scrollTop = document.getElementById(which).scrollTop - scrollHeight;
}
function scrollDown(which){
// SET THE SCROLL TOP
document.getElementById(which).scrollTop = document.getElementById(which).scrollTop + scrollHeight;
}
//]]>
</script>

FINISH.

Source by: dsgdev.wordpress.com/2006/09/25/simple-div-scrolling

Happy scroll \m/

Make 3D Accordion Using CSS

Salah satu tema artikel yang masih banyak dipostingkan orang adalah mengenai tutorial accordion Mulai dari yg sederhana sampai dengan tingkat full stylish style! AA Koben sekarang akan berbagi satu cara bagaimana cara membuat 3D accordion. You can look final result here codepen.io/Vampireos/full/DAfdr. Karena ini full-stylish banget, maka penggunaan kode CSS agak lumayan ;)) Selain efek 3D, bagian terakhir kotak konten pada accordion ini menggunakan trik stack of cards. Apakah itu, you can read here what is that codepen.io/Adevade/pen/ogyreb.
You lucky, i want make a screenshot...Sobat bisa melihat bagian berputar, dan efek kotak bagian bawah terlihat seperti konten bertumpuk!

Mengapa menggunakan accordion?

Coba pikirkan tentang accordion sebagai alat manajemen konten. Bila sobat memiliki halaman yang dipecah menjadi puluhan paragraf, link, gambar, atau banyak blok konten ... salah satu solusinya yaitu memasang accordion :)

Kode CSS

Pasangkan kode CSS pada tempat semestinya. Editlah code sesuai dengan keperluan (warna, background, lebar, tinggi dll)

<ul class="container anim-label-4 anim-art">

<li>
<input checked="checked" id="ac-1" name="ac-3D" type="radio"/><label for="ac-1" onclick="" title="Title Tampak Depan">Title Tampak Belakang</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
            </li>

            <li>
<input id="ac-2" name="ac-3D" type="radio"/><label for="ac-2" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
            </li>

            <li>
<input id="ac-3" name="ac-3D" type="radio"/><label for="ac-3" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
            </li>

            <li>
<input id="ac-4" name="ac-3D" type="radio"/><label for="ac-4" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
                </article>
            </li>

            <li>
<input id="ac-5" name="ac-3D" type="radio"/><label for="ac-5" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
                    <p>----------- BLAH BLEH BLOH -----------</p>
                    <p><iframe frameborder="0" height="315" src="//www.youtube.com/embed/k3L7pwrE-tw" width="100%"></iframe></p>
                </article>
            </li>

</ul>

Kalau sobat kepingin model lain, silahkan cari saja di Best Practices for Accordion Interfaces in Web Design webdesignledger.com/web-design-2/best-practices-accordions-in-web-design

Happy accordion \m/

Get Free 10 Tools For You

Salah satu cara dalam urusan mempercepat loading web/blog adalah dengan melakukan kompres CSS! Berbagai jenis tools compressor banyak tersedia. Sekarang AA Koben akan berbagi tools CSS minifier dengan nama CSS Shrink by master Stoyan Stefanov! Sobat dapat melihat penjelasan dalam bentuk slide share cssshrink.com/velocity dan playground pada halaman cssshrink.com. Sebagai bloglang peselancar dunia maya terbaik, gue telusuri sumber dari shrink, and AA dapatkan 10 tool buat hiburan kalian ;)) (perhatikan navigasi menu)Berikut tools-nya:

1. BSCSS
Browser specific CSS demo.
2. Colormin
Minify CSS colors playarea.
3. CSS Min
This CSS minification tool uses a JavaScript port of the YUI Compressor.
4. CSS Shrink
CSS minifier.
5. CSS JS
Parse CSS to JS
6. CSS Lexer
I dont know what is this :D
7. Gonzales AST
This is library to help navigate CSS AST produced by the Gonzales CSS parser.
8. Mensch
CSS parser and stringifier.
9. Prettyugly
CSS uglify/prettify.
10. CSS properties
Test which CSS properties are supported by your browser. CSSProps project gathers data for the BSCSS project.

Apakah sobat tergiur dengan semua itu? You can get all for free :))

Unduh cssshrink-master di 4shared by Beben Koben.
www.4shared.com/zip/C1KIJW13ce/cssshrink-master.html
Download cssshrink-master.zip in Ziddu.
downloads.ziddu.com/download/24401696/cssshrink-master.zip.html

Ekstrak folder cssshrink-master.zip ► Open Demo folder ► Happy play.
Jika pengen merubah kembali kode CSS yg sudah di kompres ke bentuk semula (beautify) sobat bisa mencoba tool Get Free Download 3 Tool Beautify Code. Kalau mau yg praktis sobat dapat mencoba alternatif lain di halaman prettydiff.com Itu jg sudah open-source bero ;)
Demikian dan terima kasih atas perhatian sodara-sodara :) Selamat bermain-main tool!
Source by: www.phpied.com, www.csspatterns.com, perfectionkills.com & github.com/stoyan

Terms and Conditions is apply & All rights reserved.

Password .ZIP : ToolsByStoyanStefanov

Yeah... \m/