smartZone

Блоки комментариев на css без изображений

Собственно, ничего принципиально нового или фантастического. Просто способ сделать такие вот стильные блоки без использования изображений:

Блоки комментариев на css без изображений


Думаю, это много кому может пригодиться. У меня, например, есть несколько проектов, на которых этот способ было бы целесообразно использовать.

Код html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"><head><title>title</title><link rel="stylesheet" type="text/css" href="comments.css" /></head><body><h3>Летят как-то Петька с Василь Иванычем в самолёте</h3><p class="name">Вассиль Иваныч</p><div class="lt"><</div><div class="line"></div><p class="comments">Петька!!! Приборы!!!!</p> <div style="clear: both;"></div><p class="name">Петька</p><div class="lt"><</div><div class="line"></div><p class="comments">Триста сорок пять!!!!</p> <div style="clear: both;"></div><p class="name">Вассиль Иваныч</p><div class="lt"><</div><div class="line"></div><p class="comments">Что «триста сорок пять»!??</p> <div style="clear: both;"></div><p class="name">Петька</p><div class="lt"><</div><div class="line"></div><p class="comments">А что, б%%%ь, «приборы»!?</p> </body></html>




Код css:
* {font: normal 12px arial;}.name {float: left;width: 150px;display: block;text-align: right;padding-top: 8px;clear: both;}.comments {float: left;width: 30%;border: 2px solid red;padding: 10px 15px;}.line {height: 14px;width: 2px;float: left;position: relative;left: 2px;background: #fff;top: 23px;//top: 13px;}.lt {float: left;position: relative;left: 8px;top: 11px;//top: 1px;font: normal 28px verdana;z-index: 5;color: red;}


Само собой разумеется, код можно оптимизировать и совершенствовать. Тут показан только сам принцип.

Преимущества и недостатки метода описывать не буду — истина родится в комментариях :-)


Источник: Уроки CSS на Хабрахабре