Aula privada | CSS WebAR Básico

Nivel básico

La ruta correcta para aprender CSS aplicado a WebAR

Este nivel empieza desde cero. Antes de diseñar una interfaz para MindAR, necesitamos entender qué es CSS, cómo se escribe, cómo se conecta con HTML y por qué algunas propiedades son tan importantes cuando una experiencia usa cámara.

Qué aprenderás primero

CSS como lenguaje de estilos: qué controla y qué no controla.
Sintaxis: selector, propiedad, valor, llaves, punto y coma.
Selectores: etiquetas, clases, id, hijos, estados y pseudoelementos.
Propiedades reales: color, fondo, tamaño, margen, padding, borde, posición, display, flex, grid y animaciones.
Aplicación WebAR: scanner, paneles, botones, capas sobre cámara, safe area y escena MindAR.

Idea importante: CSS no hace tracking ni abre la cámara. Eso lo hacen MindAR, A-Frame y JavaScript. CSS hace que la experiencia sea usable, legible, cómoda y profesional.

Marcar esta lección como completada

Fundamento

Qué es CSS y por qué importa en WebAR

CSS significa Cascading Style Sheets, o en español, hojas de estilo en cascada. Es el lenguaje que usamos para definir cómo se ve una página web: colores, tamaños, espacios, botones, paneles, animaciones, posiciones y adaptación a móvil.

Qué hace CSS

Convierte un HTML básico en una interfaz visual.
Define jerarquía visual: qué se ve grande, pequeño, principal o secundario.
Controla espacios para que los elementos no choquen.
Permite diseñar pantallas móviles sin que la cámara quede tapada.
Crea animaciones como líneas de escaneo, loaders y transiciones.

Qué no hace CSS

No detecta imágenes target.
No carga modelos 3D por sí solo.
No abre la cámara.
No guarda datos ni valida formularios.

En WebAR, CSS trabaja junto a JavaScript. JavaScript puede decir: “MindAR detectó el marcador”. CSS responde visualmente: “muestra el panel”, “oculta el scanner”, “cambia el mensaje”, “anima el botón”.

Marcar esta lección como completada

Sintaxis CSS

Cómo se escribe una regla CSS

Una regla CSS tiene tres partes principales: el selector, la propiedad y el valor. Esta es la base de todo el curso. Si entiendes esta estructura, puedes leer cualquier CSS con mucha más calma.

Regla CSS básicastyles.css

.ar-button {
  background: #38bdf8;
  color: #06111f;
}

Explicación línea por línea

Línea 1: .ar-button es un selector de clase. El punto significa “busca elementos HTML que tengan class="ar-button"”.
Línea 1: la llave { abre el bloque de estilos. Todo lo que esté dentro afecta al selector.
Línea 2: background es la propiedad. #38bdf8 es el valor. Cambia el color de fondo del botón.
Línea 3: color cambia el color del texto dentro del botón.
Línea 4: la llave } cierra la regla.

Vocabulario que debes dominar

Selector: indica qué elemento quieres diseñar.
Propiedad: indica qué aspecto quieres cambiar.
Valor: indica cómo quieres cambiarlo.
Declaración: una pareja propiedad/valor, por ejemplo color: white;.
Bloque: todo lo que está entre llaves.

Marcar esta lección como completada

HTML base

Crear el primer index.html que vamos a diseñar

CSS necesita HTML. HTML crea los elementos y CSS los diseña. En este primer archivo vamos a crear una pantalla inicial sencilla para una experiencia WebAR.

Dónde va este código: crea una carpeta llamada css-webar-basico. Dentro crea un archivo llamado index.html. Pega este código completo desde la línea 1.

Archivo HTML inicialindex.html

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>CSS para WebAR</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="ar-start">
      <p class="tag">WebAR CSS</p>
      <h1>Escanea el producto</h1>
      <p>Apunta la cámara hacia la imagen objetivo.</p>
      <button class="ar-button" type="button">Iniciar experiencia</button>
    </main>
  </body>
</html>

Explicación línea por línea

Línea 7: conecta el archivo styles.css. Sin esta línea, el navegador mostrará el HTML sin diseño.
Línea 10: class="ar-start" crea una clase para diseñar toda la pantalla inicial desde CSS.
Línea 11: class="tag" nos permitirá diseñar una etiqueta pequeña encima del título.
Línea 14: class="ar-button" nos permitirá convertir el botón normal en un botón grande, cómodo y visual.

Marcar esta lección como completada

Primer CSS

Crear styles.css y conectar estilos con HTML

Ahora creamos el archivo CSS. Recuerda: debe llamarse exactamente styles.css porque así lo conectamos en el HTML.

Dónde va este código: en la misma carpeta donde tienes index.html, crea styles.css. Pega este código completo.

CSS inicialstyles.css

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: Arial, sans-serif;
}

body {
  color: white;
  background: #0f172a;
}

.ar-start {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
}

.tag {
  margin: 0;
  color: #38bdf8;
  font-weight: 800;
  text-transform: uppercase;
}

Explicación del CSS

Líneas 1 a 3: * selecciona todos los elementos. box-sizing: border-box hace que padding y borde no aumenten el tamaño final de las cajas.
Líneas 5 a 10: preparamos html y body para que ocupen altura completa y usamos una fuente simple.
Línea 7: margin: 0 quita el margen automático que el navegador pone por defecto.
Línea 13: color: white define el color de texto principal.
Línea 14: background pinta el fondo. En WebAR este fondo suele verse antes de activar cámara.
Línea 18: 100dvh usa la altura dinámica del dispositivo. Es útil en móviles porque la barra del navegador cambia de tamaño.
Líneas 19 a 21: grid, place-items y align-content centran el contenido sin cálculos manuales.

Marcar esta lección como completada

Selectores

Clases, etiquetas, hijos y estados

Un selector le dice al navegador qué elemento debe recibir un estilo. En WebAR usamos muchos selectores de clase porque son claros, reutilizables y fáciles de activar desde JavaScript.

Selectores usados en la interfazstyles.css

.ar-start h1 {
  margin: 0;
  font-size: clamp(2rem, 9vw, 4.5rem);
  line-height: 1;
}

.ar-start p {
  max-width: 520px;
  margin: 0;
  color: #cbd5e1;
}

.ar-button {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #38bdf8;
}

Qué significa cada selector

.ar-start h1: selecciona solo los títulos h1 que están dentro de un elemento con clase ar-start. No afecta otros h1 de la página.
.ar-start p: selecciona párrafos dentro de la pantalla inicial. Esto evita diseñar todos los párrafos del sitio.
.ar-button: selecciona cualquier elemento con esa clase. En nuestro caso es el botón de inicio.
border-radius: 999px: crea un botón tipo píldora. Es común en interfaces móviles porque se ve táctil y cómodo.
clamp(): hace que el título sea responsive: tiene tamaño mínimo, tamaño flexible y tamaño máximo.

Marcar esta lección como completada

Modelo de caja

Margin, padding, border y tamaño real

Cada elemento HTML es una caja. CSS controla el contenido, el espacio interno, el borde y el espacio externo. Entender esto evita que la interfaz se desordene sobre la cámara.

Las cuatro partes de una caja

Content: el texto, imagen o contenido interno.
Padding: espacio entre el contenido y el borde.
Border: línea alrededor de la caja.
Margin: espacio externo que separa una caja de otra.

Botón con modelo de cajastyles.css

.ar-button {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #38bdf8;
  font-weight: 800;
}

Explicación línea por línea

Línea 59: min-height garantiza que el botón tenga una altura mínima cómoda para tocar en móvil.
Línea 60: padding: 0 22px significa 0 arriba/abajo y 22px izquierda/derecha.
Línea 61: border: 0 elimina el borde predeterminado del botón.
Línea 62: border-radius redondea la caja.
Línea 64: font-weight aumenta el grosor del texto para mejorar lectura sobre cámara.

Marcar esta lección como completada

Unidades y colores

px, rem, vw, dvh, hex y rgba

CSS tiene muchas unidades. No se usan todas en todos los proyectos. En WebAR usamos especialmente unidades que funcionan bien en móvil.

Unidades útiles para WebAR

px: tamaño fijo. Útil para bordes, iconos pequeños y separaciones exactas.
rem: relativo al tamaño base de fuente. Útil para textos y espaciados consistentes.
vw: porcentaje del ancho de pantalla. 72vw significa 72% del ancho.
dvh: altura dinámica de la ventana. Muy útil en móvil.
%: relativo al contenedor padre.

Unidades y colorstyles.css

.scanner-frame {
  width: min(72vw, 320px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 26px;
  background: rgba(15, 23, 42, .34);
}

Qué hace cada valor

min(72vw, 320px): el scanner mide 72% de la pantalla, pero nunca pasa de 320px.
aspect-ratio: 1: mantiene el scanner cuadrado sin definir altura manual.
rgba(): permite usar color con transparencia. Es clave para overlays encima de cámara.
#0f172a: es un color hexadecimal. Representa rojo, verde y azul en una forma compacta.

Marcar esta lección como completada

Layout

Flexbox y Grid para organizar interfaces WebAR

Layout significa cómo se acomodan los elementos en pantalla. Para WebAR necesitamos layouts que no bloqueen la cámara y que sigan siendo cómodos en pantallas pequeñas.

Grid y Flexstyles.css

.ar-start {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  min-height: 100dvh;
}

.button-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

Explicación clara

display: grid: crea una cuadrícula. Aquí la usamos para centrar todo de forma simple.
place-items: center: centra elementos horizontal y verticalmente dentro de sus celdas.
gap: separa elementos sin usar márgenes individuales.
display: flex: acomoda botones en fila.
flex-wrap: wrap: permite que los botones bajen a otra línea si no caben.

Marcar esta lección como completada

UI nativa MindAR

Personalizar el scanner de MindAR sin duplicarlo

En el básico no vamos a crear otra interfaz encima del scanner de MindAR. Vamos a tocar lo mínimo: tamaño del scanner nativo y fondo del loader. Esto enseña una idea clave de CSS: una librería puede generar HTML y tú puedes rediseñarlo con selectores.

CSS básico para UI nativastyles.css

.mindar-ui-loading {
  background: rgba(2, 6, 23, .92) !important;
}

.mindar-ui-scanning .scanning {
  width: min(72vw, 320px) !important;
  height: min(72vw, 320px) !important;
}

Explicación del CSS

.mindar-ui-loading: selecciona la capa de carga que MindAR crea al iniciar cámara.
background: cambia el fondo de carga sin tocar JavaScript.
!important: aquí se usa porque MindAR trae estilos propios y necesitamos dar prioridad al estilo del estudiante.
.mindar-ui-scanning .scanning: selecciona el cuadro de escaneo nativo, no uno nuevo creado por nosotros.
min(72vw, 320px): hace que el scanner sea responsive y tenga un tamaño máximo.

Marcar esta lección como completada

Capas WebAR

position, z-index y pointer-events

En WebAR hay una cámara, un canvas 3D y una interfaz HTML. CSS decide qué capa queda encima y qué elementos pueden recibir clics o toques.

CSS para capas sobre cámarastyles.css

.ar-ui {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.ar-ui button,
.ar-ui a {
  pointer-events: auto;
}

a-scene {
  position: fixed;
  inset: 0;
  z-index: 10;
}

Por qué estas propiedades son críticas

position: fixed: fija la interfaz a la pantalla, incluso si la página pudiera hacer scroll.
inset: 0: hace que la capa ocupe toda la pantalla.
z-index: controla qué capa aparece encima. Números mayores aparecen sobre números menores.
pointer-events: none: evita que una capa invisible bloquee la escena o la cámara.
pointer-events: auto: vuelve a permitir clics en botones específicos.

Marcar esta lección como completada

Responsive móvil

Safe area, media queries y botones táctiles

Una interfaz WebAR casi siempre se usa con el teléfono en la mano. El CSS debe respetar pantallas pequeñas, notch, barras del navegador y botones fáciles de tocar.

CSS responsive para WebARstyles.css

.bottom-ui {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 40;
}

.panel {
  width: min(92vw, 520px);
  padding: clamp(14px, 4vw, 28px);
}

@media (max-width: 520px) {
  .ar-button {
    width: 100%;
    min-height: 52px;
  }
}

Explicación

env(safe-area-inset-bottom): evita que un botón quede debajo de la barra inferior del iPhone.
max(): usa el valor más seguro entre margen normal y safe area.
min(): impide que el panel sea demasiado ancho.
clamp(): permite que el padding se adapte sin salirse de límites razonables.
@media: aplica reglas solo cuando se cumple una condición, por ejemplo pantallas pequeñas.

Marcar esta lección como completada

MindAR

Aplicar el CSS a una escena real de realidad aumentada

Ahora conectamos lo aprendido con MindAR. Este HTML ya carga A-Frame, MindAR, una escena AR y una interfaz encima de la cámara.

Dónde va este código: reemplaza tu index.html por esta versión acumulada. El CSS que ya escribiste servirá para diseñar la interfaz.

HTML con MindAR y UI CSSindex.html

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>CSS WebAR MindAR</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <div class="ar-ui">
      <div class="scanner-frame"><div class="scanner-corners"></div><div class="scan-line"></div></div>
      <p id="status-message">Busca la imagen objetivo</p>
      <button id="start-ar" class="ar-button" type="button">Iniciar AR</button>
    </div>

    <a-scene mindar-image="imageTargetSrc: targets/poster.mind; autoStart: false;" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
      <a-entity id="target" mindar-image-target="targetIndex: 0">
        <a-box color="#38bdf8" position="0 0 0" scale=".45 .45 .45"></a-box>
      </a-entity>
    </a-scene>
  </body>
</html>

Cómo se relaciona CSS con MindAR

Líneas 13 a 17: esta interfaz HTML se diseña con CSS y vive encima de la escena AR.
Línea 19: a-scene crea el canvas de A-Frame/MindAR. CSS lo puede posicionar a pantalla completa.
Línea 21: id="target" permitirá que JavaScript escuche targetFound y targetLost en el nivel intermedio.
Línea 22: la caja es el contenido aumentado. En cursos de WebAR puede reemplazarse por modelos, videos o imágenes.

Marcar esta lección como completada

.mind

Compilar el marcador para probar la interfaz

El archivo .mind es el target compilado. Para que la experiencia funcione, guarda el resultado como targets/poster.mind.

Compilador .mind integrado

Sube una imagen con detalles, texto, contraste o bordes. Evita imágenes planas, borrosas o repetitivas.

Subir imagen target

No hay imágenes seleccionadas.

Selecciona una imagen para comenzar.

Marcar esta lección como completada

Template

Descargar el proyecto básico completo

Este ZIP contiene el proyecto básico con pantalla inicial, escena MindAR, personalización básica del loader y scanner nativo de MindAR y poster.mind de práctica incluido.

Template CSS WebAR Básico

Incluye index.html, styles.css, app.js y carpeta targets.

Descargar template básico

Marcar esta lección como completada

Ingresa tu código de estudiante

La ruta correcta para aprender CSS aplicado a WebAR

Qué aprenderás primero

Qué es CSS y por qué importa en WebAR

Qué hace CSS

Qué no hace CSS

Cómo se escribe una regla CSS

Explicación línea por línea

Vocabulario que debes dominar

Crear el primer index.html que vamos a diseñar

Explicación línea por línea

Crear styles.css y conectar estilos con HTML

Explicación del CSS

Clases, etiquetas, hijos y estados

Qué significa cada selector

Margin, padding, border y tamaño real

Las cuatro partes de una caja

Explicación línea por línea

px, rem, vw, dvh, hex y rgba

Unidades útiles para WebAR

Qué hace cada valor

Flexbox y Grid para organizar interfaces WebAR

Explicación clara

Personalizar el scanner de MindAR sin duplicarlo

Explicación del CSS

position, z-index y pointer-events

Por qué estas propiedades son críticas

Safe area, media queries y botones táctiles

Explicación

Aplicar el CSS a una escena real de realidad aumentada

Cómo se relaciona CSS con MindAR

Compilar el marcador para probar la interfaz

Compilador .mind integrado

Descargar el proyecto básico completo

Template CSS WebAR Básico

Escanea tu imagen objetivo