Blocks of comments on css without images
Actually, nothing fundamentally new or fantastic. Just a way to make such stylish blocks without using images:
I think this is useful to many people. For example, I have several projects on which this method would be advisable to use.
')
Html code:
Css code:
Needless to say, the code can be optimized and improved. Only the principle itself is shown here.
I will not describe the advantages and disadvantages of the method - the truth will be born in the comments :-)
I think this is useful to many people. For example, I have several projects on which this method would be advisable to use.
')
Html code:
<br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br><html xmlns="www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"><br><head><br><title>title</title><br><link rel="stylesheet" type="text/css" href="comments.css" /><br></head><br><body><br><br><br><h3> - </h3><br> <p class="name"> </p><br> <div class="lt"><</div><br> <div class="line"></div><br> <p class="comments">!!! !!!!</p> <br> <br> <div style="clear: both;"></div><br> <br> <p class="name"></p><br> <div class="lt"><</div><br> <div class="line"></div><br> <p class="comments"> !!!!</p> <br> <br> <div style="clear: both;"></div><br> <br> <p class="name"> </p><br> <div class="lt"><</div><br> <div class="line"></div><br> <p class="comments"> « »!??</p> <br> <br> <div style="clear: both;"></div><br> <br> <p class="name"></p><br> <div class="lt"><</div><br> <div class="line"></div><br> <p class="comments"> , %%%, «»!?</p> <br><br><br><br><br></body><br></html><br><br>Css code:
<br>* {<br> font: normal 12px arial;<br>}<br>.name {<br> float: left;<br> width: 150px;<br> display: block;<br> text-align: right;<br> padding-top: 8px;<br> clear: both;<br>}<br>.comments {<br> float: left;<br> width: 30%;<br> border: 2px solid red;<br> padding: 10px 15px;<br>}<br>.line {<br> height: 14px;<br> width: 2px;<br> float: left;<br> position: relative;<br> left: 2px;<br> background: #fff;<br> top: 23px;<br> //top: 13px;<br>}<br>.lt {<br> float: left;<br> position: relative;<br> left: 8px;<br> top: 11px;<br> //top: 1px;<br> font: normal 28px verdana;<br> z-index: 5;<br> color: red;<br>}<br>Needless to say, the code can be optimized and improved. Only the principle itself is shown here.
I will not describe the advantages and disadvantages of the method - the truth will be born in the comments :-)
Source: https://habr.com/ru/post/64503/
All Articles