It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Please check your email for instructions to activate your account.
Written by 21 May 2020
When you need to sat something on behalf of a character, either a real or a virtual one, you should put a bubble on his/her head. So you might searching for a script which creates those bubbles. If this is the case, you are here right!
<!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<style>
body { background: dimgrey; perspective: 35em; }
.speech-bubble {
position: relative;
margin: 0.5em auto;
padding: 1em;
width: 6em; height: 3em;
border-radius: .25em;
transform: rotate(-4deg) rotateY(15deg);
background: #629bdd;
font: 2em/4 Century Gothic, Verdana, sans-serif;
text-align: center;
}
.speech-bubble:before, .speech-bubble:after {
position: absolute;
z-index: -1;
content: '';
}
.speech-bubble:after {
top: 0; right: 0; bottom: 0; left: 0;
border-radius: inherit;
transform: rotate(2deg) translate(.35em, -.15em) scale(1.02);
background: #f4fbfe;
}
.speech-bubble:before {
border: solid 0 transparent;
border-right: solid 3.5em #f4fbfe;
border-bottom: solid .25em #629bdd;
bottom: .25em; left: 1.25em;
width: 0; height: 1em;
transform: rotate(45deg) skewX(75deg);
}
.bubble {
position: relative;
font-family: sans-serif;
font-size: 18px;
line-height: 24px;
width: 300px;
background: #fff;
border-radius: 40px;
padding: 24px;
text-align: center;
color: #000;
margin-top:75px;
}
.bubble-bottom-left:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 24px solid #fff;
border-right: 12px solid transparent;
border-top: 12px solid #fff;
border-bottom: 20px solid transparent;
left: 32px;
bottom: -24px;
}
</style>
<center>
<div class='speech-bubble'>Hello!</div>
<div class="bubble bubble-bottom-left" contenteditable>Type any text here!</div>
</center><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!