html - How to add border-radius before specific class of <li> for chat UI -


i'm trying implement chat bubble css answer, problem don't know how give border-bottom-left-radius first third message other user , border-bottom-right-radius fourth message user. please run code snippet understand i'm saying. in advance.

.chat-ul{    list-style: none;    margin: 0;    padding: 0;  }    .chat-ul .chat-li{    display:inline-block;    clear: both;    padding: 20px;    border-radius: 30px;    margin-bottom: 2px;    font-family: helvetica, arial, sans-serif;  }    .incoming {    background: #eee;    float: left;  }    .outgoing{    float: right;    background: #0084ff;    color: #fff;  }    .incoming:first-child{    border-bottom-left-radius: 5px;  }    .outgoing:first-child{    border-bottom-right-radius: 5px;  }    .incoming + .outgoing{    border-bottom-right-radius: 5px;  }    .outgoing + .outgoing{    border-top-right-radius: 5px;    border-bottom-right-radius: 5px;  }    .outgoing:last-of-type {    border-bottom-right-radius: 30px;  }    .outgoing + .incoming{    border-bottom-left-radius: 5px;  }    .incoming + .incoming{    border-top-left-radius: 5px;    border-bottom-left-radius: 5px;  }    .incoming:last-of-type {    border-bottom-left-radius: 30px;  }
<ul  class='chat-ul' style='margin-top: 10px'>  	<li class="chat-li incoming">by other user, first message</li>  	<li class="chat-li incoming">by other user, second message</li>  	<li class="chat-li incoming">by other user, third message</li>  	<li class="chat-li outgoing">by user, first message</li>  	<li class="chat-li outgoing">by user, secondmessage</li>  	<li class="chat-li outgoing">by user, third message</li>  	<li class="chat-li outgoing">by user, fourth message</li>  	<li class="chat-li incoming">by other user, first message</li>  	<li class="chat-li incoming">by other user, second message</li>  	<li class="chat-li incoming">by other user, third message</li>  </ul>

i think solution more simple think. first, if want have flexible possible put each "user-chat-item-history" in separate <ul> class .outgoing or .incoming. therefore need less css , whole script way more maintainable:

.chat-ul{    list-style: none;    margin: 0;    padding: 0;  }    .chat-ul .chat-li {    display:inline-block;    clear: both;    padding: 20px;    margin-bottom: 2px;    font-family: helvetica, arial, sans-serif;  }    .incoming .chat-li {    background: #eee;    float: left;    border-radius: 5px 30px 30px 5px;  }    .outgoing .chat-li{    float: right;    background: #0084ff;    color: #fff;    border-radius: 30px 5px 5px 30px;  }    .incoming .chat-li:first-child {    border-top-left-radius: 30px;  }    .incoming .chat-li:last-child {    border-bottom-left-radius: 30px;  }    .outgoing .chat-li:first-child {    border-top-right-radius: 30px;  }    .outgoing .chat-li:last-child {    border-bottom-right-radius: 30px;  }
<ul  class='chat-ul incoming' style='margin-top: 10px'>  	<li class="chat-li">by other user, first message</li>  	<li class="chat-li">by other user, second message</li>  	<li class="chat-li">by other user, third message</li>  </ul>    <ul  class='chat-ul outgoing' style='margin-top: 10px'>  	<li class="chat-li">by user, first message</li>  	<li class="chat-li">by user, secondmessage</li>  	<li class="chat-li">by user, third message</li>  	<li class="chat-li">by user, fourth message</li>  </ul>    <ul  class='chat-ul incoming' style='margin-top: 10px'>  	<li class="chat-li">by other user, first message</li>  	<li class="chat-li">by other user, second message</li>  	<li class="chat-li">by other user, third message</li>  </ul>


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -