When it comes to designing a website, the details matter. One often overlooked element is the speech bubble design for chat interfaces or comment sections. In this article, we’ll explore how to create stylish and engaging pure CSS speech bubbles for your website using the provided source code.
User engagement is a critical aspect of web design, and chat interfaces are an excellent way to achieve this. However, to make your chat interface visually appealing and user-friendly, you need to pay attention to the design of speech bubbles. This article will guide you through creating visually appealing pure CSS speech bubbles using the provided source code.
Understanding the Source Code
The source code provided includes an HTML file (chatz.html) and a CSS file (style.css). The HTML file contains the basic structure of a chat interface, while the CSS file defines the styles for the chat bubbles.
- HTML Structure: The HTML file sets up the chat interface with div elements representing chat bubbles. Each bubble has a sender’s name, a message, and a timestamp. There are also alternative chat bubbles that appear on the right side of the screen.
- CSS Styles: The CSS file provides styles for the chat bubbles, including their dimensions, background colors, font styles, and arrow positioning. The design aims to create visually appealing speech bubbles for the chat interface.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html> <head> <title>Chat Whatsapp-Looks-Like</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="speech-wrapper"> <div class="bubble"> <div class="txt"> <p class="name">Benni</p> <p class="message">Hey, check out this Pure CSS speech bubble...</p> <span class="timestamp">10:20 pm</span> </div> <div class="bubble-arrow"></div> </div> <!-- Speech Bubble alternative --> <div class="bubble alt"> <div class="txt"> <p class="name alt">+334 345 1234 567<span> ~ John</span></p> <p class="message">Nice... this will work great for my new project.</p> <span class="timestamp">10:22 pm</span> </div> <div class="bubble-arrow alt"></div> </div> <br> <!-- Speech Bubble alternative --> <div class="bubble alt"> <div class="txt"> <p class="name alt">+334 345 1234 567<span> ~ John</span></p> <p class="message">How about this.</p> <span class="timestamp">10:22 pm</span> </div> <div class="bubble-arrow alt"></div> </div> </div> </body> </html> |
chatz.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
body{ margin: 0; font-family: Arial, Helvetica, sans-serif; background: url('http://forums.crackberry.com/attachments/blackberry-10-wallpapers-f308/137432d1361639896t-z10-wallpaper-set-z10-music.jpg'); } .speech-wrapper{ padding: 30px 40px; .bubble{ width: 240px; height: auto; display: block; background: #f5f5f5; border-radius: 4px; box-shadow: 2px 8px 5px #000; position: relative; margin: 0 0 25px; &.alt{ margin: 0 0 0 60px; } .txt{ padding: 8px 55px 8px 14px; .name{ font-weight: 600; font-size: 12px; margin: 0 0 4px; color: #3498db; span{ font-weight: normal; color: #b3b3b3; } &.alt{ color: #2ecc71; } } .message{ font-size: 12px; margin: 0; color: #2b2b2b; } .timestamp{ font-size: 11px; position: absolute; bottom: 8px; right: 10px; text-transform: uppercase; color: #999 } } .bubble-arrow { position: absolute; width: 0; bottom:42px; left: -16px; height: 0; &.alt{ right: -2px; bottom: 40px; left: auto; } } .bubble-arrow:after { content: ""; position: absolute; border: 0 solid transparent; border-top: 9px solid #f5f5f5; border-radius: 0 20px 0; width: 15px; height: 30px; transform: rotate(145deg); } .bubble-arrow.alt:after { transform: rotate(45deg) scaleY(-1); } } } |
style.css
Creating Your Speech Bubbles
Now that we have the source code, you can customize and expand on it to create speech bubbles that match your website’s design. Here’s a step-by-step guide on how to do it:
1. Customize the Colors and Styles
In the style.css file, you can easily customize the appearance of the speech bubbles. You can change the background color, font styles, and bubble dimensions to match your website’s aesthetics. For instance, you can update the background property to choose a different color or add background images.
2. Adjust Bubble Dimensions
If you want larger or smaller bubbles, you can modify the width and height properties in the CSS. This allows you to create speech bubbles that are visually consistent with the rest of your website’s design.
3. Modify Bubble Shadows
The box-shadow property in the CSS controls the shadow effect of the speech bubbles. You can adjust the values to change the intensity and direction of the shadow, giving your bubbles a more realistic 3D appearance.
4. Personalize the Sender Information
You can change the sender’s name, message, and timestamp in the HTML file. This is where you add the actual content for your chat interface. Customize the names, messages, and timestamps to match the context of your website.
5. Experiment with Alternative Bubbles
The source code provides alternative chat bubbles that appear on the right side of the screen. You can use these for different types of messages, such as user replies or system notifications. Customize these alternative bubbles as needed.
6. Test and Iterate
As you make changes, be sure to test your chat interface in different browsers and devices to ensure it looks and functions correctly. Make adjustments based on user feedback and your own design preferences.
Creating stylish and visually appealing chat interfaces is essential for engaging your website’s visitors. With the provided source code and the ability to customize the CSS, you can design speech bubbles that match your website’s unique style. Pay attention to details like colors, dimensions, and shadows to make your chat interface stand out. Experiment with alternative chat bubbles for different message types. By following these steps, you can create a chat interface that not only looks great but also enhances user engagement on your website.
