Chat for my personal project
Forked from Roman Budnikov's Pen Css chat.
A Pen by Bright Spark on CodePen.
Chat for my personal project
Forked from Roman Budnikov's Pen Css chat.
A Pen by Bright Spark on CodePen.
section | |
.chat | |
ul | |
li.other | |
a.user href="#" | |
img src="https://s3.amazonaws.com/uifaces/faces/twitter/toffeenutdesign/128.jpg" alt='' | |
.date 2 minutes ago | |
.message.blur | |
.hider | |
span Click to read | |
p Itaque quod et dolore accusantium. Labore aut similique ab voluptas rerum quia. Reprehenderit voluptas doloribus ut nam tenetur ipsam. | |
li.other | |
a.user href="#" | |
img src="https://s3.amazonaws.com/uifaces/faces/twitter/toffeenutdesign/128.jpg" alt='' | |
.date 5 minutes ago | |
.message | |
.hider | |
span Click to read | |
p Modi ratione aliquid non. Et porro deserunt illum sed velit necessitatibus. Quis fuga et et fugit consequuntur. Et veritatis fugiat veniam pariatur maxime iusto aperiam. | |
li.you | |
a.user href="#" | |
img src="https://s3.amazonaws.com/uifaces/faces/twitter/igorgarybaldi/128.jpg" alt='' | |
.date 7 minutes ago | |
.message | |
.hider | |
span Click to read | |
p Provident impedit atque nemo culpa et modi molestiae. Error non dolorum voluptas non a. Molestiae et nobis nisi sed. | |
li.other | |
a.user href="#" | |
img src="https://s3.amazonaws.com/uifaces/faces/twitter/toffeenutdesign/128.jpg" alt='' | |
.date 8 minutes ago | |
.message | |
.hider | |
span Click to read | |
p Id vel ducimus perferendis fuga excepturi nulla. Dolores dolores amet et laborum facilis. Officia magni ut non autem et qui incidunt. Qui similique fugit vero porro qui cupiditate. | |
li.you | |
a.user href="#" | |
img src="https://s3.amazonaws.com/uifaces/faces/twitter/igorgarybaldi/128.jpg" alt='' | |
.date 10 minutes ago | |
.message | |
.hider | |
span Click to read | |
p Provident impedit atque nemo culpa et modi molestiae. Error non dolorum voluptas non a. Molestiae et nobis nisi sed. | |
li.you | |
a.user href="#" | |
img src="https://s3.amazonaws.com/uifaces/faces/twitter/igorgarybaldi/128.jpg" alt='' | |
.date 10 minutes ago | |
.message | |
.hider | |
span Click to read | |
p Est ut at eum sed perferendis ea hic. Tempora perspiciatis magnam aspernatur explicabo ea. Sint atque quod. |
$('.hider').click ()-> | |
$(@).parent('.message').removeClass('blur') |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
$font-color: #fff; | |
$font-color-alter: #333; | |
$message-color: #2ECC71; | |
body { | |
background-color: #f3f3f3; | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
} | |
section { | |
width: 500px; | |
margin: 60px auto; | |
background-color: #fff; | |
padding: 10px 15px 20px 15px; | |
} | |
.chat { | |
ul { | |
list-style: none; | |
padding: 0; | |
margin: 0; | |
li { | |
margin: 45px 0 0 0; | |
font-weight: 300; | |
a.user { | |
margin: -30px 0 0 0; | |
display: block; | |
color: $font-color-alter; | |
img { | |
width: 65px; | |
height: 65px; | |
border-radius: 50%; | |
background-color: #f3f3f3; | |
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); | |
} | |
} | |
.date { | |
font-size: 14px; | |
color: lighten($font-color-alter, 45); | |
} | |
.message { | |
display: block; | |
padding: 10px; | |
position: relative; | |
color: $font-color; | |
font-size: 15px; | |
background-color: $message-color; | |
border-radius: 3px; | |
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); | |
&:before{ | |
content: ''; | |
position: absolute; | |
border-top: 16px solid rgba(0,0,0,0.15); | |
border-left: 16px solid transparent; | |
border-right: 16px solid transparent; | |
} | |
&:after { | |
content: ''; | |
position: absolute; | |
top: 0; | |
border-top: 17px solid $message-color; | |
border-left: 17px solid transparent; | |
border-right: 17px solid transparent; | |
} | |
&.blur { | |
p { | |
-webkit-filter: blur(3px); | |
-moz-filter: blur(3px); | |
-o-filter: blur(3px); | |
-ms-filter: blur(3px); | |
filter: blur(3px); | |
} | |
.hider{ | |
opacity: 1; | |
z-index: 1; | |
} | |
} | |
p { | |
margin: 0; | |
padding: 0; | |
transition: all 0.1s; | |
} | |
.hider { | |
opacity: 0; | |
z-index: -1; | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
margin: -10px; | |
text-align: center; | |
cursor: pointer; | |
transform-style: preserve-3d; | |
transition: all 0.1s; | |
span { | |
display: block; | |
position: relative; | |
top: 50%; | |
font-size: 16px; | |
transform: translateY(-50%); | |
} | |
} | |
} | |
} | |
li.other { | |
a.user { | |
float: right; | |
} | |
.date { | |
float: right; | |
margin: -20px 10px 0 0; | |
} | |
.message { | |
margin: 0 90px 0 0; | |
&:before { | |
margin: -9px -16px 0 0; | |
right: 0; | |
} | |
&:after{ | |
content: ''; | |
right: 0; | |
margin: 0 -15px 0 0; | |
} | |
} | |
} | |
li.you { | |
a.user { | |
float: left; | |
} | |
.date { | |
float: left; | |
margin: -20px 0 0 10px; | |
} | |
.message { | |
margin: 0 0 0 90px; | |
&:before { | |
margin: -9px 0 0 -16px; | |
left: 0; | |
} | |
&:after{ | |
content: ''; | |
left: 0; | |
margin: 0 0 0 -15px; | |
} | |
} | |
} | |
} | |
} |