Single element speech bubble

Developer
Nick Nikolov
Size
3,191 Kb
Views
20,240
  1. Single element speech bubble Previews
  2. Single element speech bubble HTML Codes
  3. Single element speech bubble CSS Codes

How do I make an single element speech bubble?

Single div speech bubble with color variant mixin. What is a single element speech bubble? How do you make a single element speech bubble? This script and codes were developed by Nick Nikolov on 17 October 2022, Monday.

Single element speech bubble Previews
IQ Test

Single element speech bubble - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single element speech bubble</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! */ .container { margin: 50px auto; max-width: 300px;
}
.speech-bubble { padding: 20px; background: #EEEEEE; color: #000000; position: relative; box-shadow: rgba(0, 0, 0, 0.5) 0 3px 5px -3px; margin: 20px 0;
}
.speech-bubble:after { content: ''; display: block; width: 0; height: 0; border-style: solid; position: absolute; top: 0px; border-color: #EEEEEE;
}
.speech-bubble.speech-bubble-left { margin-left: 20px; border-radius: 0 4px 4px 4px;
}
.speech-bubble.speech-bubble-left:after { border-width: 0 20px 24px 0; border-top-color: transparent !important; border-left-color: transparent !important; border-bottom-color: transparent !important; left: -20px;
}
.speech-bubble.speech-bubble-right { margin-right: 20px; border-radius: 4px 0 4px 4px;
}
.speech-bubble.speech-bubble-right:after { border-width: 0 0 24px 20px; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; right: -20px;
}
.speech-bubble.speech-bubble-bottom-right { margin-bottom: 40px; border-radius: 4px;
}
.speech-bubble.speech-bubble-bottom-right:after { border-width: 0 24px 20px 0; border-top-color: transparent !important; border-left-color: transparent !important; border-bottom-color: transparent !important; top: auto; right: 20px; bottom: -20px;
}
.speech-bubble.speech-bubble-bottom-left { margin-bottom: 40px; border-radius: 4px;
}
.speech-bubble.speech-bubble-bottom-left:after { border-width: 0 0 20px 24px; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; top: auto; left: 20px; bottom: -20px;
}
.speech-bubble.speech-bubble-red { color: #000000; background: #F44336;
}
.speech-bubble.speech-bubble-red:after { border-color: #F44336;
}
.speech-bubble.speech-bubble-purple { color: #ffffff; background: #9C27B0;
}
.speech-bubble.speech-bubble-purple:after { border-color: #9C27B0;
}
.speech-bubble.speech-bubble-green { color: #000000; background: #8BC34A;
}
.speech-bubble.speech-bubble-green:after { border-color: #8BC34A;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container">
<div class="speech-bubble speech-bubble-right"> I'm in a bubble from right
</div>
<div class="speech-bubble speech-bubble-left speech-bubble-purple"> I'm in a bubble from left
</div> <div class="speech-bubble speech-bubble-bottom-right speech-bubble-green"> I'm in a bubble from bottom
</div> <div class="speech-bubble speech-bubble-bottom-left speech-bubble-red"> I'm in a bubble from bottom
</div>
</div>
</body>
</html>

Single element speech bubble - Script Codes CSS Codes

.container { margin: 50px auto; max-width: 300px;
}
.speech-bubble { padding: 20px; background: #EEEEEE; color: #000000; position: relative; box-shadow: rgba(0, 0, 0, 0.5) 0 3px 5px -3px; margin: 20px 0;
}
.speech-bubble:after { content: ''; display: block; width: 0; height: 0; border-style: solid; position: absolute; top: 0px; border-color: #EEEEEE;
}
.speech-bubble.speech-bubble-left { margin-left: 20px; border-radius: 0 4px 4px 4px;
}
.speech-bubble.speech-bubble-left:after { border-width: 0 20px 24px 0; border-top-color: transparent !important; border-left-color: transparent !important; border-bottom-color: transparent !important; left: -20px;
}
.speech-bubble.speech-bubble-right { margin-right: 20px; border-radius: 4px 0 4px 4px;
}
.speech-bubble.speech-bubble-right:after { border-width: 0 0 24px 20px; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; right: -20px;
}
.speech-bubble.speech-bubble-bottom-right { margin-bottom: 40px; border-radius: 4px;
}
.speech-bubble.speech-bubble-bottom-right:after { border-width: 0 24px 20px 0; border-top-color: transparent !important; border-left-color: transparent !important; border-bottom-color: transparent !important; top: auto; right: 20px; bottom: -20px;
}
.speech-bubble.speech-bubble-bottom-left { margin-bottom: 40px; border-radius: 4px;
}
.speech-bubble.speech-bubble-bottom-left:after { border-width: 0 0 20px 24px; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; top: auto; left: 20px; bottom: -20px;
}
.speech-bubble.speech-bubble-red { color: #000000; background: #F44336;
}
.speech-bubble.speech-bubble-red:after { border-color: #F44336;
}
.speech-bubble.speech-bubble-purple { color: #ffffff; background: #9C27B0;
}
.speech-bubble.speech-bubble-purple:after { border-color: #9C27B0;
}
.speech-bubble.speech-bubble-green { color: #000000; background: #8BC34A;
}
.speech-bubble.speech-bubble-green:after { border-color: #8BC34A;
}
Single element speech bubble - Script Codes
Single element speech bubble - Script Codes
Home Page Home
Developer Nick Nikolov
Username necks
Uploaded October 17, 2022
Rating 3
Size 3,191 Kb
Views 20,240
Do you need developer help for Single element speech 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!

Nick Nikolov (necks) Script Codes
Name
User Icons
60fps animated SVG waves hero
Checkbox
SVG Clock
Simple fluid navigation with 4 hover effects
Gallery image deck
Table cell corner indicator
Page header bar toggle on scroll
Spinning Loader
Player Flip Cards
Create amazing sales emails 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!