Jumat, 30 Agustus 2013

Auto Selection Highlight Text on Tagging PRE

Menyambung artikel kemarin ah biar tuntas walau sudah sedikit usang! Sebelumnya Koben sudah berbagi membuat HTML pre tag dengan gaya paper edge effect. Sekarang gua akan bagi lagi masih seputar trick PRE yang sudah banyak dipasang oleh blogger Indonesia :D Sobat-sobat pernah melihat dong tampilan script/coded di area postingan, lalu untuk mengambil coded/script tersebut ada tulisan Klik untuk menyeleksi! Itulah yg akan gue sharing cara membuat click select text in HTML pre tag using JavaScript or jQuery. Langkah pertama sudah tentu sobat sudah harus membuat kode CSS untuk HTML pre-nya. Kalau belum bikin sekalian saja deh, biar nggak capak ;)

Kode CSS tagging PRE

pre {
display: block;
font-size: 14px;
font-family: Monaco,'Courier New',Courier,Monospace;
background-color: #f9f9f9;
color: #060606;
width: auto;
padding: 0.7em 1em;
line-height: 1.5em;
word-wrap: normal;
white-space: pre;
overflow: auto;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
position: relative
}
pre:before {
content: "Klik untuk menyeleksi!";
position: absolute;
top: 5px;
right: 5px;
padding: 5px;
color: #f9f9f9;
background-color: #060606;
visibility: hidden;
}
pre:hover:before {visibility:visible}
Itu gue bikin, silahkan tambah-tambahin oleh kalian biar lebih full stylish. Setelah buat area pre giliran memasukan script buat menyeleksi teks. Script ada 2 jalan, yaitu mau memakai JavaScript ataupun jQuery.

Murni JavaScript
<script type='text/javascript'>
var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("click", function () {
var seleksi = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
seleksi.removeAllRanges();
seleksi.addRange(range);
}, false);
}
</script>
Plugin jQuery
<script type='text/javascript'>
function autoSelect(elem) {
var selection, range;
if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(elem);
selection.removeAllRanges();
selection.addRange(range);
} else if (document.selection) { // IE
selection = document.selection.createRange().text;
range = document.body.createTextRange();
range.moveToElementText(elem);
range.select();
}
}
$('pre').on("click", function() {
autoSelect(this);
});
</script>
Pilih salah satu jangan dimasukin dua²nya :P Masalah penempatan script coba terlebih dahulu diatas tag </body> kalau tidak jalan baru deh coba taruh scriptnya diatas tag </head>
Ketika mosting markup HTML yg dipakai seperti berikut<pre>

-------- CODED/SCRIPT AFTER PHRASE --------

</pre>

DEMO
Semoga bermanfaat :)
Happy coding \m/

Kamis, 29 Agustus 2013

Decorate HTML PRE Tag with Style Paper Edge Effect

Berbicara mengenai HTML pre tag memang sedikit unik. Karena tanpa embel-embel gaya CSS saja sudah terlihat keunikannya! Tagging pre akan menampilkan script/coded saat kita mau memposting apa adanya. Jadi kita tinggal membubuhi gaya dengan sesuai kebutuhan dan selera ;) Sudah merupakan aturan main taging <pre> </pre> diguanakan dalam menuliskan kode!
Berikut ini beberapa artikel tut's tentang tag HTML pre:
  1. Make Code Preview on Post Area pre & code
  2. Hover Trick on pre Attribute
  3. Coolest Hover Style for PRE and ABBR Tag
Sekarang AA Koben mau berbagi bagaimana caranya membuat tagging pre menjadi lebih indah dengan memberikan sentuhan efek paper (lipatan kertas) Tapi lipatan yg dibuat berada disisi yah (Paper edge effect)
DEMO

div {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #ddd;
background-size: cover;
background-clip: content-box;
background-color: #f66f6f;
box-sizing: border-box;
position: relative;
margin: auto;
}

.paper-edge {
width: 17em;
height: 200px;
padding: 10px;
border: 1px solid #777;
background-size: cover;
background-clip: content-box;
background-color: #F6F4F0;
box-sizing: border-box;
position: relative;
margin: 15px auto;
color: #333;
white-space: pre-line;
}
.paper-edge:after {
content: "";
display: block;
position: absolute;
border: 50px solid transparent;
border-bottom: 50px solid #fff;
bottom: -60px;
right: -65px;
box-shadow: 0px 7px 6px -9px black;
transform: rotate(135deg);
}
.paper-edge:before {
content: "";
display: block;
position: absolute;
border: 50px solid transparent;
border-top: 50px solid #fff;
top: -60px;
left: -65px;
box-shadow: 0px -7px 6px -9px black;
transform: rotate(135deg);
}
.paper-edge p {
margin: 10px;
height: 185px;
overflow: hidden;
text-indent: 15px;
}
.paper-edge p:hover {
overflow-y: auto;
}

Aturlah tinggi, lebar, padding & margin sesuai kebutuhan. Perhatikan pada variabel kode border-bottom: 50px solid #fff; and border-top: 50px solid #fff; Gantikan kode warna sesuai dengan background tempalte kalian. Karena kalau tidak sama warna kode tersebut dengan warna latar belakang akan kelihatan juelek :D
Markup HTML<div class="paper-edge"><p>BLAH BLEH BLOH {

----------- ADD CODED AFTER PHRASE HERE -----------

}</p></div>
Selesai deh membuat membuat tag HTML pre dengan gaya paper edge effect.
Semoga bermanfaat :)
Resource by: http://cdpn.io/AyueF
BONUS links...
code-snippet-blog.dennispollack.de - cdpn.io/fDFce - cdpn.io/qmIdx - cdpn.io/AFsKB

Senin, 26 Agustus 2013

Memasang Emoticon Murni Pakai Kode CSS

Koben mau mengangkat lagi tutorial lawas nih. Tut's yang membicarakan bagaimana blog kita terlihat lebih atraktif dengan memakai emoticon. Untuk lebih jauh melihat macam-macam hack seputaran smiley silahkan search pada kotak pencarian dengan keyword EMOTICON ;)
Kesempatan sekarang gue mau berbagi bagaimana cara memasang smiley si emoticon ke dalam blog kalian murni 100% menggunakan CSS. Apakah sobat tidak peracaya emoticon sekarang ini bisa dibuat dengan variabel CSS? Namanya juga skill dan tentunya ide dalam brekreasi ;)) Lihat screenshot berikut setelah penanaman ke dalam template blogCSS-SmileyBerikut live demo pada blog aku yg keren jg demo css emoticon :D Sebelum masuk pada bumbu CSS, ada cerdiknya kalian pilah-pilih jenis emoticon apa saja yang mau ditampilkan. Ada 26 jenis karakter emoticons loh! Biar ngirit coding and loading blog :P

Bumbu CSS Emoticon

Ambil deh itu bumbu²nya dan simpan diatas kode </b:skin> Setelah terpasang kode CSS, untuk pemakaiannya ada dua cara:
1. Langsung tanam syntax didalam template.
Carilah syntax yg mirip-mirip dengan ini<div class='post-body' id='PRET'>
Fokus pada unik id post-body Kemudian sisipkan didalamnya kode class='smiley' Ex jd spt brkt<div class='post-body smiley' id='PRET'>

2. Menulis langsung ketika mosting.
Ketika sobat mau mosting postingan, langsung pasangkan di awal paragraf dengan tagging berikut<div class="smiley">

--------- ISI POSTINGAN ---------

</div>
Apakah setelah melakukan langkah² diatas emotikon akan muncul? Ya tidak akan muncul, wong itu mah baru memasang tag agar kode CSS emot bisa muncul. Berikut ini ke 26 markup HTML emoticonnya

Markup HTML Emoticon

Agar lebih jelas silahkan lihat pembagian-bagiannya di jsfiddle.net/bebenkoben/sgZ6h/embedded/result,html,css
Inspired by http://cssdeck.com/labs/full/one-div-text-smileys
Jika kepengen yg lebih keren, silahkan sobat coba memasang tutorial berikut ke dalam blog codepen.io/TimPietrusky/pen/ylkFs
Enjoy it :)
Happy coding \m/

Minggu, 25 Agustus 2013

One Link to Get Some Tutorial Content

Bagaimana setelah membaca informasi terhangat versi AA Koben! Minimal kita mengetahui apa yang sedang terjadi dengan dunia para developer. Masih berhubungan dengan topik kemarin saat ini, yaitu bagi-bagi links resources keren punya. Link yg akan gue bagi bukan sembarang link, akan tetapi satu link terbuka pada browser kalian bisa bermuatan beberapa gaya tutorial?
Saya akan langsung memberikan link demonya, jadi urusan tutorial bagaimana download source & caranya bisa dilihat langsung pada navigation yang bertuliskan seperti back to the article or return to article. Start akan dimulai dari web baik hati Codrops :)

Creative Link Effects

CreativeLinkEffects

Creative Button Styles

CreativeButtons

Icon Hover Effects

IconHoverEffectsBagi blogger berlangganan ke Mary Lou pasti sudah pada melihat yah :D Berbicara trick hover memang nggak ada habisnya!!!

Text Input Love

TextInputLove

CSS3 Animated Modal Windows

ModalImageSlider

CSS3 Portfolio Hover Effects

CSS3PortfolioHoverEffectsTerakhir web anyar nih web cssexclusive untuk mendapatkan akses ke konten eksklusif css.

Innovating with CSS and CSS-3 animations

CSSEXCLUSIVECapek bikin gambar screenshotnya, sudah dulu bro, semoga berkenan informasi ini ;)
Happy blogging \m/

Jumat, 23 Agustus 2013

Good Resource in August 2013

Koben akan mencoba berbagi issue terhangat yang sedang terjadi di dunia maya ini. Tentunya hal-hal yg ada sangkut pautnya dengan kegiatan kita ber-blogging ria in the house! Banyak sih, tapi siapa tahu versi gue bisa bermanfaat buat kalian :) Resource berguna lagi informatif ini diawali dengan front-end framework untuk pengembangan web (blog too) agat lebih cepat dan lebih mudah Bootstrap Dengan memakai bootstrap versi teranyar v3.0.0 kita akan lebih mudah dalam pengkodean CSS (bisa customize and langsung download juga loh) ;)
Ternyata dengan pemakaian bootstrap, sedikit memusingkan kita dalam mengelola & mengekstrak id, kelas dan gaya inline dari dokumen HTML! Tenang saja kawan-kawanku ada tools mantap nih untuk solusinya extractCSS

extractCSS sudah opensource, file dapat di download di web github, tp pas di download tidak jalan, bagi yg mau tools tsb silahkan kontak gue yah :P Kita mungkin baru tau resposive bekerja pada bagian CSS dan HTML saja, akan tetapi ternyata urusan responsive juga bisa diterapkan pada masalah typography juga FlowType.JS Masuk ke masalah membuat tombol? Master Taufik Nurrohman sudah pernah membuat tools portable css3 button generator Tidak ada yg salah dengan tools itu, tapi saat sekarang cobalah yg ini Create CSS-only Buttons Berbicara mengenai tools tidak ada habisnya, oleh sebab itu kita musti mengetahui rahasia di balik itu semua secrets
Framekworks & tools memang seperti sudah menjadi satu-kesatuan yg tidak terpisahkan, oelh sebab itu dalam memilah-memilih malah di buat pusing sendiri! You must see it for that trouble divine project

Saat sobat sedang bereksplore web wireframe tools, maka kalian akan dihadapkan dengan tampilan jejeran web-web keren punya dengan trick image hover effect full stylish :-?
DEMO

beben-koben

Tutorial Blog for Stylish Blogger

by b3b3n

Twitter

.image-container p {
margin: 0;
}
.image-container h4 {
color: #fff;
margin: 0;
padding: 0;
}
.button {
background: #0084b4;
border-radius: 5px;
color: #fff;
display: inline-block;
font-weight: bold;
padding: 5px 8px;
position: absolute;
right: 20px;
top: 30px;
}
.button:hover {
background: #2D76B9;
color: #fff;
}
.image-container {
border: 6px solid #fff;
border-radius: 4px 4px 0 0;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
overflow: hidden;
position: relative;
width: 400px;
}
.image-container img {
-webkit-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
.image-container:hover img {
-webkit-transform: translateY(-45px);
-ms-transform: translateY(-45px);
-o-transform: translateY(-45px);
transform: translateY(-45px);
}
.image-container:hover div {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform .4s, opacity .1s;
-ms-transition: -ms-transform .4s, opacity .1s;
-o-transition: -o-transform .4s, opacity .1s;
transition: transform .4s, opacity .1s;
}
.image-container div {
background: #34495e;
bottom: 0;
color: #fff;
height: 50px;
left: 0;
opacity: 0;
padding: 20px;
position: absolute;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform .4s, opacity .1s .3s;
-ms-transition: -ms-transform .4s, opacity .1s .3s;
-o-transition: -o-transform .4s, opacity .1s .3s;
transition: transform .4s, opacity .1s .3s;
width: 360px;
}
Perhatikan variable width dalam mengedit, karena sangat berpengaruh ;)
Planning HTML<div class="image-container">
<img src="LINK-IMAGE" alt="" style="" />
<div>
<h4>App Calendar Icon</h4>
<p>by <a href="YOUR-LINK" title="">TITLE</a></p>
<a href="YOUR-LINK" class="button" title="">TITLE</a>
</div>
</div>
Credit code Koben dapatkan dari cssdeck.com/labs/jjcnv7p3 Dan disana penggunaan planning HTML sudah memakai bahasa HTML5, kalo gue mah xHTML saja ;)) Informasi dan tutorial sudah gue kasih tuh, kurang baik bagaimana saya coba :P Info terakhir yaitu tools untuk membuat CSS 3D menjadi lebih mudah Tridiv (use chrome or safari instead) :( Hampir saja kelupaan nih sob urusan tentang jQuery jQAPI Semoga bermanfaat :)
Happy blogging \m/

Selasa, 20 Agustus 2013

Collection of Water Effects Tutorial

Berbicara salah satu unsur terpenting yang ada di muka bumi yaitu air. Bagaimana jadinya jika makhluk hidup tanpa air! Sedangkan pada tubuh manusia saja terdapat 55% sampai 78% air. Sampai-sampai air bersih sangat berharga sekarang ini hingga diperjualbelikan :-s Maaf blog gue bukan buat pelajaran biologi, tapi blog full stylish tempat informasi artikel keren & unik :))
AA Koben akan berbagi link resources mengenai tutorial yang ada sangkut pautnya dengan unsur air (water). Dari efek water, rain drop, rain ripples, water wave menu, css3 pepsi can, gloomy cloud, four leaf clover with css3, raining and many more ;)

Are you ready...get a coffee before start :P Yang pertama-tama bagaimana penampakan satu bentuk tetesan air bila dibuat menggunakan variabel CSS3!raindropMasih dari web yg sama, salah satu efek keren tetesan air yg pernah ada The Rain Ripples.Rain-Ripples

Dari web codepen gue menemukan ini: (LINK IS DEAD BECAUSE CHANGES):-(
  • cdpn.io/mgwsF
  • cdpn.io/aulqj
  • cdpn.io/ghzry
  • cdpn.io/ELFgj
  • cdpn.io/KwyjI
  • cdpn.io/eaJKl
  • cdpn.io/xKDLt
Dilanjutkan yuk dengan clear water WebGL jsrun.it/3cm/ydrm, and this is jsrun.it/arahaya/meKt sampe urusan 404 page juga ada yg pake air jsrun.it/esimov/7mAc :D Menu dengan hover effect ripple ada juga loh canaydogan.net/wp-content/uploads/demos/water-wave-menu/menu.html Karena demo water wave menu belum support terhadap mozilla, maka dari itu sama AA dibuatkan demo yg sudah jalan pada browser mozilla sekaligus opera ;)
Sobat pasti capek & lelah berkeliling melihat-lihat efek air, tentunya haus dong! Silahkan pandangi botol pepsi berikut biar segar kembali yah cssdeck.com/labs/full/css3-pepsi-can :D Segitu saja petualangan saat ini, kalo menemukan yg serupa nanti di add.
Happy blogging \m/

Senin, 19 Agustus 2013

Seven Animating CSS3 Gradients

Mulai kembali mosting setelah rehat libur panjang. Malas sebenarnya untuk memulai posting lagi, karena tertinggal jauh topic dari link source sumber developer :-s Maaf lahir dan bathin Koben ucapkan sebelumnya buat blogger pengunjung setia blog akuh :"> Tema postingan kali ini akan berbicara mengenai atribut gradients. Berbicara tentang Gradient tidak akan lepas dari penggabungan beberapa warna dan akan terlihat lebih eksotis dibandingkan dengan menggunakan satu warna saja! Berikut contoh efek warna linear-gradient.

Setelah mengetahui seperti apa gradient itu, bagaimana bila ditambahkan dengan efek animasi terhadap warnanya? Sudah pasti menjadi sesuatu yg full stylish b-) Buatlah kode CSS tombol yg kalian inginkan dengan memakai effect color gradient.
Contoh:

Tombol
.tombol {
background-image: linear-gradient(rgba(255,255,255,0.6),rgba(0,0,0,0.6));
display: inline-block;
height: 55px;
width: 120px;
line-height: 55px;
margin: 5px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
text-align: center;
}
Untuk kode background-image dan border-radius silahkan lakukan prefix terlebih dahulu. Berikut beberapa generator prefix tools
  • prefixr.com
  • prefixmycss.com
  • cssprefixer.appspot.com
Setelah membuat kode tombol saatnya memberikan sentuhan efek animasi! Jadinya akan sbb...
RGB

Kode animasi RGB#rgb {
background-color: #FF0;
animation: rgb 3s infinite alternate;
}
@keyframes rgb {
50% {background-color: #06F;}
100% {background-color: #F00;}
}
Kode @keyframes di prefix juga yah, ini toolsnya
  • tools.web-gate.fr/prefixMyKeyframes
Gabungkan kode animasi dengan kode tombol dalam penulisan syntax HTML!<a class="tombol" id="rgb">TITLE</a>Macam-macam tombol dengan menggunakan animating css3 gradients
Named Colors
#namedcolors {
background-color: red;
animation: namedcolors 0.3s infinite alternate;
}
@keyframes namedcolors {
100% {background-color: orange;}
}
<a class="tombol" id="namedcolors">Named Colors</a>
Hue
#hue {
background-color: hsl(0, 100%, 50%);
animation: hue 3s infinite alternate;
}
@keyframes hue {
20% {background-color: hsl(72, 100%, 50%);}
40% {background-color: hsl(144, 100%, 50%);}
60% {background-color: hsl(216, 100%, 50%);}
80% {background-color: hsl(288, 100%, 50%);}
100% {background-color: hsl(360, 100%, 50%);}
}
<a class="tombol" id="hue">Hue</a>
Saturation

#saturation {
background-color: hsl(0, 0%, 50%);
animation: saturation 3s infinite alternate;
}
@keyframes saturation {
100% {background-color: hsl(0, 100%, 50%); }
}
<a class="tombol" id="saturation">Saturation</a>
Lightness

#lightness {
background-color: hsl(0, 100%, 0%);
animation: lightness 3s infinite alternate;
}
@keyframes lightness {
50% {background-color: hsl(0, 100%, 50%); }
100% {background-color: hsl(0, 100%, 100%); }
}
<a class="tombol" id="lightness">Lightness</a>
Top Flat
#topflat {
color: #999;
background-color: white;
background-image: linear-gradient(rgba(0, 0, 0, 0), black);
animation: topflat 3s infinite alternate;
}
@keyframes topflat {
100% {background-color: black;}
}
<a class="tombol" id="topflat">Top Flat</a>
Bottom Flat
#bottomflat {
color: #999;
background-color: black;
background-image: linear-gradient(white, rgba(255, 255, 255, 0));
animation: bottomflat 3s infinite alternate;
}
@keyframes bottomflat {
100% {background-color: white;}
}
<a class="tombol" id="bottomflat">Bottom Flat</a>Resource by: http://thecodeplayer.com/walkthrough/animating-css3-gradients
Semoga bermanfaat :)
Happy coding \m/

Selasa, 06 Agustus 2013

How to Make Metro Dropdown Styling using CSS3

Tinggal menunggu hitungan jam kita selaku umat muslim akan meninggalkan bulan yang penuh berkah dan maghfirah yakni Bulan Ramadhan. Hari kemenangan akan tiba, kita sambut Hari Raya 'Idul Fitri dengan pribadi muslim yang lebih Istiqomah, Amin Ya Robal'alamin. Beben Koben si bloglang anu ganteng kalem tea mengucapkan
мᾄҭᾄ ќᾄḋᾄᾗʛ ṩᾄłᾄђ мἔłἷђᾄҭ.
мὗłὗҭ ќᾄḋᾄᾗʛ ṩᾄłᾄђ вἔʀὗƈᾄῥ.
ђᾄҭἷ ќᾄḋᾄᾗʛ ṩᾄłᾄђ мἔᾗḋὗʛᾄ.

мᾄᾄғќᾄᾗ ṩἔʛᾄłᾄ ќἔќђἷłᾄғᾄᾗ.
мὄђὄᾗ мᾄᾄғ łᾄђἷʀ ḋᾄᾗ вᾄҭђἷᾗ.
ṩἔłᾄмᾄҭ ђᾄʀἷ ʀᾄẏᾄ 'ἷḋὗł ғἷҭʀἷ.
мᾄᾄғἷᾗ KOBEN ẏᾄ
Tutorial sekarang update postingan mengenai trick atribut dropdown Contoh variasi drop-down (HTML <select> Tag) Tepatnya update artikel drop-down is select box!
DEMO
Keren kan :-bd
:root .css3-metro-dropdown select, :root .css3-metro-dropdown:after, :root .css3-metro-dropdown::after {
color: #fff;
display: block;
cursor: pointer;
background: rgb(45,45,45);
}
:root .css3-metro-dropdown select {
padding: 9px 15px 9px 9px;
}
:root .css3-metro-dropdown {
position: relative;
display: inline-block;
}
:root .css3-metro-dropdown::after {
top: 0;
right: 0;
width: 32px;
font-size: 12px;
content: "\25bc";
line-height: 35px;
text-align: center;
position: absolute;
pointer-events: none;
-webkit-pointer-events: none;
}
:root .css3-metro-dropdown select {
max-height: 35px;
border: 0 !important;
vertical-align: middle;
font: bold 12px/14px Arial, Helvetica, Sans-serif;
}
:root .css3-metro-dropdown option {
color: #000;
background: #fff;
}
Css3 metro dropdown styling ini menggunakan kode :root bisa di baca apakah itu css3 :root selector.
<div class="css3-metro-dropdown">
<select name="dropdown-1">
<option value="">Title 1</option>
<option value="">Title 2</option>
<option value="">Title 3</option>
<option value="">Title 4</option>
</select>
</div>
Source by: bit.ly/13iXynN

Jika elemen select dropdown tersebut di rasakan kurang memenuhi kebutuhan yg ada, maka sobat bisa coba paket skinnable css3 metro forms Karena sekali lagi judul tertulis ada kata METRO, ini bonusnya jquery plugins responsive metro style navigation menus
code.octopuscreative.com/fancyselect

Sabtu, 03 Agustus 2013

How to Make Collapsible TreeView use CSS

Apa karena namanya tree jadi mirip seperti sebuah pohon! Tapi kalau di telaah, mungkin karena fiturnya yang turun-temurun, maka tree di sini memiliki arti sesuatu yg mirip pohon karena keturunan :D Saya hanya mau mengupdate artikel cara membuat collapsible TreeView menggunakan 100% kode CSS. Postingan serupa patut di tengok terlebih dahulu sebelum melangkah ke session berikut ;)
  1. Make line tree navigation pure use css.
  2. Make treevew menu without javascript.
Mirip dengan nomor 2 sepertinya TreeView menu yg sekarang! Karena murni pakai kode CSS and tanpa image tentunya.
DEMO
    • Daftar Isi
      • Post Entry
      • Member Entry
    • Inspirasi
    • Creativity
    • Typography
    • Portfolio
    • Project
    • Contact
Silahkan ambil bumbu CSS collapsible TreeView di restoran terdekat :P
.treeview {
float: left;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.treeview ul {
list-style: none;
padding-left: 1em;
}
.treeview ul li span:hover {
color: #d00;
}
.treeview input {
display: none;
}
.treeview input:checked ~ ul {
display: none;
}
.treeview input ~ label {
cursor: pointer;
}
.treeview input ~ label:before {
content: '';
width: 0;
height: 0;
position: absolute;
margin-left: -1em;
margin-top: 0.4em;
border-width: 4px;
border-style: solid;
border-top-color: transparent;
border-right-color: green;
border-bottom-color: green;
border-left-color: transparent;
}
.treeview input:checked ~ label:before {
margin-left: -0.8em;
border-width: 5px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: red;
}
Markup HTML
<div class="treeview hover">
<ul>
<li>
<input type="checkbox" id="cb-1&quot;>
<label for="cb-1">
<span>Title 1</span>
</label>
<ul>
<li><span>Daftar Isi</span></li>
<li>
<input type="checkbox" id="cb-1-2">
<label for="cb-1-2">
<span>Sub Menu</span>
</label>
<ul>
<li><span>Post Entry</span></li>
<li><span>Member Entry</span></li>
</ul>
</li>
<li><span>Inspirasi</span></li>
<li><span>Creativity</span></li>
<li><span>Typography</span></li>
</ul>
</li>
<li>
<input type="checkbox" id="cb-2">
<label for="cb-2">
<span>Title 2</span>
</label>
<ul>
<li><span>Portfolio</span></li>
<li><span>Project</span></li>
<li><span>Contact</span></li>
</ul>
</li>
</ul>
</div>
Perhatikan secara baik-baik penulisan syntax variabel ul & li. Khusus input type dan label, unik ID harus berbeda dengan sebelumnya, tetapi harus sama dengan type input & label. Jika pemakain unik ID ada yg sama, maka tidak akan jalan alias bentrok :-"
Source by: codepen.io/galaxija737/full/bKrEL
Happy coding \m/

Jumat, 02 Agustus 2013

Make Stylish Navigation Menu Circles

Buat tutorial menu navigasi lagi ah ;)) Navigation menu yang sekarang akan kita buat dengan kondisi fixed. Jadi kita sebut saja menu fixed :D Karena keberadaan navigasi yg berjejer, maka di kasih bumbu opacity agar terlihat kabur remeng² :P Menu jenis ini gue temukan di css3-magic.brunoscopelliti.com/index.html Bagus apa tidaknya terserah kalian... Karena di kondisikan fixed, maka jika menu terlalu banyak add, akan terlihat deretan lingkaran-lingkaran! Lagi gak emmot mosting >_<'

#nav {
left: 5px;
opacity: .25;
position: fixed;
text-align: center;
}
#nav:hover {
opacity: 1;
}
#nav ul {
padding: 0;
width: 50px;
display: block;
margin: 0 auto;
list-style: none;
overflow: visible;
}
#nav ul li {
padding: 0;
width: 30px;
height: 30px;
display: block;
line-height: 0;
font-size: 15px;
margin: 7px auto;
position: relative;
text-align: center;
background: #36c;
border-radius: 25px;
-webkit-transition: background .3s linear, height .25s ease-out, width .25s ease-out;
-o-transition: background .3s linear, height .25s ease-out, width .25s ease-out;
transition: background .3s linear, height .25s ease-out, width .25s ease-out;
}
#nav ul li:hover {
width: 50px;
height: 50px;
background: #313131;
}
#nav ul li .nav-title {
top: 0;
left: 0;
border: 0;
opacity: 0;
color: #36c;
font-size: 15px;
text-align: left;
position: absolute;
display: inline-block;
padding: 15px 0 14px 10px;
border-bottom: 1px solid #f5f5f5;
-webkit-transition: top .25s linear, left .25s ease-out, opacity .2s ease-out;
-o-transition: top .25s linear, left .25s ease-out, opacity .2s ease-out;
transition: top .25s linear, left .25s ease-out, opacity .2s ease-out;
}
#nav ul li:hover .nav-title {
top: 12px;
left: 45px;
opacity: 1;
overflow: hidden;
white-space: nowrap;
}
#nav a {
color: #FFF;
width: 100%;
height: 100%;
margin: 0;
opacity: 1;
line-height: 0;
padding: 16px 0 0;
display: inline-block;
-webkit-transition: padding-top .25s ease-out;
-o-transition: padding-top .25s ease-out;
transition: padding-top .25s ease-out;
}
#nav a:hover {
padding-top: 25px;
}
Planning HTML
<div id="nav">
<ul>
<li class="itemicon"><a href="#">&#8801;<span class="nav-title">Home</span></a></li>
<li class="item"><a href="#">&#9786;<span class="nav-title">Daftar Isi</span></a></li>
<li class="item"><a href="#">&#9787;<span class="nav-title">Typography</span></a></li>
<li class="item"><a href="#">&#9992;<span class="nav-title">Tiket</span></a></li>
<li class="item"><a href="#">&#9996;<span class="nav-title">Peace</span></a></li>
<li class="item"><a href="#">&#9774;<span class="nav-title">Metal</span></a></li>
<li class="item"><a href="#">&#9997;<span class="nav-title">Buku Tamu</span></a></li>
<li class="item"><a href="#">&#9742;<span class="nav-title">Phone</span></a></li>
<li class="item"><a href="#">&#169;<span class="nav-title">Privasi</span></a></li>
<li class="item"><a href="#">&#9835;<span class="nav-title">Music</span></a></li>
<li class="item"><a href="#">&#9993;<span class="nav-title">Email</span></a></li>
</ul>
</div>
Sebelah kiri menunya, semoga bermanfaat :)
Bonus:
tympanus.net/Tutorials/GoogleNexusWebsiteMenu
Happy blogging \m/