Iframe - Código para streaming deportivos

Un iframe para ver streaming deportivos en vivo

<div class="ifcontenedor">

    style="top: -20px; height: 410px;"

    <div class="tema-dcanal">

        <h1>DirecTV Sports</h1>

        <div class="sportsif">

           <iframe width="560" height="315" src=""

            title="YouTube video player" frameborder="0"

            allow="accelerometer; autoplay; clipboard-write;

            encrypted-media; gyroscope; picture-in-picture;

            web-share" referrerpolicy="strict-origin-when-cross-origin"

                allowfullscreen ></iframe>

        </div>  

    </div>

--- CSS ---

.ifcontenedor{

    width: 100%;

    height: auto;

    background: rgb(24, 24, 24);

    display: flex;

    flex-flow: row wrap;

    align-items: center;

    justify-content: center;

    padding: 50px 0px;

}

.tema-dcanal{

    margin: 10px;

}

.sportsif{

    width: 280px;

    height: 150px;

    background: black;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 3px solid tomato;

    overflow: hidden;

    border-bottom-left-radius: 10px;

    border-bottom-right-radius: 10px;

}

.sportsif iframe{

    position: relative;

    width: 350px;

    height: 300px;

    top: -70px;

    background: rgb(58, 58, 58);

}

Creado para fútbol libre...

Configuración en modem para el servicio de Internet

Configuración de internet para un mejor rendimiento.

Recuerda ingresar a la puerta predeterminada que te muestra CMD... ipconfig 192.168.1.1, aunque puede ser diferente. Y si tienes router, lo recomendable es conectarlo con cable la 1era vez y configurarlo.

En 5G sigue siendo igual WPA2-PSK-AES.

Recuerda siempre investigar para que funciona cada configuración del equipo.

CSS - Borde interior

 Borde interior con css

Código:

    outline: 3px solid rgb(255, 26, 26);

    outline-offset: -3px;

iframe - En lugar específico

 Como abrir un iframe en un lugar específico.

Código:

HTML5

<div class="sportsif">

<iframe width="560" height="315" src="https://futbol-libre.su/espn-1/"

title="YouTube video player" frameborder="0" allow="accelerometer;

autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;

web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen >

</iframe>

</div>  

CSS

.sportsif{

    width: auto;

    height: 200px;

    background: black;

}

.sportsif iframe{

    position: relative;

    width: 400px;

    height: 350px;

    top: -150px;

    background: red;

}

Edge - Eliminar microsoft edge de Windows 10

Comando para eliminar con Power Shell lo que esta dentro de la carpeta con extension .exe:
.\setup.exe --uninstall --system-level --verbose-logging --force-uninstall Ruta Menu Inicio:

Rura para eliminar los botones que no queremos del menú inicio:
C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp

Seguir los pasos de acá You2

Youtube - Como compartir vídeos de youtube en tu sitio web

Comparte vídeos de Youtube en tu sitio web

HTML

CÓDIGO YOUTUBE - Cuando no se puede compartir en tu sitio web es porque

el dueño del vídeo no deja compartirlo.

<iframe width="570" height="350" src="https://www.youtube.com/embed/

GrY4RRugZAY?si=IRd9Llg_0AFg5WwJ" title="YouTube video player"

frameborder="0" allow="accelerometer; autoplay; clipboard-write;

encrypted-media; gyroscope; picture-in-picture; web-share"

referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

La URL del video deberia ir algo como:
https://www.youtube.com/embed/XXXXXXXX
Donde XXX es el ID del video
Estando en Youtube hay que presionar el boton de compartir



Posterior a ello, hay que copiar el enlace que aparece desde el boton azul:



Nos arroja este ejemplo de enlace:
https://youtu.be/w3z0JI0dAWA?si=pZ-684sJzFHXR5uY

Ya solo hay que cambiarlo a la 1era URL ya mencionada y listo..

Gracias a este brother ---->

Impresora - Compartida en red desde otro ordenador

 Compartir impresora en red desde otra pc

Hay que ingresar a la computadora que si tiene la conexión de la impresora y revisar su ip, que es a donde vamos a ingresar (En cmd escribimos hostname).La impresora tiene que estar compartida en red.

Los archivos de la impresora compartida hay que crear accesos directos en la computadora donde vamos a querer instalarla.

Nunca olvidar que para acceder a la red tenemos que usar los slash invertidos \\192.168.20.52

raíz \\$c$

CEMU - Configuración para jugar en PC

Configuración de emulador CEMU

Descargar: CEMU

Recuerda que tienes que seleccionar la opción del sistema operativo de tu pc.

CSS - Letras con fondo gradiente

Código para letras con fondo gradiente

h1{

  font-size: 4rem;

  text-align: center;

  margin-top: 30px;

  background: -webkit-linear-gradient(left top, green, yellow);

  background: linear-gradient(to bottom right, green, yellow);

  -webkit-background-clip: text;  

  -webkit-text-fill-color: transparent;

}

Siempre lo hacemos fácil, copiar y pegar. (el truco es que background

debe estar encima de webkit.)

Gradiente en línea.

CSS - Imagen dentro de texto

Imágen dentro de etiqueta html H1

Ya sabemos que hacer... Copiar y pegar el código para hacerlo igual. (No olvides modificarlo a tu gusto)

CSS

h1{

  width: auto;

  color: transparent;

  font-family:fantasy;

  font-size: 10rem !important;

  font-weight: bold;

  text-transform: uppercase;

  background-image: url('de imagen');

  background-attachment: fixed;

  background-clip: text;

  -webkit-text-stroke: 1px rgb(111, 255, 0);

}

De donde viene el código. FalconMaster..

RetroArch en pc

 Configurar RetroArch para Playstaion 2

Hay que seguir los pasos de este vídeo de Youtube.

Si por x o y razón no funciona correctamente, hay que agregar la carpeta de pcsx2 dentro de cada juego para que los corra correctamente.

CSS - Flip Card con contenido

 Flip Card con contenido al reverso 

 

Código HTML

<div class="contenedor-fc">

    <div class="flip-container">

      <div class="card">

        <div class="front">

            <h2>Zoo</h2>

        </div>

        <div class="back">

          <!-- Aquí va el contenido-->

        </div>

      </div>

    </div>

          <!-- Una 2da flip card -->

  <div class="flip-container">

      <div class="card card2">

        <div class="front front2">

          <h2>Herpetario</h2>

        </div>

        <div class="back back2">

          <!-- Aquí va el contenido-->

        </div>

      </div>

  </div>

  </div>

Código CSS

/*************** FLIP ***************/

.contenedor-fc{

  width: 100%;

  height: auto;

  max-height: auto;

  display: flex;

  flex-flow: row wrap;

  align-items: center;

  justify-content: center;

  margin: 30px 0px;

}

/* FONDO DE FLIP */

.flip-container {

  background-color: rgb(201, 201, 201);

  width: 250px;

  height: 350px;

  perspective: 1000px;

  margin: 10px;

  -webkit-box-shadow: 10px 15px 18px 1px rgba(0,0,0,0.75);

  -moz-box-shadow: 10px 15px 18px 1px rgba(0,0,0,0.75);

  box-shadow: 10px 15px 18px 1px rgba(0,0,0,0.75);

}

.card {

  position: relative;

  width: 100%;

  height: 100%;

  text-align: center;

  transition: transform 1s;

  transform-style: preserve-3d;

}

.flip-container:hover .card {

  transform: rotateY(180deg);

}

.front, .back {

  position: absolute;

  width: 100%;

  height: 100%;

  backface-visibility: hidden;

  display: flex;

  align-items:first baseline;

  justify-content: end;

  font-size: 1.3rem;

}

.front {

  background: url(https://img2.wallspic.com/

previews/9/7/1/0/7/170179/170179-lion-tiger

-zoo-dartmoor_zoo-berlin_zoological_garden-500x.jpg)

no-repeat center center /cover;

}

.front2{

  background: url(https://images.pexels.com/

photos/20546357/pexels-photo-20546357/free-

photo-of-a-bearded-lizard-sitting-on-a-rock.

jpeg?cs=tinysrgb&dpr=1&w=500)

no-repeat center center /cover;

}

h2{

    background: rgb(20, 18, 18);

    color: aliceblue;

    font-size: 1.2rem;

    padding: 3px 25px;

  }

.back {

   background: url(https://wallpaper.forfun.com/

fetch/d4/d42699333f55f4068f92d16196eb0773.jpeg)

no-repeat center center /cover;

   transform: rotateY(180deg);

   display: flex;

   flex-flow: column;

   align-items: center;

   justify-content: end;

}

.back2{

   background: url(https://i.pinimg.com/736x/f5/a3

/ee/f5a3eece3cba943ba0bba0a47d9617a2.jpg)

no-repeat center center /cover;

}

.back a{

  background: rgb(20, 18, 18);

  color: rgb(239, 224, 224);

  font-size: 14px;

  text-decoration: none;

  text-align: center;

  line-height: 30px;

  padding: 3px 20px;

  margin: 1px 0px;

  transition: .2s all linear;

}

.back a:hover{

  color: rgb(255, 245, 52);

  background: rgb(38, 32, 0);

  }