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('https://png.pngtree.com/thumb_back/fh260/background/20240104/pngtree-vibrant-green-squama-texture-abstract-background-resembling-snake-dragon-or-fish-image_13891014.png');

  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="flip-container">

    <div class="card">

    <div class="front"></div>

    <div class="back"

Grid - Ajuste de imagenes

Grid para imagenes con enlaces

Código fuente:

CSS - Quitar el fondo blanco de una imagen con css

 Quitar el fondo blanco de una imagen con css

Simple pero poderoso código...

mix-blend-mode: multiply;

background-color: white;

Delineado de letras con css

Delinear letras con css

Solo copia y pega...

-webkit-text-stroke-width: 1px;

-webkit-text-stroke-color: #000000;

color: white; 

Scroll behavior smooth

Habilitar scroll behavior smooth en Google Chrome

Para trabajar a la par con VSC y que nos muestre lo que hacemos, tenemos que habilitar esta opción en GChrome desde chrome://flags/

CSS - Flip Card

Voltea la tarjeta al hacer clic sobre ella...

<!------ FLIP-CARD 2------>

            <div class="scene scene--card">

                <input id="card" type="checkbox">

                <label for="card">

                    <div class="card">

                    <div class="card_face card_face--front">front</div>

                    <div class="card_face card_face--back">back</div>

                    </div>

                </label>

            </div> 

VSC - Sticky scroll

Modificar Sticky Scroll en Visual Studio Code

Visual Studio Code

 En el apartado de settings y escribimos sticky para ver las opciones.

HTML5 - Menu con submenu

 Menu con submenu

HTML5

<!-- MENU CON SUBMENU - NAVEGACION -->  

    <div id="navegacion">

        <ul class="nav"

HTML5 - Cajas con estilo grid

Cajas con estilo grid

HTML5

<!-- CAJAS GRID -->

    <div class="boxes">

        <div class="box-1">#1</div>

        <div class="box-1">#2</div>

        <div class="box-1">#3</div>

        <div class="box-1">#4</div>

    </div>

CSS3

Menú lateral con funcion para ver contenido

HTML5

<!-- SECTION BOTONES TREN -->