Burbuja de mensaje HTML con diseño SVG

1,115 weekzim

Abrir en el editor Publica tu código

Recomendado

16 April 2024

Descargar tarjeta HTML de la aplicación

31 July 2025

El susurrador de códigos

21 June 2024

Palanca dentada

HTML

<!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%;  
}