DIV Wrappers

ladans37 · January 26, 2021, 9:21pm

With all the above changes :

Screenshot_2021-01-26 Speechbox

The revised code :

Or :

#box {
  margin-left:140px;
  margin-top:140px;
  width: 100px;
  height: auto;
  background:green;
  padding:10px;
  text-shadow:2px 1px 2px #009dff;
}

.speech {
  margin:0px;
  height: auto;
  text-align: center;
  background-color: #fff;
  border: 4px solid #000;
  border-radius: 30px;
  box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #391722;
  opacity:1;
  z-index:90000;
  transition: transform 0.4s; /* Animation */
    transition:all 0.4s ease-in-out;
  font-size:21px;
  font-family:Arial, Open Sans, Segoe UI;
  filter:drop-shadow(2px 2px 4px #391722);

}

ladans37 · January 26, 2021, 9:26pm

Oh, I forgot to mention. I did have a solution earlier, which was putting :

#box {
  margin-left:140px;
  margin-top:140px;
  width: 175px;
  height: auto;
  background:green;
  padding:10px;
  text-shadow:2px 1px 2px #009dff;
}

.speech {
  margin:0px;
  height: auto;
  text-align: center;
  background-color: #fff;
  border: 4px solid #000;
  border-radius: 30px;
  box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #391722;
  opacity:1;
  z-index:90000;
  transition: transform 0.4s; /* Animation */
    transition:all 0.4s ease-in-out;
  font-size:21px;
  font-family:Arial, Open Sans, Segoe UI;
  filter:drop-shadow(2px 2px 4px #391722);

}

Both together, then having only the margin, height and width to resize them together :

#box, .speech {

margin: x;
height: y;
width z;

As such. Would this work as well?

PaulOB · January 27, 2021, 12:06pm

You will need to set a minimum width on the bubble because the spike effect will poke out as its a fixed size.

ladans37 · January 27, 2021, 12:28pm

Ok cool. What’s the width on it now? I’m on my phone, so can’t really see the css.

So if it’s at 100px, make the minimum width 50px?

PaulOB · January 27, 2021, 12:57pm

In my example the min width would need to be 135px.

.speechbox {
  min-width:135px;
}

You can easily test by opening devtools and adjusting the width until there is no longer a problem.

In devtools highlight the px unit for speechbox and you can then use the keyboard arrows to cycle the values up and down very quickly to see the effect of different widths. It’s a technique I use all the time to see the immediate effect of changing values without having to change the actual css/ Once you are happy with a value then change the css accordingly.

ladans37 · January 27, 2021, 1:08pm

@coothead hey there looked like you had some thoughts. Saw you pop up for a bit.

coothead · January 27, 2021, 1:14pm

Hi there ladans37,

I apologise for jumping in here, but I have to ask
why you want a CSS instead of a SVG bubble?

Look at this svg example which is mobile friendly…

Full Page View:-
https://codepen.io/coothead/full/NWRQQpq

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Young lady with bubble</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
body {
    background-color: #111;
    font: normal 1em / 1.62em  sans-serif;
 } 
.young-lady {
	position: relative;
    display: inline-block;
    margin: 11.25em 0 0 1em;
 }
.young-lady a, 
.young-lady a img {
 	display: block;
    width: 11em;
    height: auto;
    border-radius: 50%;
    overflow: hidden;	
 }
.young-lady > svg {
    position: absolute;
    left: 8em;
    top:  -9.25em;
    width:15.313em;
    height:10.313em;
	opacity: 0;
    transition: 0.4s ease-in-out;
 }
.young-lady a:hover + svg {
    opacity: 1;
}

path {
    filter: url( #shadow );
 }
text {
    font-size: 1.5em;	
    text-shadow: 0.1em 0.1em 0.1em rgba( 0, 0, 0, 0.5 );
    letter-spacing: 1px;
    animation: rotate 4s infinite;
 } 
 @keyframes rotate {
 	0% { transform:scale(1); }
   50% { transform:scale(2) translate(-25%, -20%); fill:#f00;}
  100% { transform:scale(1); }
 }
 
@media ( max-width: 25em ) { 
.young-lady > svg {
	width: 10em;
    height: 6.735em;
    left: 7em;
    top: -5em; 
 }	
}
</style>

</head>
<body>
 <div class="young-lady">

  <a href="https://imgbb.com/">
   <img src="https://i.ibb.co/q0C4D4M/58461451-594363321051717-6049779766507077632-n.jpg" 
   alt="young lady with pink cheeks and ribbons in her hair">
  </a>

  <svg  
   xmlns="http://www.w3.org/2000/svg" 
   viewBox="0 0 250 170">
   <defs>
   	<filter id="shadow">
      <feDropShadow dx="4" dy="5" stdDeviation="5" flood-color="#fff"/>
    </filter>
   </defs>

   <path d="M 10 30 Q 10 10 30 10 30 10 220 10 Q 240 10 240 30 240 30 240 110 Q 240 130 220 130 220 
               130 60 130 Q 50 160 30 160 Q 40 145 35 130 35 130 30 130 Q 10 130 10 110 10 110 10 30" 
          stroke-width="3" stroke="#000" fill="#fff"/>
   <text x="96" y="76">Hey!</text>
  </svg>
 </div>

</body>
</html>

ladans37 · January 27, 2021, 1:22pm

@PaulOB it hasn’t really worked out :

@coothead if I use svg, I won’t be able to change the tail color or like, the shape of it if I wanted. At least I think not… . Remember, I used your svg that you sent? The one with the green tail. I wanted to change it to black, but couldn’t.

coothead · January 27, 2021, 1:35pm

Hi there ladans37,

I haven’t made a tail, I’ve made a bubble.

You can change the border, the background, the drop
shadow and the text settings to you heart’s content.

coothead

PaulOB · January 27, 2021, 1:51pm

Read my lips

42.5px is much too small and why are you still applying widths on both #box and .speech. We’ve covered this a number of times now. (and stop using half pixels as the smallest screen unit is one pixel (you occasionally need a half pixel to cater for odd rounding errors but I have never ever used a half a pixel in the last 20 years.))

PaulOB · January 27, 2021, 1:54pm

Yes the SVG version is the way to go

Much easier to scale up and down.

ladans37 · January 27, 2021, 2:16pm

I’m lost lol. So I just put in min-width:135px to only .speech ?

ladans37 · January 27, 2021, 2:17pm

@coothead the svg we worked on before was an uploaded image as I remember

ladans37 · January 27, 2021, 2:20pm

Ok I now have :

#box {
  margin-left:140px;
  margin-top:140px;
  height: auto;
  background:green;
  padding:10px; 
  text-shadow:2px 1px 2px #009dff;
}

.speech {
  width: 100px;
  min-width:135px;
  margin:0px;
  height: auto;
  text-align: center;
  background-color: #fff;
  border: 4px solid #000;
  border-radius: 30px;
  box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #391722;
  opacity:1;
  z-index:90000;
  transition: transform 0.4s; /* Animation */
    transition:all 0.4s ease-in-out;
  font-size:21px;
  font-family:Arial, Open Sans, Segoe UI;
  filter:drop-shadow(2px 2px 4px #391722);

}

Which came out looking like :

coothead · January 27, 2021, 2:25pm

But not now.

In this instance it’s placed in the HTML code which
was posted for your consideration in post #27

coothead

ladans37 · January 27, 2021, 2:53pm

Any idea what to do with this? I’ve applied width to only one of the css tags as you had wanted me to @PaulOB

ladans37 · January 27, 2021, 3:01pm

Ok nevermind, seems I got it now:

PaulOB · January 27, 2021, 3:08pm

Sorry, I’ve lost track now What are you trying to achieve now?

Note you now have width:100px and min-width:135px in the same rule. What do you think the width will be?

ladans37 · January 27, 2021, 3:09pm

@PaulOB I have fixed it, see update above yours

PaulOB · January 27, 2021, 3:10pm

You don’t have a scalable element so the min-width is superfluous. You only need the min-width if the width is fluid as in that example of mine (5th bubble).