Shulou(Shulou.com)06/02 Report--

CSS3 how to achieve imitating Wechat chat bubble, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Today, I would like to share with you a small case of a project I just worked on. Because we are doing a chat function, the previous chat page UI is very ugly, so I will not show it to you here.

Now let's teach you how to use css3 to make a page that is the same as the Wechat chat interface.

First of all, let's show you what the page looks like, as shown in the following figure:

Xiaoyue blog imitates Wechat chat interface

This is what the page looks like, so let's learn the production steps together.

Part one: HTML

Idiot, you look stupid!

Hee.

What are you laughing at? can't you see I'm prettier today?

No, you look beautiful every day! Part II: CSS3

PS (here is also the most important part, I will show all the code! )

/ * Wechat Bubble * / div.speech {float: left; margin: 10px 0; padding: 8px; table-layout: fixed; word-break: break-all; position: relative; background:-webkit-gradient (linear, 50%, 50% 100%, from (# ffffff), color-stop (0.1, # ececec), color-stop (0.5, # dbdbdb), color-stop (0.9, # dcdcdc), to (# 8c8c8c)) Border: 1px solid # 989898; border-radius: 8px;} div.speech:before {content:'; position: absolute; width: 0; height: 0; left: 15px; top:-20px; border: 10px solid; border-color: transparent transparent # 989898 transparent;} div.speech:after {content:'; position: absolute; width: 0; height: 0; left: 17px; top:-16px; border: 8px solid Border-color: transparent transparent # ffffff transparent;} div.speech.right {display: inline-block; box-shadow:-2px 2px 5px # CCC; margin-right: 10px; max-width: 75%; float: right; background:-webkit-gradient (linear, 50%, 50% 100%, from (# e4ffa7), color-stop (0.1, # bced50), color-stop (0.4, # aed943), color-stop (0.8, # a7d143), to (# 99BF40)) } div.speech.right:before {content:'; position: absolute; width: 0; height: 0; top: 9px; bottom: auto; left: auto; right:-10px; border-width: 9px 0 9px 10px; border-color: transparent # 989898;} div.speech.right:after {content:'; position: absolute; width: 0; height: 0; top: 10px; bottom: auto; left: auto; right:-8px; border-width: 8px 0 8px 9px; border-color: transparent # bced50 } div .left {display: inline-block; box-shadow: 2px 2px 2px # CCCCCC; margin-left: 10px; max-width: 75%; position: relative; background:-webkit-gradient (linear, 50%, 50% 100%, from (# ffffff), color-stop (0.1,# eae8e8), color-stop (0.4,# E3E3E3), color-stop (0.8,# DFDFDF), to (# D9D9D9);} div .left: before {content:'; position: absolute; width: 0 Height: 0; top: 9px; bottom: auto; left:-10px; border-width: 9px 10px 9px 0; border-color: transparent # 989898;} div .left: after {content:'; position: absolute; width: 0; height: 0; top: 10px; bottom: auto; left:-8px; border-width: 8px 9px 8px 0; border-color: transparent # eae8e8;}. Leftimg {float: left; margin-top: 10px;}. Rightimg {float: right; margin-top: 10px;}. Leftd {clear: both; float: left Margin-left: 10px;}. Rightd {clear: both; float: right; margin-right: 10px;} .leftd_h {width: 39px; height: 39px; border-radius: 100%; display: block; float: left; overflow: hidden;}. Leftd_h img {display: block; width: 100%; height: auto;}. Rightd_h {width: 39px; height: 39px; border-radius: 100%; display: block; float: right; overflow: hidden;}. Rightd_h img {display: block; width: 100%; height: auto;}

Here is basically the use of CSS pseudo-class elements, to make small bubbles. There are many cases on the Internet where the profile picture of the user chat is used as the background picture, but I feel that this is not very suitable in the actual project, so I made some changes, but we are more practical.

After reading the above, have you mastered how CSS3 can imitate the Wechat chat bubble? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.