{"id":4387,"date":"2017-10-03T13:00:31","date_gmt":"2017-10-03T04:00:31","guid":{"rendered":"https:\/\/tadtadya.com\/en\/?p=4387"},"modified":"2021-01-25T14:26:42","modified_gmt":"2021-01-25T05:26:42","slug":"how-to-make-balloons-with-just-html-and-css","status":"publish","type":"post","link":"https:\/\/tadtadya.com\/en\/how-to-make-balloons-with-just-html-and-css\/","title":{"rendered":"HTML&CSS, How to make a balloon"},"content":{"rendered":"\n

This is a method of creating speech bubbles using only HTML and CSS without images.<\/p>\n\n\n\n

Since it doesn't load images, it reduces the response time and page display time a bit.<\/p>\n\n\n\n\n\n\n\n

<\/i>
\n

This is written by a Japanese who can't speak English with the help of translation application. Sorry if it's not good.<\/p>\n<\/div><\/div><\/div>\n\n\n\n

Creating with just HTML and CSS won't make much of a difference in response time or page display time compared to the balloon using images or canvas.<\/p>\n\n\n\n

However, since it uses only the basic functions of CSS, these small steps can lead to big improvements.<\/p>\n\n\n\n

(But there's a weakness with the larger CSS size.)<\/p>\n\n\n\n

Let's take a look at HTML and CSS and the results.<\/p>\n\n\n\n

Placed on top<\/h2>\n\n\n\n

\n See the Pen \n Balloon top<\/a> by tadtadya (@tadtadya<\/a>)\n on CodePen<\/a>.<\/span>\n<\/p>\n