◄ Min  Size Fonts: + | - | ± Color: Max ►

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

Loading...
XDecorate HTML PRE Tag with Style Paper Edge Effect
Menghiasi tagging HTML pre dengan menambahkan CSS bergaya Paper Edge Effect
Subscribe my posts Register For Free!

3 comments

[?] g+ convert

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

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE