Help: Making bubble-like boxes with css?

[rinni]

Hiiiiii all you wonderful and kind and knowledgeable people <3

So I've been searching and searching ways to make a div look bubble-like with CSS for a while now, and the only thing that ever comes up are ways to make boxes look like speech bubbles!

I'm trying to create boxes that look similar to the Pikmin 2 User Interface. Here's some examples!

https://www.gameuidatabase.com/uploads/Pikmin-2-HD06242023-045735-62741.jpg
https://www.gameuidatabase.com/uploads/Pikmin-2-HD06242023-045732-73361_thumb.jpg

(I'm having trouble embedding images, I'll edit this post once I have it figured out, so many apologies!!)

I have some pretty basic looking shadows on my divs, the code i used was from https://scripted.neocities.org/ and I haven't changed it at all i think? I'm familiar with CSS gradients and border radii and image borders, but these examples i've sent seem a bit more complex. I could try to replicate the borders in an art program, make them transparent and add them in that way, but I'm sure they'd either be too wide, or there's a simpler way to do this! Maybe I could make the harsh light on the top lefts as a transparent image, and just position them on top of the boxes? I'm getting scrambled just thinking of the possible answers! If anyone knows anything at all that I could do, or something simpler that I'm overlooking I'd really appreciate it!

[Sudamericat]

Not a wizard programmer here but look to me that those were made using custom image borders.

https://www.w3schools.com/cssref/css3_pr_border-image.php The old reliable w3 schools has a class on how to use image in borders. So you have to use you favorite image editor to make a semi-transparent borders and a semi-transparent background to use with ¨background-image: url(your url here);¨ in the box.

The closest thing to look like that not using images that comes to my mind is using ¨border-radius: 30px;¨ and changing your opacity to make it look transparent.

Example

.box{
border-radius: 30px;
background-color: #ffffff;
opacity: 0.3; <-- You can change the decimal to make it more clear or visible.
}

[close]

I hope this helps you. If you want to know how to make more stuff with your borders please check this link: https://www.w3schools.com/css/css_border.asp

[Kallistero]

Vanilla HTML/CSS/JS visual effects are exactly the type of thing I've been sinking way too much time into!   

My approach for this would be to add a border radius, a box shadow (with the 'inset' argument enabled), and (to get the circle on the top left) a nested div with a class name giving it its own styles (or a script that targets your bubble-like elements to inject the nested divs).

The circle would have a 'border-radius: 50%' property, it would have the 'opacity' property at maybe 0.5, and it would have a 'transform' CSS property, probably with a 'rotateX() rotateY() perspective()' argument   

[Melooon]

While border images are prob a more polished solution - looking at the original Pikmin example; they are just stretching one standard image.

So if you just find/make a square-ish bubble image and set it as the background image of your boxes (and set it to stretch as the box changes) - that will replicate the original perfectly; thats prob what Id do 

[rinni]

Okay!!! I figured it out i think!!! Thank y'all so much!

So I started to read through everyone's suggestions so far, thank you so much again!! i think this is quite basic, but i've been struggling with it for a bit because the format of box shadows is a smidge more complicated than everything else i've done, but that just means this has been a great learning opportunity!

I knew there had to be a way people did this much quicker, because honestly, it's just colors and opacity and offset, things that are solved by purely punching in a few numbers.

So i went looking, and found a CSS generator for this exact purpose!: https://cssgenerator.org/box-shadow-css-generator.html

I think I want to try my idea with this and an inset div for the highlight first, because i've been getting pretty good with overlaying images on top of stuff, but if the different sizes of my boxes are going to make it more complicated, I'll go the image route!

I just have one doubt, is there a size limit on the images i can use for the border? Most of the ones i've seen are quite small, would a larger image be a problem?

Thank you all again!!! youre all so smart!

[Kallistero]

i've been struggling with it for a bit because the format of box shadows is a smidge more complicated than everything else i've done

A lot of people don't understand box-shadows. Even MDN claims that there's no set algorithm for it, but the way I understand it is that the 4th argument determines how far inward or outward from the div that the shadow's border extends to (like, if you have a border thickness of 2px and a box-shadow with a 4th argument of 4px, that box shadow's "border" will extend 2 px beyond the actual border property).

The 3rd argument determines how spread-out that border is, so if you have a 4th argument of 4px and a 3rd argument of 1px, the shadow will be blurred between 3px and 5px from the element. This means that if the shadow is white, then the shadow will be solid-white from 0px to 3px from the element, then at 3 px, it'll start to blur into the outside of the box shadow, then after 5px, the box-shadow will be completely transparent. Likewise, if you put 2px into the 3rd argument, it would be solid from 0 to 2px, then blur into the background until 6px.

Arguments 1 and 2 are easy to work out, they're just how offset from the element the box shadow is.

Code

<div style="position: absolute;
            top: 40%;
            left: 46%;
            height: 12%;
            width: 16%;

            border-radius: 12%;
            box-shadow: -3px -6px 25px -18px white inset;

            background: transparent;">
            
            <!-- stuff goes here! -->
        
            <div style="position: absolute;
                        border-radius: 50%;
                        opacity: 0.3;
                        top: 10%;
                        left: 3%;
                        height: 10%;
                        width: 9px;
                        rotate: -60deg;

                        background-color: white;"></div>
</div>

Here's a bit of code I whipped up quickly to render the effect you want; try it out, and tweak some numbers to see if it'll work for you! Try it with the other solutions to find a best-fit 

[rinni]

Here's another update, because i found more resources!

I found this other css generator that does all the work of inputting color values and gradient values etc etc (It feels like cheating!): https://unused-css.com/tools/border-gradient-generator

I used it to create those subtle shines on top and bottom of the boxes, but as it stands right now, i'll need to tweak the border thicknesses to make them look juuuuuuust right!

I also found a suitable png for the spot of light and added it! as i write this i only have one down, but i'll add it to both boxes shortly.

what else... i'm not sure! I think these two methods have been working splendidly!

here's the page!: https://rinnispace.neocities.org/pikmin

Here's a bit of code I whipped up quickly to render the effect you want; try it out, and tweak some numbers to see if it'll work for you! Try it with the other solutions to find a best-fit 

I... i think I need a minute to figure this code out ;;v;;, I wasn't able to properly apply it yet, but i'll make a test page and try it there! thank you so much!

edit: i think the png i'm using might very well be the exact same png in the game . sobs.

[rinni]

Code

  border-image-slice: 22 24 22 24;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
  border-image-source: url("https://rinnispace.neocities.org/img/misc/bubble.png");

I did it guys :3 For so long i wondered if i had to edit or cut up the original image ripped from The Spriter's Resource, but tonight i actually started working on figuring out the border-image method to use the texture on my blog, and i remembered a video i watched about the 9 split method used to extend textures in videogames, and wondered if there was an equivalent for html/css, lo and behold, there was! And there's a generator for it that helped me figure out how it worked!

CSS Border Image Generator!

I hope this can help someone!!