Balão de mensagem HTML com design SVG

1042 weekzim

Abrir no Editor Video Publique Seu Código

Recomendado

22 August 2025

Comentário de espaço reservado para código HTML

16 April 2025

Um código de anhtuanle2004yst

20 June 2025

Formulário de registro de login HTML com efeito de cartão 3D

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

Recomendado

Comentário de espaço reservado para código HTML

Um código de anhtuanle2004yst

Formulário de registro de login HTML com efeito de cartão 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS