Report Blog Entry
Información básica: el código va en HTML/CSS Code
Televisión de hello Kitty 🩷 (灬º‿º灬)
Un pequeño problema: el filtro 1 tiene un pequeño punto blanco, luego lo arreglo supongo
[ Please comment if you use it. 🐌]
Comenten para usar porfis 🪲
Dato random que nadie pregunto 🔓: Haré un televisor de temática de Bob esponja
Puedes comentar algunas ideas y las haré talvez ;3
Hello Kitty tv: filtro 1°
<!-- TV Hello Kitty -->
<div class="contenedor-tv">
<div class="pantalla-interna">
<div class="capas-contenido">
<div class="video-capa">
<iframe src="https://www.youtube.com/embed/jIFCvzX5e7E?autoplay=1&loop=1&playlist=jIFCvzX5e7E&controls=0&modestbranding=1&mute=0&vq=small" frameborder="0" allow="autoplay; encrypted-media"></iframe>
</div>
<div class="capa-bloqueo">
<img src="https://i.postimg.cc/B6srcLm9/d0958a757cbe2dbd3ae0fc8f2abf1813.gif" class="gif-bloqueo">
</div>
</div>
<div class="filtros-maestro"></div>
</div>
<img src="https://i.ibb.co/gL6vtxfG/upscalemedia-transformed-7.png" class="tele-frente">
</div>
<style>
.contenedor-tv { position: relative; width: 350px; margin: 20px auto; overflow: hidden; }
.pantalla-interna {
position: absolute;
top: 41px;
left: 23px;
width: 304px;
height: 196px;
border-radius: 10px;
overflow: hidden;
z-index: 1;
background: #000;
filter: brightness(0.9) contrast(0.8) saturate(1.6) sepia(0.25);
animation: respiracion-tv 4s ease-in-out infinite;
}
@keyframes respiracion-tv { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.001); } }
.capas-contenido { position: absolute; width: 100%; height: 100%; filter: blur(0.6px); }
.video-capa, .capa-bloqueo {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: #000; display: flex; align-items: center; justify-content: center;
z-index: 1;
}
.video-capa iframe { width: 100%; height: 180px; border: none; position: relative; left: -3px; }
.gif-bloqueo { width: 100%; height: 100%; object-fit: cover; }
/* CORREGIDO: Usando 'filtros-maestro' en todo el CSS */
.filtros-maestro {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
z-index: 50; pointer-events: none;
border-radius: 10px; overflow: hidden;
background: linear-gradient(rgba(18, 16, 16, 0) 40%, rgba(0, 0, 0, 0.3) 60%);
background-size: 100% 2.5px;
box-shadow: inset 3.8px 0 0 rgba(255,0,0,0.3), inset -3.5px 0 0 rgba(0,255,255,0.5);
}
.filtros-maestro::after {
content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
z-index: 55;
background:
radial-gradient(circle at center, rgba(255, 255, 255, 0.12) 0%, transparent 85%),
linear-gradient(transparent 0%, rgba(200, 200, 255, 0.05) 5%, transparent 10%);
background-size: 100% 100%, 100% 200px;
background-repeat: no-repeat, repeat;
box-shadow: inset 0 0 30px 15px rgba(0,15,40,0.98);
animation: barrido-vertical 6s linear infinite;
}
@keyframes barrido-vertical { 0% { background-position: center, 0 -200px; } 100% { background-position: center, 0 200px; } }
.tele-frente { display: block; width: 100%; position: relative; z-index: 30; pointer-events: none; }
.capa-bloqueo { z-index: 15; animation: desvanecer 4s forwards; }
@keyframes desvanecer { 0%, 85% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
</style>
Hello Kitty tv: filtro 2°
<!-- Hello Kitty tv: filtro 2° -->
<div class="contenedor-tv">
<div class="pantalla-interna">
<div class="capas-contenido">
<div class="video-capa">
<iframe src="https://www.youtube.com/embed/B6oUohZnKIc?autoplay=1&loop=1&playlist=B6oUohZnKIc&controls=0&modestbranding=1&mute=0&vq=small" frameborder="0" allow="autoplay; encrypted-media"></iframe>
</div>
<div class="capa-bloqueo">
<img src="https://i.postimg.cc/B6srcLm9/d0958a757cbe2dbd3ae0fc8f2abf1813.gif" class="gif-bloqueo">
</div>
</div>
<div class="filtros-maestros"></div>
</div>
<img src="https://i.ibb.co/gL6vtxfG/upscalemedia-transformed-7.png" class="tele-frente">
</div>
<style>
.contenedor-tv { position: relative; width: 350px; margin: 20px auto; overflow: hidden; }
.pantalla-interna {
position: absolute; top: 41px; left: 23px; width: 304px; height: 196px;
border-radius: 10px; overflow: hidden; z-index: 1; background: #000;
filter: brightness(1.05) contrast(1.4) saturate(2.3) sepia(0.1);
animation: respiracion-tv 4s ease-in-out infinite;
}
@keyframes respiracion-tv { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.001); } }
.capas-contenido { position: absolute; width: 100%; height: 100%; filter: blur(0.35px); }
.video-capa, .capa-bloqueo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; align-items: center; justify-content: center; }
.video-capa iframe { width: 100%; height: 180px; border: none; position: relative; left: -3px; }
.gif-bloqueo { width: 100%; height: 100%; object-fit: cover; }
.filtros-maestros {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none;
border-radius: 10px; overflow: hidden;
background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
background-size: 100% 2.5px;
box-shadow: inset 3px 0 0 rgba(255,0,0,0.2), inset -3px 0 0 rgba(0,255,255,0.3);
}
.filtros-maestros::after {
content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 55;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.15) 0%, transparent 75%), linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 5%, transparent 10%);
background-size: 100% 100%, 100% 250px; animation: barrido-vertical 5s linear infinite;
box-shadow: inset 0 0 40px rgba(0,0,0,0.85);
}
@keyframes barrido-vertical { 0% { background-position: center, 0 -250px; } 100% { background-position: center, 0 250px; } }
.tele-frente { display: block; width: 100%; position: relative; z-index: 60; pointer-events: none; }
.capa-bloqueo { z-index: 15; animation: desvanecer 4s forwards; }
@keyframes desvanecer { 0%, 85% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
</style>
Hello Kitty tv: filtro 3°
<!-- TV hello Kitty-->
<div class="contenedor-tv">
<div class="pantalla-interna">
<div class="capas-contenido">
<div class="video-capa">
<iframe src="https://www.youtube.com/embed/lv30t_S65fw?autoplay=1&loop=1&playlist=lv30t_S65fw&controls=0&modestbranding=1&mute=0&vq=small" frameborder="0" allow="autoplay; encrypted-media"></iframe>
</div>
<div class="capa-bloqueo">
<img src="https://i.postimg.cc/B6srcLm9/d0958a757cbe2dbd3ae0fc8f2abf1813.gif" class="gif-bloqueo">
</div>
</div>
<div class="filtros-maestros"></div>
</div>
<img src="https://i.ibb.co/gL6vtxfG/upscalemedia-transformed-7.png" class="tele-frente">
</div>
<style>
.contenedor-tv { position: relative; width: 350px; margin: 20px auto; overflow: hidden; }
.pantalla-interna {
position: absolute; top: 41px; left: 23px; width: 304px; height: 196px;
border-radius: 10px; overflow: hidden; z-index: 1; background: #000;
filter: brightness(0.8) contrast(1.15) saturate(1.2);
animation: respiracion-tv 4s ease-in-out infinite;
}
@keyframes respiracion-tv { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.001); } }
.capas-contenido { position: absolute; width: 100%; height: 100%; filter: blur(0.4px); }
.video-capa, .capa-bloqueo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; align-items: center; justify-content: center; }
.video-capa iframe { width: 100%; height: 180px; border: none; position: relative; left: -3px; }
.gif-bloqueo { width: 100%; height: 100%; object-fit: cover; }
.filtros-maestros {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none;
border-radius: 10px; overflow: hidden;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%);
background-size: 100% 1.5px;
box-shadow: inset 2.7px 0 0 rgba(255,0,0,0.25), inset -2.7px 0 0 rgba(0,0,255,0.25);
}
.filtros-maestros::after {
content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 55;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%), linear-gradient(transparent 0%, rgba(255, 255, 255, 0.05) 5%, transparent 10%);
background-size: 100% 100%, 100% 200px;
animation: barrido-vertical 6s linear infinite;
box-shadow: inset 0 0 25px 10px rgba(0,0,0,0.95);
}
@keyframes barrido-vertical { 0% { background-position: center, 0 -200px; } 100% { background-position: center, 0 200px; } }
.tele-frente { display: block; width: 100%; position: relative; z-index: 60; pointer-events: none; }
.capa-bloqueo { z-index: 15; animation: desvanecer 4s forwards; }
@keyframes desvanecer { 0%, 85% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
</style>
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
Kitkatz2hell
Very cute!! Aww
Gracias 🐌
by Freddy; ; Report