How can I style a div to look like a comic-strip speech bubble in CSS?
Here's an image demonstrating what I mean:
Is there a way of doing this in pure CSS?
A quick example, you can tweak it to fit your needs .. and since I cannot post a fiddle without code:
HTML:
<div class="balloon">
O hai !
<span class="tip"></span>
</div>
CSS:
body { background: #000; }
.balloon {
width: 250px;
height: 75px;
padding: 50px;
background: #fff;
border-radius: 50px;
position: relative;
font-size: 34px;
text-align: center;
}
.balloon .tip {
width: 0;
height: 0;
position: absolute;
right: 70px;
bottom: -20px;
border: solid 10px;
border-color: #fff transparent transparent transparent;
}
http://jsfiddle.net/6rzDK/
Related
I have a regular <div> element currently styled to look like a plain rectangle with rounded edges like this:
Is there a way to style it with just CSS (without adding any additional html elements to it) to make it look like this with a 'brace' on each end of the bar:
Here's a small cut out from my code of what I have at the moment:
.rectangle {
width: 400px;
background-color: grey;
border-radius: 4px;
}
<div class='rectangle'> </div>
You might use border:
.brace {
width: 400px; height:20px;
background-color: grey;
border:solid 10px;
border-color: #0000 #0000 #fff;
border-radius: 4px;
}
<div class="brace"></div>
You'd have to play around a bit with the settings below to get the precise size/shape you need, but you can do it by using a pseudo element, similar to the snippet below.
The :after rule creates an additional element which overlaps the main element.
.rectangle {
position: relative;
width: 400px;
background-color: grey;
height: 40px;
border-radius: 4px;
}
.rectangle:after {
content: '';
display: block;
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
width: 380px;
height: 10px;
background-color: white;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
<div class='rectangle'> </div>
So I have been a developer and pretty proficient at CSS and coding styling. There is a new design that has been approved and trying to figure out the best way to accomplish this. Here is a screenshot of what I am trying to achieve with drawing borders and lines but they need to extend both left and down:
https://cdn2.hubspot.net/hubfs/2323601/Epsilon_April2017/Images/Screen%20Shot%202017-05-02%20at%209.19.29%20AM.png
Does anyone have any insights on how to achieve this with HTML/CSS? Obviously going to tablet and mobile it would be removed, but on desktop they want to achieve this. I do not want to do a flattened image, but that is the only way I am leaning right now.
I have tried creating the lines as an image which i am placing below the left text
Is only playing with CSS
body{
background: black;
margin: 0;
}
.div{
position: relative;
width: 80%;
background: grey;
display: table;
margin-top: 50px;
}
.a,
.b{
display: table-cell;
color: white;
}
.a{
text-align: right;
font-size: 1.2em;
padding: 15px;
border-bottom: 2px solid white;
}
.b{
width: 140px;
}
.b div{
position: absolute;
background: pink;
font-size: 1em;
bottom: 0;
border: 2px solid white;
padding: 8px;
}
strong{
display: block;
width: 150px;
float: right;
}
.b div:before{
content: "";
display: block;
position: absolute;
width: 2px;
height: 50px;
background: white;
top: 100%;
left: -2px;
}
<div class="div">
<div class="a">OUR INDUSTRY-LEADING <br><STRONG>EXPERTS ARE READY TO</STRONG></div>
<div class="b"><div>GROW YOUR BUSSINES</div></div>
</div>
I had applied css to this thing but is there any way where i can do css of this type ?
means decreasing the bottom of the border line?
See if this help.
p {
position: relative;
z-index: 1;
width: 30px;
background: red;
padding: 10px;
color: #fff;
}
p:before {
content: "";
position: absolute;
left: 5px;
bottom: 0;
width: 80%;
border-bottom: 4px solid black;
height: 1px;
}
<p>
hello
</p>
I'm looking for is the trick to create that border around the widget as shown in the image:
And the title should stick to the top.
Any idea how to do that kinda trick?
Thanks in advance :)
You can use like this -
body{
background: #ccc;
}
.border-col{
min-height: 300px;width: 220px;
background: #ccc;border:2px solid #fff;
margin: 10px auto 0;
position: relative;
}
.border-col h2{
background: #ccc;
font-size: 15px;
left: 0;
margin: auto;
padding: 3px;
position: absolute;
right: 0;
top: -13px;
width: 60px;
}
<div class="border-col">
<h2>Heading</h2>
</div>
I'm trying to make a link image.
everything works with link but when I add a 2nd image to show when hover - then a strange border shows around it. Any ideas how to avoid the border?
I cant add a pics here so look here:
http://postimg.org/image/7q0jkc99t/
in html:
<div id="Oobj14">
<a href="formularz.html"><img id="Ggeo9" class="przed" onmouseover="this.className='po'"
onmouseout="this.className='przed'" alt=""></div>
in css:
.przed{
background: url('image/dolacz.png') no-repeat;
width: 249px;
height: 70px;
border-style: none;
}
.po{
background: url('image/dolacz2.png') no-repeat;
width: 249px;
height: 70px;
border-style: none;
}
and for the image:
#Oobj14 {
position: absolute;
font-size: 10px;
z-index: 13;
left: 43.20em;
top: 40.70em;
width: 143px;
height: 56px;
border-style: none;
}
img#Ggeo9 {
width: 100%;
height: 100%;
opacity:1.0;
Why use javascript at all? I'd throw away the images and simply use backgrounds. Use CSS :hover to switch to another background
HTML:
<div id="Oobj14">
Descriptive text
</div>
CSS:
#Oobj14 a {
position: absolute;
font-size: 10px;
z-index: 13;
left: 43.20em;
top: 40.70em;
width: 143px;
height: 56px;
border-style: none;
overflow:hidden;
text-indent:-2000px;
}
#Oobj14 a {
background: url('image/dolacz.png') no-repeat;
width: 249px;
height: 70px;
border-style: none;
}
#Oobj14 a:hover {
background: url('image/dolacz2.png') no-repeat;
}