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.
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 HTMLcolor: #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>'; }
<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
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!
- Make Code Preview on Post Area pre & code.
- Make Code View on Blog Post using lang Attribute.
- Make Box For Display Post Code Browser Theme.
- Writing a Professional Code in Blog Post Area .
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 HTMLheight: 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);
}
<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 -------
------- BLAH BLEH BLOH HERE -------
------- BLAH BLEH BLOH HERE -------
------- BLAH BLEH BLOH HERE -------
------- BLAH BLEH BLOH HERE -------
------- BLAH BLEH BLOH HERE -------
------- BLAH BLEH BLOH HERE -------
Source: codepen.io/lonekorean/pen/GneCq - codepen.io/lonekorean/pen/kocrl - codepen.io/lonekorean/pen/brdCkAda 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
Loading... |
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...