Ejemplo UI HTML/CSS para chat | Programador Web Valencia

Ejemplo UI HTML/CSS para chat

3 minutos

Chat

A continuación comparto un ejemplo de interfaz de usuario para un chat, utilizando HTML y CSS. El código aplica buenas prácticas de accesibilidad, como el uso de atributos aria-* y role, así como el uso de etiquetas semánticas.

Además, entre sus características se encuentran:

  • Se sombrea la parte superior cuando hay un historial de mensajes con el fin de informar al usuario que puede desplazarse hacia arriba.
  • Se respeta que el mensaje “Te responderemos tan pronto como sea posible” se mantenga en una línea, y que el texto sobrante se oculte con puntos suspensivos.
  • Nomenclatura BEM para los nombres de las clases.
  • Variables CSS para los colores, fuentes y espaciados.
  • Dibujo de los bocadillos de los mensajes con solo CSS.
  • El input de texto crece con el contenido.
  • Anidamiento de los bloques CSS para que no se apliquen estilos a los elementos de otros componentes.
  • El contenedor de mensajes tiene un atributo aria-live="polite", para que los lectores de pantalla anuncien los nuevos mensajes.

Demo

Código

<section class="chat">
    <header class="chat__header">
        <button class="button chat__close" aria-label="Cerrar">✖️</button>
        <h2 class="chat__name">Soporte técnico</h2>
        <p class="chat__status">
            <span class="chat__led"></span>
            Te responderemos tan pronto como sea posible.
        </p>
    </header>
    <!-- Contenedor de mensajes -->
    <div class="chat__messages" aria-live="polite">
        <!-- Componente de mensaje receptor -->
        <article class="message message--receptor">
            <h3 class="message__username">Caballero blanca luna</h3>
            <p class="message__text">
                Tortor vitae purus faucibus ornare. Velit euismod in pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante metus, dictum at tempor commodo, ullamcorper a?
            </p>
        </article>
        <!-- Componente de mensaje emisor -->
        <article class="message message--emisor">
            <h3 class="message__username">Don Quijote</h3>
            <p class="message__text">
                Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim.
            </p>
        </article>
    </div>
    <footer class="chat__footer">
        <form class="chat__form">
            <!-- Input que crece con el texto -->
            <div
                role="textbox"
                aria-label="Nuevo mensaje"
                aria-placeholder="Escribe tu mensaje..."
                contenteditable="true"
                class="chat__input"
                name="mensaje"
            ></div>
            <!-- Botones con funciones secundarias -->
            <button type="button" class="button chat__button" aria-label="Abrir emojis">😀</button>
            <button type="button" class="button chat__attachment" aria-label="Adjuntar archivo">📎</button>
        </form>
    </footer>
</section>
:root {
    /* Colors */
    --color-black: #1D1E21;
    --color-white: #FFF;
    --color-background: #E8E8E8;
    --color-green: #43B72A;

    /* Fonts */
    --font-body: Arial;

    /* Gaps */
    --gap-s: 0.9rem;
    --gap-m: 1rem;
    --gap-l: 1.5rem;
    --gap-xl: 2rem;
    --gap-xxl: 3rem;
}

/* Animaciones */
@keyframes ani-pulse {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Generales */

body {
    font-family: var(--font-body);
}

/* Componentes */

.button {
    display: inline-block;
    background-color: initial;
    border: 0;
    padding: var(--gap-s);
    min-width: var(--gap-l);
}

/* Chat */

.chat {
    position: fixed;
    bottom: 0;
    right: var(--gap-xxl);
    width: 20rem;
    background-color: var(--color-white);
    border-top-left-radius: var(--gap-l);
    border-top-right-radius: var(--gap-l);
    .chat__header {
        background-color: var(--color-black);
        color: var(--color-white);
        border-top-left-radius: var(--gap-l);
        border-top-right-radius: var(--gap-l);
        padding: var(--gap-m);
        box-sizing: border-box;
        position: relative;
        &::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2rem;
            height: 2rem;
            background-image: linear-gradient(var(--color-background), transparent);
            z-index: 10;
        }
    }
    .chat__close {
        display: block;
        margin-left: auto;
    }
    .chat__name {
        margin: 0;
        font-size: var(--gap-l);
        font-weight: normal;
        margin-bottom: .4rem;
    }
    .chat__status {
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &:hover {
            white-space: initial;
            overflow: initial;
            text-overflow: initial;
        }
    }
    .chat__led {
        --size: .6rem;
        display: inline-block;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        background-color: var(--color-green);
        animation-name: ani-pulse;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    .chat__messages {
        height: 20rem;
        padding-inline: var(--gap-s);
        overflow-y: auto;
        background-color: var(--color-background);
    }

    .message {
        width: 14rem;
        background-color: var(--color-green);
        padding: var(--gap-m);
        margin-block: var(--gap-l);
        border-radius: var(--gap-s);
        position: relative;
        margin-left: auto;
        &::before {
            --lado: 0;
            display: block;
            content: "";
            width: var(--lado);
            height: var(--lado);
            position: absolute;
            bottom: -12px;
            right: 1rem;
            transform: rotate(-136deg);
            border: 1rem solid var(--color-green);
            border-left-color: transparent;
            border-bottom-color: transparent;
            border-right-color: transparent;
    }
    .message__username {
        font-weight: normal;
        margin: 0;
        font-size: var(--gap-m);
        color: var(--color-white);
    }
    .message__text {
        margin: 0;
        margin-top: var(--gap-s);
        font-size: var(--gap-s);
    }
    }
    .message--receptor {
        margin-left: initial;
        &::before {
            right: 0;
            left: 1rem;
            transform: rotate(275deg);
            bottom: -16px;
        }
    }

    .chat__footer {
        .chat__form {
            display: flex;
            align-items: flex-end;
        }
        .chat__input {
            border: 0;
            background-color: initial;
            width: 100%;
            padding: var(--gap-s);
            max-height: 5rem;
            overflow-y: auto;
            &:focus {
                outline: none;
            }
            &:empty::before {
                position: absolute;
                content: "Escribe tu mensaje...";
            }
        }
    }
}

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...