Este artículo recopila un conjunto de estilos CSS recurrentes y técnicas fundamentales, buscando clarificar su aplicación y funcionamiento en diversos escenarios del desarrollo web.

Manejo de Desbordamiento de Texto

Texto en una sola línea con elipsis

Para truncar texto que excede el ancho de su contenedor en una sola línea, mostrando puntos suspensivos al final, se utilizan las siguientes propiedades:

.titulo-truncado {
  overflow: hidden;         /* Oculta el contenido que desborda */
  text-overflow: ellipsis;  /* Muestra puntos suspensivos (...) */
  white-space: nowrap;      /* Evita el salto de línea */
}

Texto en múltiples líneas con elipsis (altura fija)

Cuando el contenedor tiene una altura máxima definida y se desea mostrar elipsis para texto que desborda en varias líneas, una técnica es usar un pseudo-elemento con gradiente:

.caja-texto-multiple-elipsis {
  overflow: hidden;
  position: relative;
  max-height: 90px; /* Altura máxima del contenedor */
  line-height: 1.5; /* Asegura un cálculo correcto de la altura */
}

.caja-texto-multiple-elipsis::after {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 40px; /* Espacio para los puntos suspensivos */
  background: linear-gradient(to right, transparent, #ffffff 50%); /* Fondo para ocultar el texto antes de los puntos */
}

Texto en múltiples líneas con elipsis (WebKit)

Para navegadores basados en WebKit (Chrome, Safari, etc.), existe una forma más directa de lograr la elipsis en múltiples líneas:

.contenido-multi-linea {
  display: -webkit-box;
  -webkit-line-clamp: 3;       /* Número máximo de líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;      /* Permite que las palabras se rompan para ajustarse */
}

Diseño de Formas Geométricas

Crear un Círculo Perfecto

Para convertir un elemento cuadrado en un círculo, se aplica border-radius: 50%:

.forma-circular {
  width: 100px;
  height: 100px; /* Asegurarse de que sea cuadrado */
  border-radius: 50%;
  background-color: #f0ad4e; /* Ejemplo de color */
}

Alineación Vertical de Elementos

Para alinear verticalmente imágenes y texto en la misma línea, la propiedad vertical-align: middle es muy útil:

span.etiqueta-icono {
    height: 100%; /* Asegura que abarque la altura del contenedor si es necesario */
    vertical-align: middle;
}
img.icono-inline {
    vertical-align: middle;
}

Color Estándar

Un gris comúnmente utilizado para texto o bordes secundarios es #bbbec4.

Disposición de Elementos Hijos en Contenedor Padre

Para colocar dos elementos hijos uno a la izquierda y otro a la derecha dentro de un padre, se pueden usar flotantes:

<div id="contenedor-principal" style="overflow: hidden;">
  <div id="elemento-izquierdo" style="float: left;">Contenido Izquierdo</div>
  <div id="elemento-derecho" style="float: right;">Contenido Derecho</div>
</div>

Manipulación Dinámica de CSS en Vue.js

Vue.js facilita la aplicación de estilos y clases CSS de forma dinámica:

• Estilos en línea con interpolación: Se utiliza la notación de objeto donde las propiedades CSS se escriban en camelCase.

<div :style="{ backgroundPositionY: -(indiceOffset % 7) * 2.5 + 'rem' }"></div>

• Clases condicionales (ternario):

<div :class="item.esDestacado ? 'destacado' : ''"></div>

• Clases condicionales (objeto):

<div :class="{ 'clase-activa': isActive }"></div>

Elementos Semánticos en HTML5

HTML5 introdujo elementos semánticos para dar un significado más claro a la estructura del contenido, mejorando la accesibilidad y el SEO. Aquí una guía sobre su uso:

• <div>: Un contenedor genérico sin significado semántico. Se usa principalmente para aplicar estilos o para agrupar elementos con fines de script.
• <section>: Representa una sección genérica de contenido agrupado, generalmente con un encabezado. Debe ser temática y autónoma.
• <article>: Designa contenido que puede existir de forma independiente del resto de la página, como una entrada de blog, un comentario o una noticia. Es el elemento más semántico para un contenido autosuficiente.
• <nav>: Contiene enlaces de navegación importantes, como un menú principal.
• <aside>: Define contenido que está relacionado tangencialmente con el contenido principal de la página, como barras laterales, publicidad o información complementaria.

La regla general es usar el elemento más específico y semánticamente apropiado. Por ejemplo, si un contenido podría ser un <article>, es preferible usar <article> en lugar de <section> o <div>.

Media Queries para Diseño Adaptativo

Las Media Queries permiten aplicar estilos diferentes según las características del dispositivo o la ventana de visualización:

• Orientación:

@media (orientation: portrait) {
  /* Estilos para orientación vertical (retrato) */
}
@media (orientation: landscape) {
  /* Estilos para orientación horizontal (paisaje) */
}

• Densidad de píxeles (DPI/Retina):

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi),
       (min-resolution: 2dppx) {
  /* Estilos para pantallas de alta densidad de píxeles */
}

• Puntos de interrupción (Breakpoints) comunes:

/* Escritorio grande (>= 1200px) */
@media screen and (min-width: 1200px) {
  body { font-size: 18px; }
}

/* Escritorio mediano (960px - 1199px) */
@media screen and (min-width: 960px) and (max-width: 1199px) {
  body { font-size: 16px; }
}

/* Tablet (768px - 959px) */
@media screen and (min-width: 768px) and (max-width: 959px) {
  body { font-size: 15px; }
}

/* Teléfono grande (480px - 767px) */
@media screen and (min-width: 480px) and (max-width: 767px) {
  body { font-size: 14px; }
}

/* Teléfono pequeño (< 479px) */
@media screen and (max-width: 479px) {
  body { font-size: 13px; }
}

Estructura de Formularios con Fieldset y Legend

Los elementos <fieldset> y <legend> se usan para agrupar y describir partes relacionadas de un formulario, mejorando la usabilidad y accesibilidad:

<form>
  <fieldset>
    <legend>Información Personal</legend>
    <label for="altura">Altura:</label> <input type="text" id="altura" /><br />
    <label for="peso">Peso:</label> <input type="text" id="peso" />
  </fieldset>
</form>

Estilos de Bloque Comunes

Un bloque de información o alerta puede estilizarse con las siguientes propiedades:

.bloque-informacion {
  padding: 8px 16px;
  background-color: #e0f2f7; /* Color de fondo claro, e.g., azul pálido */
  border-radius: 4px;
  border-left: 5px solid #2196f3; /* Borde izquierdo distintivo */
  font-family: 'Roboto', sans-serif; /* Fuente moderna */
  font-weight: normal;
  margin-bottom: 10px;
  font-size: 15px;
  color: #3f51b5; /* Color de texto oscuro */
  max-width: 600px; /* Ancho máximo para el bloque */
}

Función CSS calc()

La función calc() permite realizar operaciones matemáticas para definir valores de propiedades CSS:

.contenedor-altura-dinamica {
  height: calc(100vh - 150px); /* Altura de la ventana menos 150px */
}

Propiedad cssText

La propiedda JavaScript element.style.cssText permite obtener o establecer todas las declaraciones de estilo CSS en línea de un elemento como una cadena de texto. Es útil para aplicar múltiples estilos de forma programática y eficeinte.

Efecto de Clic Activo

Para crear un efecto visual cuando un elemento es "activo" (por ejemplo, al hacer clic o tocar), se puede usar la pseudo-clase :active:

div.boton-activo:active {
  background-color: #e0e6ed; /* Un color de fondo más oscuro o diferente */
  opacity: 0.9;
  transition: background-color 0.1s ease; /* Transición suave */
}

Animación de Carga de Contenido (Loading)

Una animación de "puntos suspensivos" para indicar carga es un patrón común:

.estado-carga {
  text-align: center;
  margin-top: 20px;
  color: #333;
}
.estado-carga::after {
  content: ''; /* Inicialmente vacío o un punto */
  animation: animacionCarga 2s steps(3) infinite; /* 3 pasos para '...', 2s de duración */
  display: inline-block; /* Para que 'content' tenga tamaño */
  width: 1.5em; /* Espacio para los puntos */
  overflow: hidden; /* Asegura que no se vea el texto antes de la animación */
  vertical-align: bottom; /* Alinea los puntos con el texto */
  margin-left: 0.2em;
}

@keyframes animacionCarga {
  0% { content: '.'; }
  33% { content: '..'; }
  66% { content: '...'; }
  100% { content: '.'; } /* Vuelve al inicio */
}

Estilos de Lista list-style

La propiedad list-style controla la apariencia del marcador de un elemento de lista. Para eliminar los marcadores por completo, se usa list-style: none. Otras opciones incluyen:

• disc: Círculo sólido (valor predeterminado).
• circle: Círculo vacío.
• square: Cuadrado sólido.
• decimal: Números arábigos (1, 2, 3...).
• lower-roman: Números romanos en minúsculas (i, ii, iii...).
• upper-roman: Números romanos en mayúsculas (I, II, III...).
• lower-alpha / lower-latin: Letras latinas en minúsculas (a, b, c...).
• upper-alpha / upper-latin: Letras latinas en mayúsculas (A, B, C...).

Selectores de Profundidad en CSS Scoped de Vue

Cuando se utiliza CSS con ámbito (scoped) en componentes Vue, los estilos normalmente solo afectan al componente actual. Para modificar estilos de componentes hijos o elementos inyectados por librerías (que no son parte del ámbito del componente padre), se pueden usar selectores de profundidad. El más común es ::v-deep o el alias /deep/ o >>> (este último obsoleto en algunos casos).

/* En un componente Vue con <style scoped> */
.componente-padre ::v-deep .componente-hijo-o-libreria {
  color: blue;
}
/* O la sintaxis alternativa: */
.componente-padre /deep/ .componente-hijo-o-libreria {
  color: blue;
}