Tuto de la TV retro
Buenasss, espero que tengáis un gran día, petición de Patty traigo un tuto de la tv tipo retro, este tuto que les mostrare es básicamente un tv con distintos canales, bueno que en realidad son gifs, se puede cambiar tanto la fuente como el color, así sin más aquí está el tutorial.
Primero que nada, el código para hacerlo es este:
<div class="retro-tv-widget">
<div class="tv-title">✦ TV TIME ✦</div>
<div class="tv">
<!-- ANTENAS -->
<div class="tv-antenna antenna-left"></div>
<div class="tv-antenna antenna-right"></div>
<!-- CUERPO DE LA TELE -->
<div class="tv-body">
<!-- PANTALLA -->
<div class="tv-screen">
<div class="screen-glow"></div>
<div class="scanlines"></div>
<img
id="tvGif"
src="AQUÍ VA EL URL DEL PRIMER GIF QUE APARECERÁ"
alt="TV GIF"
>
<div class="tv-static"></div>
<div class="channel-number" id="channelNumber">
CH 01
</div>
</img
></div>
<!-- PARTE INFERIOR -->
<div class="tv-controls">
<div class="speaker">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="buttons">
<button onclick="previousChannel()" title="Previous channel">
◀
</button>
<button onclick="nextChannel()" title="Next channel">
▶
</button>
</div>
<div class="knob"></div>
</div>
<div class="tv-label">
CRT-2000
</div>
</div>
</div>
<div class="channel-name" id="channelName">
RANDOM
</div>
</div>
<style>
/* ================================
CONTENEDOR
================================ */
.retro-tv-widget {
width: 240px;
margin: 20px auto;
text-align: center;
font-family: Arial, sans-serif;
user-select: none;
}
/* ================================
TITULO
================================ */
.tv-title {
font-size: 15px;
letter-spacing: 2px;
font-weight: bold;
margin-bottom: 12px;
color: #263b78;
}
/* ================================
TELE
================================ */
.tv {
position: relative;
width: 220px;
margin: auto;
}
/* ================================
ANTENAS
================================ */
.tv-antenna {
position: absolute;
width: 65px;
height: 5px;
background: #27304d;
border-radius: 10px;
top: -12px;
z-index: 1;
}
.antenna-left {
left: 45px;
transform: rotate(-28deg);
}
.antenna-right {
right: 45px;
transform: rotate(28deg);
}
.tv-antenna::after {
content: "";
position: absolute;
width: 9px;
height: 9px;
background: #27304d;
border-radius: 50%;
top: -2px;
}
.antenna-left::after {
left: -4px;
}
.antenna-right::after {
right: -4px;
}
/* ================================
CUERPO
================================ */
.tv-body {
position: relative;
background: linear-gradient(
145deg,
#8fa5c8,
#607ba9
);
border: 4px solid #26385f;
border-radius: 28px 28px 25px 25px;
padding: 17px 15px 13px;
box-shadow:
inset 0 3px 0 rgba(255,255,255,.45),
inset 0 -5px 0 rgba(0,0,0,.15),
0 7px 15px rgba(20,30,70,.25);
}
/* ================================
PANTALLA
================================ */
.tv-screen {
position: relative;
width: 178px;
height: 135px;
margin: auto;
overflow: hidden;
background: #10152a;
border: 7px solid #303c5e;
border-radius: 20px;
box-shadow:
inset 0 0 15px rgba(0,0,0,.8),
0 2px 0 rgba(255,255,255,.3);
}
/* GIF */
.tv-screen img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter:
saturate(.9)
contrast(1.05);
}
/* ================================
BRILLO DE LA PANTALLA
================================ */
.screen-glow {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
ellipse at center,
transparent 45%,
rgba(0,0,0,.45) 100%
);
z-index: 3;
}
/* ================================
SCANLINES
================================ */
.scanlines {
position: absolute;
inset: 0;
pointer-events: none;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,.06) 0px,
rgba(255,255,255,.06) 1px,
rgba(0,0,0,.08) 2px,
rgba(0,0,0,.08) 4px
);
z-index: 4;
}
/* ================================
ESTÁTICA
================================ */
.tv-static {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle,
rgba(255,255,255,.12) 1px,
transparent 1px
);
background-size: 4px 4px;
opacity: .08;
z-index: 5;
}
/* ================================
CANAL
================================ */
.channel-number {
position: absolute;
top: 8px;
left: 10px;
color: white;
font-size: 9px;
font-family: monospace;
background: rgba(0,0,0,.35);
padding: 2px 5px;
border-radius: 3px;
z-index: 6;
}
/* ================================
CONTROLES
================================ */
.tv-controls {
height: 37px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* ALTAVOZ */
.speaker {
width: 58px;
display: flex;
gap: 4px;
}
.speaker span {
width: 4px;
height: 18px;
border-radius: 5px;
background: #35486e;
box-shadow:
inset 1px 1px rgba(255,255,255,.25);
}
/* BOTONES */
.buttons {
display: flex;
gap: 5px;
}
.buttons button {
width: 25px;
height: 25px;
padding: 0;
border: 2px solid #33466d;
border-radius: 50%;
background: #7188b2;
color: white;
font-size: 9px;
cursor: pointer;
box-shadow:
0 2px 0 #34476c;
}
.buttons button:hover {
transform: translateY(-1px);
background: #8399c1;
}
.buttons button:active {
transform: translateY(2px);
box-shadow: none;
}
/* RUEDA */
.knob {
width: 25px;
height: 25px;
border-radius: 50%;
background:
radial-gradient(
circle at 35% 30%,
#dce7f7,
#60759d 55%,
#34466b 100%
);
border: 2px solid #34476d;
box-shadow:
0 2px 0 #34476d;
}
/* ================================
ETIQUETA
================================ */
.tv-label {
font-family: monospace;
font-size: 8px;
letter-spacing: 2px;
color: #30466f;
margin-top: 2px;
}
/* ================================
NOMBRE DEL CANAL
================================ */
.channel-name {
margin-top: 10px;
font-family: monospace;
font-size: 11px;
letter-spacing: 2px;
color: #344875;
text-transform: uppercase;
}
/* ================================
CAMBIO DE CANAL
================================ */
.tv-changing {
animation: tvChange .25s linear;
}
@keyframes tvChange {
0% {
opacity: 1;
}
35% {
opacity: .15;
}
65% {
opacity: .7;
}
100% {
opacity: 1;
}
}
/* ================================
MÓVIL
================================ */
@media (max-width: 500px) {
.retro-tv-widget {
transform: scale(.95);
transform-origin: top center;
}
}
</style>
<script>
/* =================================
TUS CANALES
================================= */
var tvChannels = [
{
name: "NOMBRE DEL CANAL/GIF",
gif: "URL DEL MISMO GIF DEL PRINCIPIO DEL CÓDIGO"
},
{
name: "NOMBRE2",
gif: "URL DEL SEGUNDO GIF"
},
{
name: "NOMBRE3",
gif: "URL DEL GIF3"
},
{
name: "NOMBRE4",
gif: "URL DEL GIF4"
},
{
name: "NOMBRE5",
gif: "URL DEL GIF5"
}
];
var currentChannel = 0;
/* =================================
CAMBIAR CANAL
================================= */
function changeChannel(number) {
currentChannel = number;
var screen = document.querySelector(".tv-screen");
var gif = document.getElementById("tvGif");
screen.classList.remove("tv-changing");
void screen.offsetWidth;
screen.classList.add("tv-changing");
setTimeout(function() {
gif.src = tvChannels[currentChannel].gif;
document.getElementById("channelNumber").innerHTML =
"CH " + String(currentChannel + 1).padStart(2, "0");
document.getElementById("channelName").innerHTML =
tvChannels[currentChannel].name;
}, 100);
}
/* =================================
CANAL SIGUIENTE
================================= */
function nextChannel() {
currentChannel++;
if (currentChannel >= tvChannels.length) {
currentChannel = 0;
}
changeChannel(currentChannel);
}
/* =================================
CANAL ANTERIOR
================================= */
function previousChannel() {
currentChannel--;
if (currentChannel < 0) {
currentChannel = tvChannels.length - 1;
}
changeChannel(currentChannel);
}
</script>
También están los colores que se pueden cambiar, y en la parte de gifs podeís ir a GIPHY que tiene gifs de cualquier cosa, los gifs se adaptan al tamaño de la tele. Y ya está pegais el código ya modificado a vuestra manera, vais a diseño, a añadir un gadget, después a Html/JavaScript y ponéis el código.
Bueno eso fue todo bye bye!!!!:3
MUCHAS GRACIAS
ResponderEliminarde nadaa, si alguien quiere más tutos no tengo problemas
Eliminar