es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Efecto de pantalla curvada CRT retro para sitio web/CSS

29 Jul, 2023 Programación

¡OK, así que esto NO es una auto-promoción!

Actualmente tengo un sitio web ciberpunk que ejecuta un foro de phpbb, el cual utiliza el tema prosilver predeterminado. Además de ese tema, tengo otro tema/aspecto llamado 1978 que le da al sitio web ese antiguo aspecto de terminal verde.
Lo que me gustaría hacer es crear esa apariencia curva como los antiguos monitores. Tengo cool-retro-term el cual utilicé como ejemplo del efecto que estoy buscando. (ver imagen). No me refiero a las líneas o el parpadeo, solo a la apariencia curva porque lo que quiero es que las personas puedan pulsar F11 para que se abra en pantalla completa en el navegador y parezca que están usando el sitio web en un antiguo monitor.

Supuse que debería configurar un div alrededor de todo el cuerpo o después y darle una clase, luego llamar algún CSS, tal vez un poco de JavaScript <– como si tuviera idea de cómo funcionaría…jaja
¿Qué busco es un punto de partida? Encontré algunas cosas en codepen pero no es exactamente lo que busco.

¿Alguna idea?

enter image description here

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Creando un aspecto curvado para un sitio web

    Como experto en TI especializado en CSS, web, curve y CRT, entiendo tu deseo de crear una estética única en tu sitio web. Para lograr el aspecto curvado que admiras de los monitores retro, podemos usar CSS para crear un efecto de curvatura alrededor del sitio web.

    Aquí tienes algunos pasos para comenzar:

    1. Crea un contenedor div alrededor del contenido de tu sitio web. Puedes darle a este div un id o una clase para llamarlo en tu archivo CSS.

    2. En tu archivo CSS, puedes usar las propiedades “transform” y “transform-origin” para crear el aspecto curvado. Aquí tienes un código CSS de ejemplo para comenzar:

    #container {
  -webkit-transform: perspective(400px) rotateY(7deg);
  -moz-transform: perspective(400px) rotateY(7deg);
  -ms-transform: perspective(400px) rotateY(7deg);
  transform: perspective(400px) rotateY(7deg);
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
    1. Haz ajustes en las propiedades transform y transform-origin hasta lograr el efecto curvado deseado. Es posible que debas ajustar el valor de la perspectiva, el grado de rotación y la posición del origen de la transformación hasta obtener una forma atractiva.

    ¡Espero que estos consejos te den un buen punto de partida para lograr el aspecto curvado que deseas! Recuerda seguir experimentando con CSS hasta encontrar un diseño que realmente destaque.

Comments are closed.