Crear una web con efecto vintage CRT y fosforo naranja

nadamas · 29 Nov 2024

Captura de pantalla 2024-11-29 082949.jpg

Hacer una web con este efecto.

Si es asi? Algún programador puede hacérmelo a un módico precio?

Adonis. · 29 Nov 2024

nadamas dijo:
Ver el archivo adjunto 1376152

Hacer una web con este efecto.

Si es asi? Algún programador puede hacérmelo a un módico precio?

Si se puede hacer.

nadamas · 29 Nov 2024

Adonis. dijo:
Si se puede hacer.

Como?

Adonis. · 29 Nov 2024

nadamas dijo:
Como?

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.

nadamas · 29 Nov 2024

Adonis. dijo:
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)

Puko · 29 Nov 2024

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...

matimu · 29 Nov 2024

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

nadamas · 30 Nov 2024

Puko dijo:
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

Puko · 30 Nov 2024

nadamas dijo:
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>

nadamas dijo:
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>

nadamas · 1 Dic 2024

No sé dónde poner eso?

Lo puse en donde el theme donde los códigos y no hace nada.

Puko · 1 Dic 2024

nadamas dijo:
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.

nadamas · 2 Dic 2024

Puko dijo:
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

nadamas · 2 Dic 2024

El color ya lo puse naranja: #FF6600

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.jpeg

Puko · 2 Dic 2024

nadamas dijo:
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"...