Not: Yayımladıktan sonra değişiklikleri görmeniz için tarayıcınızın önbelleğini temizlemeniz gerekebilir.
- Firefox / Safari: Shift tuşuna basılıyken Yeniden Yükle'ye tıklayın ya da Ctrl-F5 ya da Ctrl-R tıklayın (Mac için ⌘-R)
- Google Chrome: Ctrl-Shift-R'ye basın. (Mac için ⌘-Shift-R)
- Edge: Ctrl basılıyken Yenile'ye tıklayın ya da Ctrl-F5'e basın.
/*üst konuşma balonları*/
.bubble-k {
height: 25px;
vertical-align: text-top;
position: relative;
background: #faaaaa;
border-radius: 20px;
padding: 15px;
}
.bubble-altsag-k:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid transparent;
border-right: 12px solid #faaaaa;
border-top: 6px solid #faaaaa;
border-bottom: 10px solid transparent;
right: 32px;
bottom: -14px;
}
.bubble-alt-k:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 12px solid #faaaaa;
border-right: 6px solid transparent;
border-top: 6px solid #faaaaa;
border-bottom: 10px solid transparent;
left: 32px;
bottom: -14px;
}
.bubble-yan-k:before {
background-color: #faaaaa;
content: "\00a0";
display: block;
height: 18px;
position: absolute;
top: 13px;
transform: rotate( 45deg ) ;
-moz-transform: rotate( 45deg ) ;
-ms-transform: rotate( 45deg ) ;
-o-transform: rotate( 45deg ) ;
-webkit-transform: rotate( 45deg ) ;
width: 17px;
}
.bubble-k-sh {
height: 25px;
vertical-align: text-top;
box-shadow: 0 0 5px #B2B2B2;
position: relative;
background: #faaaaa;
border-radius: 20px;
padding: 15px;
}
.bubble-t {
height: 25px;
position: relative;
background: #fce083;
border-radius: 20px;
padding: 15px;
}
.bubble-altsag-t:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid transparent;
border-right: 12px solid #fce083;
border-top: 6px solid #fce083;
border-bottom: 10px solid transparent;
right: 32px;
bottom: -14px;
}
.bubble-alt-t:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 12px solid #fce083;
border-right: 6px solid transparent;
border-top: 6px solid #fce083;
border-bottom: 10px solid transparent;
left: 32px;
bottom: -14px;
}
.bubble-yan-t:before {
background-color: #fce083;
content: "\00a0";
display: block;
height: 18px;
position: absolute;
top: 13px;
transform: rotate( 45deg ) ;
-moz-transform: rotate( 45deg ) ;
-ms-transform: rotate( 45deg ) ;
-o-transform: rotate( 45deg ) ;
-webkit-transform: rotate( 45deg ) ;
width: 17px;
}
.bubble-t-sh {
height: 25px;
box-shadow: 0 0 5px #B2B2B2;
position: relative;
background: #fce083;
border-radius: 20px;
padding: 15px;
}
.bubble-y {
height: 25px;
position: relative;
background: #aafa9d;
border-radius: 20px;
padding: 15px;
}
.bubble-altsag-y:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid transparent;
border-right: 12px solid #aafa9d;
border-top: 6px solid #aafa9d;
border-bottom: 10px solid transparent;
right: 32px;
bottom: -14px;
}
.bubble-alt-y:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 12px solid #aafa9d;
border-right: 6px solid transparent;
border-top: 6px solid #aafa9d;
border-bottom: 10px solid transparent;
left: 32px;
bottom: -14px;
}
.bubble-yan-y:before {
background-color: #aafa9d;
content: "\00a0";
display: block;
height: 18px;
position: absolute;
top: 13px;
transform: rotate( 45deg ) ;
-moz-transform: rotate( 45deg ) ;
-ms-transform: rotate( 45deg ) ;
-o-transform: rotate( 45deg ) ;
-webkit-transform: rotate( 45deg ) ;
width: 17px;
}
.bubble-y-sh {
height: 25px;
box-shadow: 0 0 5px #B2B2B2;
position: relative;
background: #aafa9d;
border-radius: 20px;
padding: 15px;
}
.bubble-m {
height: 25px;
position: relative;
background: #81bffc;
border-radius: 20px;
padding: 15px;
}
.bubble-altsag-m:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid transparent;
border-right: 12px solid #81bffc;
border-top: 6px solid #81bffc;
border-bottom: 10px solid transparent;
right: 32px;
bottom: -14px;
}
.bubble-alt-m:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 12px solid #81bffc;
border-right: 6px solid transparent;
border-top: 6px solid #81bffc;
border-bottom: 10px solid transparent;
left: 32px;
bottom: -14px;
}
.bubble-yan-m:before {
background-color: #81bffc;
content: "\00a0";
display: block;
height: 18px;
position: absolute;
top: 13px;
transform: rotate( 45deg ) ;
-moz-transform: rotate( 45deg ) ;
-ms-transform: rotate( 45deg ) ;
-o-transform: rotate( 45deg ) ;
-webkit-transform: rotate( 45deg ) ;
width: 17px;
}
.bubble-m-sh {
height: 25px;
box-shadow: 0 0 5px #B2B2B2;
position: relative;
background: #81bffc;
border-radius: 20px;
padding: 15px;
}
.bubble {
height: 25px;
position: relative;
background: #ddd;
border-radius: 20px;
padding: 15px;
}
.bubble-sh {
height: 25px;
box-shadow: 0 0 5px #B2B2B2;
position: relative;
background: #ddd;
border-radius: 20px;
padding: 15px;
}
.bubble-altsag-golge:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid transparent;
border-right: 12px solid #ddd;
border-top: 6px solid #ddd;
border-bottom: 10px solid transparent;
right: 32px;
bottom: -14px;
}
.bubble-alt-golge:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 12px solid #ddd;
border-right: 6px solid transparent;
border-top: 6px solid #ddd;
border-bottom: 10px solid transparent;
left: 32px;
bottom: -14px;
}
.bubble-yan-golge:before {
background-color: #ddd;
content: "\00a0";
display: block;
height: 18px;
position: absolute;
top: 13px;
transform: rotate( 45deg ) ;
-moz-transform: rotate( 45deg ) ;
-ms-transform: rotate( 45deg ) ;
-o-transform: rotate( 45deg ) ;
-webkit-transform: rotate( 45deg ) ;
width: 17px;
}
.me {
margin: 5px 15px 5px 15px;
}
.me::before {
left: -6px;
}
.you {
margin: 5px 15px 5px 15px;
}
.you::before {
right: -6px;
}