Guía: Cómo Añadir un Efecto de Resplandor (Glow Effect) Source Pegasus 5.2 - Source Mu - Mu Server Files
 

Guía: Cómo Añadir un Efecto de Resplandor (Glow Effect) Source Pegasus 5.2

Publicado por Dakosmu, Dic 06, 2025, 10:32 PM

Tema anterior - Siguiente tema

0 Miembros y 1 Visitante están viendo este tema.

Dakosmu

Guía: Cómo Añadir un Efecto de Resplandor (Glow Effect) Source Pegasus 5.2

Introducción
Este tutorial te mostrará cómo aplicar el popular efecto visual de "Resplandor" o "Glow Effect" a cualquier elemento de tu sitio web en WordPress, como botones, títulos o imágenes, utilizando código CSS personalizado.

Paso 1: Identifica el Selector CSS del Elemento
Antes de añadir el código, necesitas saber exactamente a qué elemento quieres aplicarle el resplandor. Esto se hace identificando su Selector CSS (por ejemplo, el ID o la Clase CSS).

Si es un botón creado por tu tema, podría ser algo como:
.btn-principal.
Si lo añadiste tú con un bloque personalizado, puedes asignarle una clase, por ejemplo:
.mi-boton-brillante.

Paso 2: Accede a la Sección de CSS Adicional en WordPress
La manera más segura de añadir CSS sin modificar los archivos de tu tema es usando el Personalizador de WordPress:
  • En tu escritorio, navega a Apariencia > Personalizar.
  • Busca y haz clic en la pestaña CSS Adicional o CSS Personalizado.
  • Aquí es donde pegarás el código CSS en el siguiente paso.

Paso 3: Añade el Código CSS para el Efecto
Usaremos la propiedad box-shadow para simular el resplandor. Reemplaza
.mi-selector-aqui con la clase o ID que identificaste en el Paso 1.

Opción 1: Resplandor al Pasar el Ratón (Hover)
Este código aplica el resplandor solo cuando el usuario coloca el cursor sobre el elemento.
.mi-selector-aqui {
/* Define una transición suave para el efecto */
transition: box-shadow 0.3s ease-in-out;
}
.mi-selector-aqui:hover {
/* box-shadow: (Desplazamiento X) (Desplazamiento Y) (Desenfoque) (Dispersión) (Color) */
box-shadow: 0 0 15px 0 rgba(0, 123, 255, 0.8);
/* Puedes usar cualquier color, por ejemplo, #FFD700 para un resplandor dorado */
}

Opción 2: Resplandor Permanente y Reforzado al Hover
Este código hace que el elemento brille constantemente, intensificándose al pasar el ratón.
.mi-selector-aqui {
/* Resplandor sutil constante */
box-shadow: 0 0 5px rgba(247, 163, 2, 0.5);
/* Define una transición suave para el efecto */
transition: box-shadow 0.3s ease-in-out;
}
.mi-selector-aqui:hover {
/* Resplandor más intenso al pasar el ratón */
box-shadow: 0 0 20px rgba(247, 163, 2, 1);
}

Paso 4: Guarda y Publica
  • Una vez que hayas pegado tu código CSS, haz clic en el botón Publicar o Guardar Cambios en el Personalizador.
  • Visita tu sitio web para verificar que el efecto de resplandor se haya aplicado correctamente a tu elemento.

// Fragmento de ZzzObject.cpp - Lógica de renderizado de objetos

if (o->SubType == 1) { // Establece el color de la luz principal del cuerpo (Blanco) Vector(1.f, 1.f, 1.f, b->BodyLight);

// Renderiza la textura base
b->RenderBody(RENDER_TEXTURE, o->Alpha, o->BlendMesh, o->BlendMeshLight, o->BlendMeshTexCoordU, o->BlendMeshTexCoordV, o->HiddenMesh);

// Establece el color de la luz del efecto (Rojo/Naranja).
// Esto influye en el color del resplandor.
Vector(1.0f, 0.2f, 0.1f, b->BodyLight);

// ** LÍNEA CLAVE DEL GLOW/CHROME **
// RENDER_CHROME (Usa Chrome4/Chrome5) y RENDER_BRIGHT (el 'glow')
b->RenderBody(RENDER_CHROME | RENDER_BRIGHT, o->Alpha, o->BlendMesh, 1.f, o->BlendMeshTexCoordU, o->BlendMeshTexCoordV, o->HiddenMesh);

// Restaura el color de la luz del cuerpo a Blanco
Vector(1.f, 1.f, 1.f, b->BodyLight);
}
Bon Dia

🡱 🡳
Real Time Web Analytics