Css chat
How do I make an css chat?
Chat for my personal project. What is a css chat? How do you make a css chat? This script and codes were developed by Roman Budnikov on 20 January 2023, Friday.
Css chat Previews
Css chat - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Css chat</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ 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;
}
.chat ul li { margin: 45px 0 0 0; font-weight: 300;
}
.chat ul li a.user { margin: -30px 0 0 0; display: block; color: #333;
}
.chat ul li a.user img { width: 65px; height: 65px; border-radius: 50%; background-color: #f3f3f3; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.chat ul li .date { font-size: 14px; color: #a6a6a6;
}
.chat ul li .message { display: block; padding: 10px; position: relative; color: #fff; font-size: 15px; background-color: #2ECC71; border-radius: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.chat ul li .message:before { content: ''; position: absolute; border-top: 16px solid rgba(0, 0, 0, 0.15); border-left: 16px solid transparent; border-right: 16px solid transparent;
}
.chat ul li .message:after { content: ''; position: absolute; top: 0; border-top: 17px solid #2ECC71; border-left: 17px solid transparent; border-right: 17px solid transparent;
}
.chat ul li .message.blur p { -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px);
}
.chat ul li .message.blur .hider { opacity: 1; z-index: 1;
}
.chat ul li .message p { margin: 0; padding: 0; transition: all 0.1s;
}
.chat ul li .message .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;
}
.chat ul li .message .hider span { display: block; position: relative; top: 50%; font-size: 16px; transform: translateY(-50%);
}
.chat ul li.other a.user { float: right;
}
.chat ul li.other .date { float: right; margin: -20px 10px 0 0;
}
.chat ul li.other .message { margin: 0 90px 0 0;
}
.chat ul li.other .message:before { margin: -9px -16px 0 0; right: 0;
}
.chat ul li.other .message:after { content: ''; right: 0; margin: 0 -15px 0 0;
}
.chat ul li.you a.user { float: left;
}
.chat ul li.you .date { float: left; margin: -20px 0 0 10px;
}
.chat ul li.you .message { margin: 0 0 0 90px;
}
.chat ul li.you .message:before { margin: -9px 0 0 -16px; left: 0;
}
.chat ul li.you .message:after { content: ''; left: 0; margin: 0 0 0 -15px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section> <div class="chat"> <ul> <li class="other"> <a class="user" href="#"><img alt="" src="https://s3.amazonaws.com/uifaces/faces/twitter/toffeenutdesign/128.jpg" /></a> <div class="date"> 2 minutes ago </div> <div class="message blur"> <div class="hider"> <span>Click to read</span> </div> <p> Itaque quod et dolore accusantium. Labore aut similique ab voluptas rerum quia. Reprehenderit voluptas doloribus ut nam tenetur ipsam. </p> </div> </li> <li class="other"> <a class="user" href="#"><img alt="" src="https://s3.amazonaws.com/uifaces/faces/twitter/toffeenutdesign/128.jpg" /></a> <div class="date"> 5 minutes ago </div> <div class="message"> <div class="hider"> <span>Click to read</span> </div> <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. </p> </div> </li> <li class="you"> <a class="user" href="#"><img alt="" src="https://s3.amazonaws.com/uifaces/faces/twitter/igorgarybaldi/128.jpg" /></a> <div class="date"> 7 minutes ago </div> <div class="message"> <div class="hider"> <span>Click to read</span> </div> <p> Provident impedit atque nemo culpa et modi molestiae. Error non dolorum voluptas non a. Molestiae et nobis nisi sed. </p> </div> </li> <li class="other"> <a class="user" href="#"><img alt="" src="https://s3.amazonaws.com/uifaces/faces/twitter/toffeenutdesign/128.jpg" /></a> <div class="date"> 8 minutes ago </div> <div class="message"> <div class="hider"> <span>Click to read</span> </div> <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. </p> </div> </li> <li class="you"> <a class="user" href="#"><img alt="" src="https://s3.amazonaws.com/uifaces/faces/twitter/igorgarybaldi/128.jpg" /></a> <div class="date"> 10 minutes ago </div> <div class="message"> <div class="hider"> <span>Click to read</span> </div> <p> Provident impedit atque nemo culpa et modi molestiae. Error non dolorum voluptas non a. Molestiae et nobis nisi sed. </p> </div> </li> <li class="you"> <a class="user" href="#"><img alt="" src="https://s3.amazonaws.com/uifaces/faces/twitter/igorgarybaldi/128.jpg" /></a> <div class="date"> 10 minutes ago </div> <div class="message"> <div class="hider"> <span>Click to read</span> </div> <p> Est ut at eum sed perferendis ea hic. Tempora perspiciatis magnam aspernatur explicabo ea. Sint atque quod. </p> </div> </li> </ul> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Css chat - Script Codes CSS Codes
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;
}
.chat ul li { margin: 45px 0 0 0; font-weight: 300;
}
.chat ul li a.user { margin: -30px 0 0 0; display: block; color: #333;
}
.chat ul li a.user img { width: 65px; height: 65px; border-radius: 50%; background-color: #f3f3f3; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.chat ul li .date { font-size: 14px; color: #a6a6a6;
}
.chat ul li .message { display: block; padding: 10px; position: relative; color: #fff; font-size: 15px; background-color: #2ECC71; border-radius: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.chat ul li .message:before { content: ''; position: absolute; border-top: 16px solid rgba(0, 0, 0, 0.15); border-left: 16px solid transparent; border-right: 16px solid transparent;
}
.chat ul li .message:after { content: ''; position: absolute; top: 0; border-top: 17px solid #2ECC71; border-left: 17px solid transparent; border-right: 17px solid transparent;
}
.chat ul li .message.blur p { -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px);
}
.chat ul li .message.blur .hider { opacity: 1; z-index: 1;
}
.chat ul li .message p { margin: 0; padding: 0; transition: all 0.1s;
}
.chat ul li .message .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;
}
.chat ul li .message .hider span { display: block; position: relative; top: 50%; font-size: 16px; transform: translateY(-50%);
}
.chat ul li.other a.user { float: right;
}
.chat ul li.other .date { float: right; margin: -20px 10px 0 0;
}
.chat ul li.other .message { margin: 0 90px 0 0;
}
.chat ul li.other .message:before { margin: -9px -16px 0 0; right: 0;
}
.chat ul li.other .message:after { content: ''; right: 0; margin: 0 -15px 0 0;
}
.chat ul li.you a.user { float: left;
}
.chat ul li.you .date { float: left; margin: -20px 0 0 10px;
}
.chat ul li.you .message { margin: 0 0 0 90px;
}
.chat ul li.you .message:before { margin: -9px 0 0 -16px; left: 0;
}
.chat ul li.you .message:after { content: ''; left: 0; margin: 0 0 0 -15px;
}Css chat - Script Codes JS Codes
(function() { $('.hider').click(function() { return $(this).parent('.message').removeClass('blur'); });
}).call(this);
| Developer | Roman Budnikov |
| Username | supro |
| Uploaded | January 20, 2023 |
| Rating | 4 |
| Size | 5,724 Kb |
| Views | 10,120 |
Do you need developer help for Css chat?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Roman Budnikov (supro) Script Codes
| Name | Size |
| Rating | 2,426 Kb |
| App header | 4,968 Kb |
| Foundle.com redesign | 9,901 Kb |
| 404 page | 64,234 Kb |
| AngularJS Skills | 3,312 Kb |
| Flat animated buttons | 3,210 Kb |
| Letter | 3,032 Kb |
| Rodeo-004 example | 10,586 Kb |
| Flex barcket | 3,460 Kb |
| Compact menu | 3,181 Kb |
Create amazing Facebook ads with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
| Android Logo with HTML and CSS | Wifi | 2,000 Kb |
| Day 1 - Portfolio | Chpecson | 3,532 Kb |
| Testing Code Pen | Jduprey | 1,468 Kb |
| Ghost Buttons with CSS3 | Mithicher | 2,509 Kb |
| Button shaking | SusanneLundblad | 2,227 Kb |
| Tab panels | Accessibility | 0 Kb |
| A Pen by Tosh | Panev | 2,586 Kb |
| Twitch TV | Natester13 | 4,488 Kb |
| Cars going | Netoguimaraes | 1,699 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!