ios sms css

<section> <div class="from-me"> <p>Hey there! What's up?</p> </div> <div class="clear"></div> <div class="from-them"> <p>Checking out iOS7 you know..</p> </div> <div class="clear"></div> <div class="from-me"> <p>Check out this bubble!</p> </div> <div class="clear"></div> <div class="from-them"> <p>It's pretty cool!</p> </div> <div class="clear"></div> <div class="from-me"> <p>Yeah it's pure CSS & HTML</p> </div> <div class="clear"></div> <div class="from-them"> <p>Wow that's impressive. But what's even more impressive is that this bubble is really high.</p> </div> </section>

ios sms css

body {
  font-family: "Helvetica Neue";
  font-size: 20px;
  font-weight: normal;
}

section {
  max-width: 450px;
  margin: 50px auto;
}
section div {
  max-width: 255px;
  word-wrap: break-word;
  margin-bottom: 20px;
  line-height: 24px;
}

.clear {
  clear: both;
}

.from-me {
  position: relative;
  padding: 10px 20px;
  color: white;
  background: #0B93F6;
  border-radius: 25px;
  float: right;
}
.from-me:before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -2px;
  right: -7px;
  height: 20px;
  border-right: 20px solid #0B93F6;
  border-bottom-left-radius: 16px 14px;
  -webkit-transform: translate(0, -2px);
}
.from-me:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -2px;
  right: -56px;
  width: 26px;
  height: 20px;
  background: white;
  border-bottom-left-radius: 10px;
  -webkit-transform: translate(-30px, -2px);
}

.from-them {
  position: relative;
  padding: 10px 20px;
  background: #E5E5EA;
  border-radius: 25px;
  color: black;
  float: left;
}
.from-them:before {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -2px;
  left: -7px;
  height: 20px;
  border-left: 20px solid #E5E5EA;
  border-bottom-right-radius: 16px 14px;
  -webkit-transform: translate(0, -2px);
}
.from-them:after {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: -2px;
  left: 4px;
  width: 26px;
  height: 20px;
  background: white;
  border-bottom-right-radius: 10px;
  -webkit-transform: translate(-30px, -2px);
}

Posted by: Guest on February-20-2020

Source

Code answers related to "ios sms css"

Code answers related to "CSS"

CSS Answers by Framework

Browse Popular Code Answers by Language

Answers for "ios sms css"

Code answers related to "ios sms css"

Code answers related to "CSS"

CSS Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us