CODEWITHSUNDEEP
htmlcsschat
Neha
Neha

Reputation: 21

Chat window with css

I am stuck with a chat window which we create with the help of CSS after, before elements. My code is added below. My questions are:

  1. Why do we set content if it's blank?
  2. Why the position is changed to absolute in :after and :before?
  3. Main question is: how are we drawing the arrow on the left side?

.bubble {
  position: relative;
  width: 580px;
  min-height: 65px;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ccc;
  margin-left: 50px;
  margin-top: 59px;
}

.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  display: block;
  width: 0;
  z-index: 1;
  margin-top: -15px;
  left: -15px;
  top: 50%;
  border-color: transparent #fff;
}

.bubble:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  display: block;
  width: 0;
  z-index: 0;
  margin-top: -15px;
  left: -16px;
  top: 50%;
  border-color: transparent red;
}
<html>

<body>
  <div class="bubble">
    <div class="Pointer">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Views: 1508

Answers (4)

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92447

  1. Because it is the way the css works :P
  2. Absolute is used to To better control position (however it is relative to parent)
  3. Here trick is used - arrow on left side is created by red and white triangles (white is on red, but overlap it in this way that 1px boundary of red is visible). Triangles are draw using thick borders of div elements - it is better visible on below example:

Look here: https://jsfiddle.net/q30Lnbfr/

 .test1 {
    border-style: solid;
    border-width: 15px 15px 15px 0;
    width: 0;
    border-color: transparent red;
}

 .test2 {
    border-style: solid;
    border-width: 15px 15px 15px 15px;
    width: 30px;
    border-color: green red;
}

<div class="test1">

</div>
<br>
 <div class="test2">

</div>

Upvotes: 0

Abhishek
Abhishek

Reputation: 529

For the question "how are we drawing the arrow on left side": The triangle shape is achieved by the css pseudo class .bubble:after wherein we have border width given as 15px 15px 15px 0px for the border width top, right, bottom and left styles. For more such css tricks please refer here.

Upvotes: 0

J. Robinson
J. Robinson

Reputation: 929

1) The reason you set content as blank is to tell the HTML that you still want the element to show up. If you dont set the content to a blank string (i.e. content: '';) then the element doesn't show up.

If you remove the content: ''; line inside your .bubble:after you'll get the following snippet. Which then makes that red arrow filled in.

2) You want the element to be an absolute position to the parent element. So it will always be in the exact location you want it to be.

3) You are drawing the arrow using the .bubble:before selector, and the border-color property. If you remove transparent from the border-color property inside your .bubble:before selector you get a square. not the nice looking triangle.

Overall, since you're learning CSS, and I'm assuming you're following tutorials, I would suggest if you dont know how something works either comment ONE line out at a time, and then refresh your page. See if any visible changes are on the screen.

To answer this question I got rid of a single line and then refreshed to see how your code was written. Then put it back if i didn't like the changes. :D

.bubble {
  position: relative; 
  width: 580px;
  min-height: 65px;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ccc;
  margin-left: 50px;
  margin-top: 59px;
}

.bubble:after {
  position: absolute;
  border-style: solid; 
  border-width: 15px 15px 15px 0; 
  display: block;
  width: 0;
  z-index: 1;
  margin-top:-15px;
  left: -15px;
  top:50%;
  border-color: transparent #fff;
}

.bubble:before {
  content: ''; 
  position: absolute;
  border-style: solid; 
  border-width: 15px 15px 15px 0;
  display: block;
  width: 0;
  z-index: 0;
  margin-top:-15px;
  left:-16px;
  top: 50%;
  border-color: transparent red;
}
<html>
 <head>
</head>
<body>
    <div class="bubble">
            <div class="Pointer">
             <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
                industry. 
             </p>
            </div>
    </div>
 </body>
</html>

Upvotes: 2

Chris Cousins
Chris Cousins

Reputation: 1912

The empty content is simply a way to create a styled "object" that doesn't really contain any "content". The position is referring to the position of the "styled but empty thing" before and after your "bubble", it does not refer to the position of the bubble itself.

Upvotes: 0

Related Questions