Selection Good Resources February 2015 - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Selection Good Resources February 2015, we have prepared well for this article you read and download the information therein. hopefully fill posts Article CSS, Article Resource, Article Trik dan Tips, Article Web, we write this you can understand. Well, happy reading.

Title : Selection Good Resources February 2015
link : Selection Good Resources February 2015

Selection Good Resources February 2015

Artikel ringan AA Koben mau berbagi resources pilihan dari Coder's Block Blog. Mau membaca dari awal, bisa langsung di satroni codersblock.com/blog Berawal dari postingan dengan judul crazy meta CSS hack, trik untuk menampilkan kode dalam (view source) hanya menggunakan kode CSS. Saya melihat code display ditampilkan dengan begitu elegan ;)) Gue comot dah itu :))

Dengan penanaman variabel CSS after and before, sehingga menimbulkan kata di pojok sisi kiri atas dan kanan bawah. Gue sudah buatkan 3 tampilan sama untuk CSS, HTML n JavaScript.

.css, .html, .script {
color: #fff;
margin: 10px;
padding: 10px;
display: block;
border: 2px dashed #bbb;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 17px;
font-family: "Courier New",Courier,monospace;
background-color: #40484f;
white-space: pre-wrap;
}
.css::before,.html::before,.script::before,.css::after,.html::after,.script::after {
display: block;
color: #bbb;
font: 25px/1.2 'Inconsolata', monospace;
}
.css::before,.html::before,.script::before {
margin-left: 10px;
}
.css::after,.html::after,.script::after {
margin-right: 10px;
text-align: right;
}
.css::before { content: '<CSS>'; }
.css::after { content: '</CSS>'; }
.html::before { content: '<HTML>'; }
.html::after { content: '</HTML>'; }
.script::before { content: '<Script>'; }
.script::after { content: '</Script>'; }

Markup HTML

<div class="css">

-------- YOUR PHRASE CODED HERE -------- 

</div>

<div class="html">

-------- YOUR PHRASE CODED HERE -------- 

</div>

<div class="script">

-------- YOUR PHRASE CODED HERE -------- 

</div>

Lanjut bro...

Berikut beberapa kreasi pilihan lain agar tampilan kode di area postingan terlihat menarik

Sebenarnya sudah pernah saya berkunjung, tetapi via codepennya! Berikut trik dari master Will tentang spoiler with waiting time. Satu lagi trik yg banyak orang membahas yaitu tentang accordion Trik akordion kali ini agak berbeda, karena syntax HTML menggunakan element <hr> (Accordion Effect with Horizontal Rules)

.hr {
height: auto;
margin: 0;
padding: 10px;
border: none;
border-bottom: solid 1px rgba(0, 0, 0, .2);
counter-increment: part;
transition: border-bottom-color .2s ease-out;
}
.hr::first {
border-top: solid 1px rgba(0, 0, 0, .2);
}
.hr::before {
content: 'Accord ' counter(part, lower-roman);
display: block;
color: #333;
font-size: 1.1em;
font-variant: small-caps;
letter-spacing: .05em;
}
.hr:hover, hr:focus {
border-bottom-color: rgba(0, 0, 0, .7);
outline: none;
}
.hr:not(:focus) {
cursor: pointer;
}
.hr ~ p {
text-align: justify;
overflow: hidden;
transition: transform .5s ease-out, opacity 1s ease-out;
}
.hr:focus ~ p {
height: auto;
margin: 0;
padding: 5px 10px;
background-color: #f7f7f7;
opacity: 1;
transform: translateY(0);
}
.hr ~ p, .hr:focus ~ .hr ~ p {
height: 0;
margin: 0;
padding: 0;
opacity: 0;
transform: translateY(-15px);
}

Planning HTML

<hr tabindex="1" class="hr">
<p>------- BLAH BLEH BLOH HERE -------</p>
<hr tabindex="2" class="hr">
<p>------- BLAH BLEH BLOH HERE -------</p>
<p>------- BLAH BLEH BLOH HERE -------</p>
<hr tabindex="3" class="hr">
<p>------- BLAH BLEH BLOH HERE -------</p>
<hr tabindex="4" class="hr">
<p>------- BLAH BLEH BLOH HERE -------</p>
<p>------- BLAH BLEH BLOH HERE -------</p>
<p>------- BLAH BLEH BLOH HERE -------</p>

DEMO

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

Source: codepen.io/lonekorean/pen/GneCq - codepen.io/lonekorean/pen/kocrl - codepen.io/lonekorean/pen/brdCk
Ada template keren-keren nih, 45 Best Free Blogger Templates 2015 webdesignlike.com/2015/best-free-blogger-templates
Jangan lupa kunjungi dan acak-acak baca codersblock!

Bye :-h

Thus articles Selection Good Resources February 2015

that is all articles Selection Good Resources February 2015 This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Selection Good Resources February 2015 with the link address https://autopostingblogspot.blogspot.com/2015/02/selection-good-resources-february-2015.html

Selection Good Resources February 2015

Selection Good Resources February 2015

Thus articles Selection Good Resources February 2015

0 Response to "Selection Good Resources February 2015"

Posting Komentar

Selection Good Resources February 2015

Also Read

Selection Good Resources February 2015

Thus articles Selection Good Resources February 2015

0 Response to "Selection Good Resources February 2015"

Posting Komentar