Selam süt abi!
Süt abi?
Aynı ailedeniz. Sen süt, ben süt dilimi.
Hiç komik değil. Süt benim.
Ama bende de var.
Gerçekten mi?
Bizim attığımız mesajları “giden” karşıdan gelenleri ise “gelen” olarak sınıflara ayırdık ve her mesajın arasını “clear” divi ile temizledik.
Adım 2: Sayfa içi font ayarları
body {
font-family: "Helvetica Neue";
font-size: 20px;
font-weight: normal;
}Adım 3: HTML5 section tagi özellikleri.
section {
max-width: 450px;
margin: 50px auto;
div {
max-width: 255px;
word-wrap: break-word;
margin-bottom: 20px;
line-height: 24px;
}
}Adım 4: Clear divi ve giden mesajın div özellikleri.
.clear {clear: both}
.giden {
position:relative;
padding:10px 20px;
color:white;
background:#0B93F6;
border-radius:25px;
float: right;
&: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);
}
&: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);
}
}Adım 5: Karşıdan gelen mesajın div özellikleri.
.gelen {
position:relative;
padding:10px 20px;
background:#E5E5EA;
border-radius:25px;
color: black;
float: left;
&: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);
}
&: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);
}
}Site içi chat uygulaması yapacak olanlar için faydalı olabilir.
Kaynak / Önizleme: iOS7 tarzı konuşma balonları (CSS)
