HTML Message Bubble with SVG Design

1,502 weekzim

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>messages</title>
  <link rel="stylesheet" href="./styles.css">
</head>
    <body>
      <main>
        <article class="article">
          <section class="liquid_class"id="1">
            <h1 class="ai_gradient">Messages</h1>
            <div class="bubble">
              <svg class="bubble-inverte-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 614 94" preserveAspectRatio="none">
                <g transform="scale(-1,1) translate(-614,0)">
                  <path d="M598.708,68.2V46.847l-0.009.007A44.66,44.66,0,0,0,554.255,2.041L45.484,1.957a44.85,44.85,0,0,0-.052,89.7L554.2,91.739a44.091,44.091,0,0,0,29.025-10.847c0.054,0.063.1,0.127,0.157,0.192,13.2,15.237,27.881,9.657,27.881,9.657C603.816,89.025,598.708,78.722,598.708,68.2Z"></path>
								</g>
                <foreignObject x="29" y="12" width="100%" height="100%">
                  <p class="bubble-text-inverte"> </p>
                </foreignObject>
							</svg>
              
              	<svg class="bubble-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 628 510" preserveAspectRatio="none">
						    <path transform="scale(1, 0.85)" d="M597.967,425.7V358.788c0.01-1.075.025-2.15,0.031-3.225,0.032-5.247.03-10.493,0.03-15.74v-201.4c0-5.247,0-10.493-.03-15.74-0.027-4.42-.078-8.838-0.2-13.257a192.469,192.469,0,0,0-2.541-28.85,97.261,97.261,0,0,0-9.052-27.439A92.311,92.311,0,0,0,545.827,12.8a97.567,97.567,0,0,0-27.458-9.037,193.015,193.015,0,0,0-28.9-2.539c-4.424-.119-8.848-0.17-13.273-0.2C470.947,1,465.694,1,460.44,1H138.588c-5.253,0-10.506,0-15.76.03-4.425.027-8.849,0.078-13.273,0.2a193.021,193.021,0,0,0-28.9,2.539A97.567,97.567,0,0,0,53.2,12.8,92.313,92.313,0,0,0,12.82,53.135,97.291,97.291,0,0,0,3.768,80.574a192.414,192.414,0,0,0-2.54,28.85c-0.119,4.419-.171,8.837-0.2,13.257C1,127.928,1,133.174,1,138.421v201.4c0,5.247,0,10.493.029,15.74,0.027,4.42.078,8.838,0.2,13.257a192.405,192.405,0,0,0,2.54,28.85,97.291,97.291,0,0,0,9.052,27.439A92.307,92.307,0,0,0,53.2,465.439a97.573,97.573,0,0,0,27.458,9.037,192.94,192.94,0,0,0,28.9,2.539c4.424,0.119,8.848.17,13.273,0.2,5.254,0.031,10.507.029,15.76,0.029H460.44c5.254,0,10.507,0,15.76-.029,4.425-.028,8.849-0.079,13.273-0.2a192.934,192.934,0,0,0,28.9-2.539,97.573,97.573,0,0,0,27.458-9.037A92.356,92.356,0,0,0,563.751,453.5c0.111,0.132.212,0.271,0.326,0.4,29.183,33.379,61.661,21.155,61.661,21.155C609.264,471.3,597.967,448.731,597.967,425.7Z"></path>
						    	<foreignObject x="57" y="28" width="100%" height="100%" transform="translate(2,8) scale(0.80,0.80)">
						    		<p class="bubble-text"> </p>
						    	</foreignObject>
				</svg>
            </div>
      </main>
    </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100..1000&display=swap");
:root{
  --c-glass: #bbbbbc;
  --c-light: #fff;
  --c-dark: #000;

--c-content: #224;
  --c-action: linear-gradient(94deg, rgb(0, 144, 247), rgb(186, 98, 252), rgb(242, 65, 107), rgb(245, 86, 0));

--c-bg: #e8e8e9;

--m-bg :#a5a5a5 ;

--glass-reflex-dark: 1;
  --glass-reflex-light: 1;

--saturation: 150%;

font-size: 20px;
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  background: var(--c-bg);
  color: var(--c-content);

transition: background 400ms cubic-bezier(1, 0, 0.4, 1),
  color 400ms cubic-bezier(1, 0, 0.4, 1);
}

html {
  scroll-behavior: smooth;
}

html.dark-mode{
   --c-glass: #bbbbbc;
  --c-light: #fff;
  --c-dark: #000;

--c-content: #e1e1e1;

--c-bg: #1b1b1d;

--glass-reflex-dark: 2;
  --glass-reflex-light: 0.3;

--saturation: 150%;
}

header {
  z-index: 100;
  position: fixed;
  width: 100%;
  margin-top : 15px;
}
body {
    display: block;
    margin: 0px;
}
a {
  text-decoration: none;
  color: var(--c-content);
  text-decoration-thickness: 0.05em;
  text-underline-position: under;
  text-decoration-color: color-mix(in srgb, currentColor, transparent 70%);
  transition: color 160ms, text-decoration-color 160ms;
}

a:hover {
  background: var(--c-action);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-decoration-color: color-mix(in srgb, currentColor, transparent 30%);
}

/*EFFET GLASS*/

.glass_menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.glass_container {
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 70px;
  box-sizing: border-box;
  padding: 8px 12px 10px;
  border: none;
  border-radius: 99em;
  font-size: var(--fz);
  background-color: rgba(255, 255, 255, 0.1); /* fallback */
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
  backdrop-filter: blur(8px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));

box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}
#box2{
  display: none;
}
.theme::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  display: block;
  width: 84px;
  height: calc(100% - 8.5px);
  border-radius: 99em;
  background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
  z-index: -1;
  pointer-events: none;

box-shadow: inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 10%),
        transparent
      ),
    inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 90%), transparent),
    inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 80%), transparent),
    inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 60%), transparent),
    inset -1px 2px 3px -1px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
        transparent
      ),
    inset 0px -4px 1px -2px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0px 3px 6px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
        transparent
      );
}

.theme[data-selected="1"]::after {
  translate: 0 0;
  transform-origin: right;
  transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
    box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
    translate 400ms cubic-bezier(1, 0, 0.4, 1);
  animation: scaleToggle 440ms ease;
  transform-origin: left;
}

.theme[data-selected="2"]::after {
  translate: 76px 0;
  transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
    box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
    translate 400ms cubic-bezier(1, 0, 0.4, 1);
  animation: scaleToggle2 440ms ease;
  animation: scaleToggle2 440ms ease;
  transform-origin: right;
}

.theme_container {
  color: var(--c-content);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  width: 68px;
  height: 100%;
  box-sizing: border-box;
  border-radius: 99em;
  opacity: 1;
  transition: all 160ms;
}

.theme_container:hover {
  cursor: pointer;
}

.theme_container:hover .switcher__icon {
  scale: 1.2;
}

.theme_container:has(input:checked) {
  color: var(--c-content);
  cursor: auto;
}

.theme_container:has(input:checked) .switcher__icon {
  scale: 1;
}

.theme_input{
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.theme_icon {
  fill: var(--c-content);
  display: block;
  width: 100%;
  transition: transform 200ms cubic-bezier(0.5, 0, 0, 1),
              fill 200ms ease-in-out;
}

.theme_icon:hover {
  transform: scale(1.1);
  fill: url(#themeGradient); /* applique le dégradé défini dans le <defs> */
}

.theme_filter {
  position: absolute;
  width: 0;
  height: 0;
  z-index: -1;
}

.glass_hour {
  display: flex;
  justify-content: center;
  width: 80px;
  max-width: 80px;
  text-align: center;
}

.glass_hour p {
  line-height: 0;
  margin: 0;
}

.glass_nav{
  width: 550px;
}

.nav_list{
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: center;
}

.nav_list li{
    list-style: none;
}

.nav_link {
    padding: 20px 10px;
}

.active{
  background: var(--c-action);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.bouton-off {
  pointer-events: none; /* empêche tout clic */
  cursor: default; /* change le curseur */
}

/*ANNIMATIONS*/

@keyframes scaleToggle {
  0% {
    scale: 1 1;
  }
  50% {
    scale: 1.1 1;
  }
  100% {
    scale: 1 1;
  }
}

@keyframes scaleToggle2 {
  0% {
    scale: 1 1;
  }
  50% {
    scale: 1.2 1;
  }
  100% {
    scale: 1 1;
  }
}

/* //////////////////////////////////////////
/  Article Styles //////////////////////// */

.article {
  display: flex;
  flex-direction: column;
  align-items: center;
}

section{
  padding-top: 50px;
}

h1,
h2,
p,
blockquote {
  width: 100%;
  max-width: 700px;
  box-sizing: border-box;
}

h1 {
  font-size: 3em;
  margin: 1.4em 0 0.6em;
}

h2 {
  font-size: 2em;
  margin: 1.4em 0 0.6em;
}

p {
  line-height: 160%;
  margin: 0 0 1em;
}

blockquote {
  margin-left: 0;
  margin-right: 0;
  font-size: 2em;
  padding-left: 1em;
  border-left: 0.1em solid currentColor;
}

figure {
  margin: 1em 0 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

figcaption {
  max-width: 600px;
  margin-top: 1em;
  font-size: 0.8em;
  color: color-mix(in srgb, var(--c-content) 60%, var(--c-bg));
}

img {
  display: block;
  border-radius: 0.8em;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 5 / 3;
  object-fit: cover;
}

.box {
  padding: 1em 1.4em;
  border-top: 4px solid color-mix(in srgb, var(--c-action) 50%, transparent);
  border-radius: 0.8em;
  background-color: color-mix(in srgb, var(--c-action) 8%, var(--c-bg));
  transition: background 400ms cubic-bezier(1, 0, 0.4, 1);
}

.bubble {
  display: grid;
  justify-content: center;
  gap: 20px;
}
.bubble-svg {
  margin-left: 60px;
  fill: #007aff;
  width: 300px;
}

.bubble-inverte-svg{
  margin-left: -50px;
  fill: var(--m-bg);
  width: 300px;
}

.bubble-text-inverte {
    color: white;
    font-size: 65px;
    text-align: left;
    margin: -15px 0px 0px 35px;

white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;               
}

.bubble-text{
  color:white;
  font-size: 70px;
  margin: 0px 0px 0px 40px;

white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;  
}

@media screen and (max-width: 940px) {

:root {
    font-size: 16px;
  }

header {
    margin-top: 10px;
  }

#box4 {
    display:none;
  }

#box4.show {
    top: 70px;
    display: flex;
    justify-content: center;
  }

.glass_menu,
  .nav_list {
        display: flex;
        gap: 10px;
        flex-direction: row;
        justify-content: center;
  }
.glass_menu {
  display: flex;
}
.glass_nav {
  width: 330px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#box1 {
  order: 2;
}

#box2 {
  order: 3;
}

#box3 {
  order: 1;
}
#box4{
  order: 4;
}

#box2 {
    display: block;
  }
  .nav__toggle {
    color: var(--c-content);
    font-size: 1.5rem;
    cursor: pointer;
    margin-top: 5px;
  }

.glass_container {
    gap: 6px;
    height: auto;
    display:flex;
  }

.theme_container {
    justify-content: center;
  }

h1 {
    font-size: 1.8em;
  }

h2 {
    font-size: 1.4em;
  }

.box {
    padding: 0.8em 1em;
  }

img {
    aspect-ratio: auto;
  }
}

@media screen and (max-width: 480px) {
  :root {
    font-size: 16px;
  }

header {
    margin-top: 10px;
  }

#box4 {
    display:none;
  }

#box4.show {
    top: 70px;
    display: flex;
    justify-content: center;
  }

#box1 {
  order: 2;
}

#box2 {
  order: 3;
}

#box3 {
  order: 1;
}
#box4{
  order: 4;
}

#box2 {
    display: block;
  }
  .nav__toggle {
    color: var(--c-content);
    font-size: 1.5rem;
    cursor: pointer;
    margin-top: 3px;
  }

.glass_container {
    gap: 6px;
    height: auto;
    display:flex;
  }

.theme_container {
    justify-content: center;
  }

h1 {
    font-size: 1.8em;
  }

h2 {
    font-size: 1.4em;
  }

.box {
    padding: 0.8em 1em;
  }

img {
    aspect-ratio: auto;
  }

.bubble {
  display: grid;
  justify-content: center;
  gap: 20px;
}
.bubble-svg {
  margin-left: 50px;
  fill: #007aff;
  width: 250px;
}

.bubble-inverte-svg{
    margin-left: 10px;
    fill: gray;
    width: 250px;
}

.bubble-text-inverte {
    color: white;
    font-size: 65px;
    text-align: left;
    margin: -15px 0px 0px 35px;

white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;               
}

.bubble-text{
  color:white;
  font-size: 70px;
  margin: 0px 0px 0px 30px;

white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 80%;  
}

HTML Message Bubble with SVG Design

Recommended