
வணக்கம் நண்பர்களே இன்று பார்க்க போகும் பதிவு நீங்கள் எழுதும் பதிவுகளை வித்தியாசமான முறையில் எப்படி காட்டலாம் ..
நம் பதிவுகள் படிப்பவரை சற்று மேலும் படிக்க வேண்டும் என துண்டும் என்பதில் சந்தேகம் இல்லை
நீங்கள் செய்ய வேண்டியதெல்லாம்முதலில் பதிவை எழுதி முடித்து விடுங்கள்
முடித்து விட்டு எழுதிய பதிவை WORD DOCOUMENT -லோ அல்லது NOTE PAD -லோ PASTE செய்து வைத்து கீழே வரும் கோடிங்-களுக்கு ஏற்ற வாறு மாற்றி அமைத்துக் கொள்ளுங்கள் ... கொஞ்சம் கடினமான வேலையாகதான் இருக்கும்
சற்று சிரமம் பார்க்காமல் செய்தால் சில வடிவமைப்பில் பதிவுகளை பெற முடியும் .
<style>
.list {
color: #555;
padding: 0 !important;
font-family: courier, monospace;
border: 1px solid #dedede;
position: relative;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.list li {
list-style: none;
border-bottom: 1px dotted #ccc;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 5px 0 5px 40px;
text-transform: capitalize;
}
.list li:hover {
background-color: #eee;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
}
.list li: last-child {
border-bottom: 0;
}
.list:before {
content: "";
border-left: 1px solid #ffaa9f;
border-right: 1px solid #ffaa9f;
width: 1px;
position: absolute;
height: 100%;
left: 25px;
}
</style>
<ul class="list">
<li>FIRST LINE...1</li>
<li>SECOND LINE...2</li>
<li>THIRD LINE...3</li>
</ul>
</div>
</div>
சரி செய்ய வேண்டியவை :
FIRST LINE SECOND LINE ,THIRD LINE என்னும் இடங்களில் முதல் வரி இரண்டாம் வரி ,மூன்றாம் வரி ஆகியவை கொடுத்து விடுங்கள் ...
மேலும் அடுத்த வரிகளுக்கு <li>TEXT HERE</li> மஞ்சள் நிறத்தில் உள்ள இடத்தில் சேர்த்து கொள்ளவும் ..
- தனக்குத் தெரிந்த விஷயங்களை மட்டுமே
- மனிதன் பேச ஆரம்பித்தால் உலகில்
- பூரண அமைதி ஏற்படும். - பெர்னாட்ஷா
- நன்றி
<style type="text/css">h4 {color: #cd0000;font-size: 14px;letter-spacing: -2px;text-align: left;}.list {color: #555;font-size: 22px;padding: 0 !important;width: 500px;font-family: courier, monospace;border: 1px solid #dedede;}.list li {list-style: none;border-bottom: 1px dotted #ccc;text-indent: 25px;height: auto;padding: 10px;text-transform: capitalize;}.list li:hover {background-color: #f0f0f0;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;}.lines {border-left: 1px solid #ffaa9f;border-right: 1px solid #ffaa9f;width: 2px;float: left;height: 495px;margin-left: 40px;}</style><br /><div class="lines"></div><ul class="list"><li>LINE...1</li><li> LINE...2</li><li> LINE...3</li><li> LINE...4</li><li> LINE...5</li><li> LINE...6</li><li> LINE...7</li><li> LINE...8</li><li> LINE...9</li><li>LINE...10</li><li>LINE...11</li></ul></div>
<style>.baris{color:#555;padding:0;
font-family:courier,monospace;
border:1px solid #ddd;position:relative;box-shadow:0 0 5px rgba(0,0,0,0.5);
background:#f3f3f3}.baris li{list-style:none;
border-bottom:1px dotted #ccc;overflow:hidden;white-space:nowrap;
text-overflow:ellipsis;
padding:5px 0 5px 40px;text-transform:capitalize}.baris li:hover{background-color:#FFF;
-webkit-transition:0.2s;-moz-transition:0.2s;-ms-transition:0.2s;-o-transition:0.2s;background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAP+qn////yH5BAEAAAEALAAAAAAEAAEAAAIDRAIFADs=);background-repeat:repeat-y;background-position:25px 0}.baris li:last-child{border-bottom:0}.baris:before{content:"";border-left:1px solid #ffaa9f;border-right:1px solid #ffaa9f;width:1px;position:absolute;height:100%;left:25px}
.paragrap{padding:20px;font:italic 115%/1.5 Baskerville,"Palatino Linotype",serif;background-color:hsl(24,10%,90%);background-image:linear-gradient(hsla(210,50%,30%,.5) 1px,transparent 1px);background-image:-moz-linear-gradient(hsla(210,50%,30%,.5) 1px,transparent 1px);background-size:100% 1.5em;background-origin:content-box}</style>
<ul class="baris"><li>LINE 1</li><li>LINE 2</li><li>LINE 3 </li><li>LINE 4</li><li>LINE 5</li><li>LINE 6</li><li>LINE 7</li></ul>
வழக்கம் போல புதிய தகவல்.
ReplyDelete:) :) :)
நன்றி நண்பா
Deleteஇந்த மாதிரி ஐடியாக்கள் எல்லாம் எப்படி நீங்கள் தெரிந்துக்கொள்கிறீர்கள் என்று தெரியவில்லை..நன்றி.
ReplyDeleteதங்கள் நன்றி நண்பா
Deleteபயனுள்ள பதிவு ! நன்றி நண்பரே !
ReplyDeleteThank you for the superb article.
ReplyDeleteநல்ல பதிவு.
ReplyDeleteநன்றி.