Message Bubble

Developer
Albert Filice
Size
2,024 Kb
Views
52,624
  1. Message Bubble Previews
  2. Message Bubble HTML Codes
  3. Message Bubble CSS Codes
  4. Message Bubble JS Codes

How do I make an message bubble?

Found it here, tried to replicate it in CSShttp://dribbble.com/shots/652216-Chat?list=everyoneCan't get the shadow to work quite perfectly.... What is a message bubble? How do you make a message bubble? This script and codes were developed by Albert Filice on 26 August 2022, Friday.

Message Bubble Previews
IQ Test

Message Bubble - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Message Bubble</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="chat-bubble">···</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Message Bubble - Script Codes CSS Codes

body { background-color: #4DBD9D;
}
div { margin: 80px auto;
}
.chat-bubble { position: relative; width: 46px; height: 31px; border-radius: 6px; background-color: #fff; box-shadow: 3px 3px 0px 0px #2A6C5A; color: #4DBD9D; text-align: center; line-height: 32px; font-size: 2.5em;
}
.chat-bubble:before { content: ''; position: absolute; width: 0px; height: 0px; border-top: 5px solid #fff; border-left: 5px solid #fff; border-right: 5px solid transparent; border-bottom: 5px solid transparent; top: 31px; left: 8px; z-index: 2;
}
.chat-bubble:after { content: ''; position: absolute; width: 0px; height: 0px; border-top: 6px solid #2A6C5A; border-left: 6px solid #2A6C5A; border-right: 6px solid transparent; border-bottom: 6px solid transparent; top: 31px; left: 12px; z-index: 1;
}

Message Bubble - Script Codes JS Codes

/*
Found the idea here:
http://dribbble.com/shots/652216-Chat
*/
Message Bubble - Script Codes
Message Bubble - Script Codes
Home Page Home
Developer Albert Filice
Username monstersaurous
Uploaded August 26, 2022
Rating 3
Size 2,024 Kb
Views 52,624
Do you need developer help for Message Bubble?

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!

Albert Filice (monstersaurous) Script Codes
Name
Single Element Icons
Single Element Wine Glass
CSS Spaceship
CSS Elephant
Single Element Loader
CNIT 133 - Homework 4 - Part 6
Single Element Google Inbox Sun
Single Element Solar Eclipse Animation
CSS Gameboy
Single Element Dribbble Logo
Create amazing love letters 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!