Comment blocks on css without images

    Actually, nothing fundamentally new or fantastic. Just a way to make such stylish blocks without using images:




    I think this can be useful to a lot of 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 is shown here. I will not describe the advantages and disadvantages of the method - the truth will be born in the comments :-)




    title





    Летят как-то Петька с Василь Иванычем в самолёте


    Вассиль Иваныч


    <


    Петька!!! Приборы!!!!





    Петька


    <


    Триста сорок пять!!!!





    Вассиль Иваныч


    <


    Что «триста сорок пять»!??





    Петька


    <


    А что, б%%%ь, «приборы»!?













    * {
    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;
    }






    Also popular now: