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/

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

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

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

Creative Button Styles

Icon Hover Effects

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

Text Input Love

CSS3 Animated Modal Windows

CSS3 Portfolio Hover Effects

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

Innovating with CSS and CSS-3 animations

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

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

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/

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!Masih dari web yg sama, salah satu efek keren tetesan air yg pernah ada The 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/

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/