Crear una web con efecto vintage CRT y fosforo naranja

  • Autor Autor nadamas
  • Fecha de inicio Fecha de inicio
nadamas

nadamas

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Captura de pantalla 2024-11-29 082949.webp




Hacer una web con este efecto.

Si es asi? Algún programador puede hacérmelo a un módico precio?
 
Si quieres simular un terminal, y que tenga ese estilo (vintage) se puede programar sin problema.

Si quieres que la página se vea con esos efectos (supongamos, entradas, páginas, etc..) también, solo se necesita cambiar el estilo de la página. (cambiar colores de letra, agregarle text-shadow, etc..)

Todo depende de lo que requieras que se haga.
 
Si quieres simular un terminal, y que tenga ese estilo (vintage) se puede programar sin problema.

Si quieres que la página se vea con esos efectos (supongamos, entradas, páginas, etc..) también, solo se necesita cambiar el estilo de la página. (cambiar colores de letra, agregarle text-shadow, etc..)

Todo depende de lo que requieras que se haga.

Tu sabes hacerlo y que salgan las letras tipo lucecitas?

Yo estoy con una web de grupos de whatsapp, y hago actividades.. pero quiero hacer algo llamativo, así tipo vintage con efecto fosforo naranja (Con un filtro en toda la web y letras brillantes)
 
solo haces un elemento con una clase por ejemplo .letrasx con
color
font-size
font-family
text-shadow

y se lo pones al div que quieres

<div class="letrasx">
xxx
<br>
xxx
</div>

En resumen...

 
Última edición:
Se, con cualquier glow generator online, (css con drop shadow con 0 distancia etc.
Tambien algun fondo que no sea negro absoluto (ya que el crt no lo logra) y que se le vea algun tramado (simulado el dot pitch)
Si te hace falta colaborador, manda msj
 
solo haces un elemento con una clase por ejemplo .letrasx con
color
font-size
font-family
text-shadow

y se lo pones al div que quieres

<div class="letrasx">
xxx
<br>
xxx
</div>

En resumen...


Si esto buscaba. Muchas gracias.

Y en que parte se mete esto entonces?

Se pone en toda la web al completo?

Gracias
 
Y en que parte se mete esto entonces?
en tu archivo css
o
abajo de <head> :

<style>
.letrasx {
color: #FFBF00;
font-size: 16px;
font-family: courier;
text-shadow: 1px 1px 18px #FFEF00;
}
</style>

Se pone en toda la web al completo?
en el ejemplo solo lo que esta dentro del div con class "letrasx"
si quieres que sea toda la página se lo pones a body en lugar del div "letrasx":

body {
color: #FFBF00;
font-size: 16px;
font-family: courier;
text-shadow: 1px 1px 18px #FFEF00;
}

o

le agregas la class a body:

.letrasx {
color: #FFBF00;
font-size: 16px;
font-family: courier;
text-shadow: 1px 1px 18px #FFEF00;
}

<body class="letrasx">
...
</body>
 
Última edición:
No sé dónde poner eso?

Lo puse en donde el theme donde los códigos y no hace nada.
 
No sé dónde poner eso?
¿cuál eso?
el código css va en tu css o en el link de tu archivo.css
y el html, pues ahi en el html
o no le pusiste el selector al div
o al selector css no le pusiste el punto (.letrasx)
o no sé, ni siquiera pones la página para ver.
 
en tu archivo css
o
abajo de <head> :

<style>
.letrasx {
color: #FFBF00;
font-size: 16px;
font-family: courier;
text-shadow: 1px 1px 18px #FFEF00;
}
</style>


en el ejemplo solo lo que esta dentro del div con class "letrasx"
si quieres que sea toda la página se lo pones a body en lugar del div "letrasx":

body {
color: #FFBF00;
font-size: 16px;
font-family: courier;
text-shadow: 1px 1px 18px #FFEF00;
}

o

le agregas la class a body:

.letrasx {
color: #FFBF00;
font-size: 16px;
font-family: courier;
text-shadow: 1px 1px 18px #FFEF00;
}

<body class="letrasx">
...
</body>


Vale, las letras he conseguido que se cambien, pero estan en color amarillo. Como se pone el color naranja?

Gracias
 
El color ya lo puse naranja: #FF6600

Captura de pantalla 2024-11-29 082949.webp



Así me ha salido, con el fondo negro no salen las luces, tengo que ponerlo con otro color similar.

WhatsApp Image 2024-12-02 at 16.36.47.webp
 
Última edición:
Así me ha salido, con el fondo negro no salen las luces, tengo que ponerlo con otro color similar.
igual que todo... solo cambiale el color hexadecimal

si quieres en toda la página, cambia/ponle

body {
background-color: #1E140A;
}

o

si quieres solo esa parte/div, solo ponle css al selector, por ejemplo

si el div tiene una class llamada "postx", igual, solo ponle background-color

<div class="postx">
...
</div>

.postx
{
background-color: #1E140A;
}

En firefox, en Herramientas para desarrolladores tienes el "capturador de colores"...
2024-12-02.163536.webp
 
Atrás
Arriba