domingo, 15 de septiembre de 2024

VISUAL STUDIO CODE

AJUSTE DE LÍNEA QUE NO SE MUESTRE EL CÓDIGO DE LA CAJA

Descarga Visual Studio Code.

Solo hay que ir al menú en VSC desde view, apariencia y sticky scroll.
Quitamos la palomita y listo.

viernes, 12 de julio de 2024

Error - Aplicaciones de Inicio

No podemos ver carpeta de aplicaciones de inicio, ni tampoco desde administrador de tareas...

LO QUE TENEMOS QUE HACER ES SOLO AGREGAR LA CARPETA CON EL NOMBRE DE "Startup" EN ESTA DIRECCIÓN:

C:\Users\"TU USUARIO DONDE ESTAS"\AppData\Roaming\Microsoft\Windows\Start Menu\Programs

Y después de eso deberas poder acceder normal a tus aplicaciones de inicio y ver la información dentro del administrador de tareas.

Comenta si te funciono.

jueves, 13 de junio de 2024

JS - Audio en tu sitio con boton onclick

IMAGEN FIJA EN WEBSITE CON FUNCION ONCLICK
play and stop

Código para copiar y pegar

function playSound(sound2) {

var song1 = document.getElementById(sound2);

song1.volume = .25; // setting the volume to 25% because the sound is loud

if (song1.paused) { // if song1 is paused

song1.play();

} else {

song1.pause();

}

martes, 21 de mayo de 2024

CSS3 - Slider infinito

Código para que sus imagenes se muevan de derecha a izquierda infinitamente y sin espacios en blanco. Muy similar a Marquee, pero mucho mejor.

HTML5
<!------------- LOGOS SLIDE ------------->

  <div class="logos">
    <div class="logos-slide">
      <a href="https://xviewplus.com/" target="_blank"><img src="img/xview logo.jpg" /></a>
      <a href="https://www.paramountplus.com/home/" target="_blank"><img src="img/paramountplus logo.jpg" /></a>
      <a href="https://www.netflix.com/browse" target="_blank"><img src="img/netflix logo.jpg" /></a>
      <a href="https://play.max.com/home" target="_blank"><img src="img/hbo max logo.jpg" /></a>
      <a href="p/soccer.html"><img src="img/soccer logo.jpg" /></a>
      <a href="p/dinosaurios.html"><img src="img/jurassic park logo.jpg" /></a>
      <a href="p/zoo.html"><img src="img/zoo logo mk.jpg" /></a>
      <a href="https://www.youtube.com/" target="_blank"><img src="img/btn_youtube.jpg" /></a>
    </div>
    <div class="logos-slide">
      <a href="https://xviewplus.com/" target="_blank"><img src="img/xview logo.jpg" /></a>
      <a href="https://www.paramountplus.com/home/" target="_blank"><img src="img/paramountplus logo.jpg" /></a>
      <a href="https://www.netflix.com/browse" target="_blank"><img src="img/netflix logo.jpg" /></a>
      <a href="https://play.max.com/home" target="_blank"><img src="img/hbo max logo.jpg" /></a>
      <a href="p/soccer.html"><img src="img/soccer logo.jpg" /></a>
      <a href="p/dinosaurios.html"><img src="img/jurassic park logo.jpg" /></a>
      <a href="p/zoo.html"><img src="img/zoo logo mk.jpg" /></a>
      <a href="https://www.youtube.com/" target="_blank"><img src="img/btn_youtube.jpg" /></a>
    </div>

  </div>

CSS3
/************ CARRUSEL ************/

@keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100.25%);
    }
  }
  .logos {
    overflow: hidden;
    padding: 60px 0;
    background: white;
    white-space: nowrap;
    position: relative;
  } 
  .logos:before,
  .logos:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
  }
  .logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
  }
  .logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
  }
  .logos:hover .logos-slide {
    animation-play-state: paused;
  }
  .logos-slide {
    display: inline-block;
    animation: 22s slide infinite linear;
  } 
  .logos-slide img {
    height: 200px;
    margin: 0 40px;
    cursor: pointer;
  }
 

lunes, 13 de mayo de 2024

CSS 3 - Botón flecha con movimiento

Código para copiar y pegar...

HTML:

    <div id="container">
      <button class="learn-more">
        <span class="circle" aria-hidden="true">
          <span class="icon arrow"></span>
        </span>
        <a href="https://mike-salinas.blogspot.com/" 
        target="_blank" style="width: 100%; height: 100%;">
        <span class="button-text">Learn More</span></a>
      </button>
    </div>

CSS

button {

  position: relative;

  display: inline-block;

  cursor: pointer;

  outline: none;

  border: 0;

  vertical-align: middle;

  text-decoration: none;

  background: transparent;

  padding: 0;

  font-size: inherit;

  font-family: inherit;

  &.learn-more {

    width: 12rem;

    height: auto;

    .circle {

      transition: all 0.45s cubic-bezier(0.65,0,.076,1);

      position: relative;

      display: block;

      margin: 0;

      width: 3rem;

      height: 3rem;

      background: black;

      border-radius: 1.625rem;

      .icon {

        transition: all 0.45s cubic-bezier(0.65,0,.076,1);

        position: absolute;

        top: 0;

        bottom: 0;

        margin: auto;

        background: white;

        &.arrow {

          transition: all 0.45s cubic-bezier(0.65,0,.076,1);

          left: 0.625rem;

          width: 1.125rem;

          height: 0.125rem;

          background: none;

          &::before {

            position: absolute;

            content: '';

            top: -0.25rem;

            right: 0.0625rem;

            width: 0.625rem;

            height: 0.625rem;

            border-top: 0.125rem solid #fff;

            border-right: 0.125rem solid #fff;

            transform: rotate(45deg);

}

}

}

}

    .button-text {

      transition: all 0.45s cubic-bezier(0.65,0,.076,1);

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      padding: 0.75rem 0;

      margin: 0 0 0 1.85rem;

      color: black;

      font-weight: 700;

      line-height: 1.6;

      text-align: center;

      text-transform: uppercase;

}

}

  &:hover {

    .circle {

      width: 100%;

      .icon {

        &.arrow {

        background: white;

        transform: translate(1rem, 0);

}

}

}

    .button-text {

      color: white;

}

}

}

viernes, 3 de mayo de 2024

Javascript - Slider con botones

Slider con ayuda de Javascript

Código para pegarlo en tu sitio web.

HTML5

</div>

<button id="prev">Anterior</button>

<button id="next">Siguiente</button>

</div>

CSS3

#contenedor_slider{

width: 100%;

height: auto;

background: rgb(42, 143, 211);

display: flex;

flex-flow: column;

align-items: center;

justify-content: center;

}

.btn_slide{

}

#slider {

width: 600px;

height: 350px;

overflow: hidden;

position: relative;

background: black;

}

#slider img {

width: 100%;

height: 100%;

position: absolute;

opacity: 0;

}

JAVASCRIPT

const prev = document.getElementById('prev');

const next = document.getElementById('next');

const images = document.querySelectorAll('#slider img');

let currentImage = 0;

function showImage(n) {

images.forEach(img => img.style.opacity = '0');

images[n].style.opacity = '1';

currentImage = n;

}

prev.addEventListener('click', () => {

currentImage--;

if (currentImage < 0) currentImage = images.length - 1;

showImage(currentImage);

});

next.addEventListener('click', () => {

currentImage++;

if (currentImage >= images.length) currentImage = 0;

showImage(currentImage);

});

showImage(currentImage);

domingo, 21 de abril de 2024

HTML - Vídeo de fondo con letras encima

Vídeo de fondo con letras encima en HTML 5 y CSS 3

HTML 5
    <nav>
        <video src="../media/playita2.mp4" controls autoplay loop></video>            
        
        <h1>Contact us</h1>
    </nav>

CSS

nav{
    width: 100%;
    height: 300px;
    background: red;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
nav::before{
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(0, 0, 0, 0.596);
    position: absolute;
}
nav video{
    width: 100%;
}

domingo, 18 de febrero de 2024

Autoejecutables .Bat - Security for PC and Copy the document from the pc to your usb

****************************************

BAT CREAR-- ESCRIBIR LINEA EN BAT-- MOVER-- EJECUTAR EN CARPETA--

md Oops

echo

@ECHO off

ECHO start chrome.exe > "michellas.bat"

echo

move michellas.bat Oops

echo

start Oops\michellas.bat

-----------------------------------------------------------

move \Files

md Mike

md Oops

move Mike Oops

move Oops\Mike

move *.xlsx Excel > nul

move *.lnk Excel > nul

****************************************

domingo, 28 de enero de 2024

Código de botones creados con CSS

Los botones se crean con la etiqueta normal de <a>, solo que el CSS es el que vamos a modificar al gusto.

Acá el código CSS

.btn_rsoc a{
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.btn_rsoc a:nth-child(1){
    background-color: blue;
}
.btn_rsoc a:nth-child(2){
    background-color: green;
}

Este código es adicional (:hover)
.btn_rsoc a:nth-child(2){
    background-color: green...;
}

lunes, 22 de enero de 2024

CSS - ::before banner con background

Banner con background de color difuminado.

Acá el código que hay que agregar en CSS. Lo demás lo tienes que averiguar... Truco sencillo pero efectivo.

NOTA: Si lo haces bien, también puedes agregar un vídeo y encima un texto con background tenue...

CSS

header::before{
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(0, 0, 0, 0.532);
    position: absolute;
    z-index: 1;
}

domingo, 21 de enero de 2024

Photoshop - Aumentar el tamaño de herramientas

Aumentar el tamaño de las herramientas en Photoshop

Si las herramientas y botones se ven demasiado pequeños al momento de utilizar Photoshop, acá una solución.

Boton derecho encima de la aplicación y propiedades.
Acceder a pestaña de compatibilidad y dar clic sobre "Cambiar configuracion elevada de PPP"
Posterior: pestañear el cuadro de invalidar el comportamiento y seleccionar: Sistema o sistema (mejorado)

y listo con eso debe de ajustarse el tamaño de los botones.

En muchos ordenadores funciona bien pero en otros hay que seguir estos pasos.

domingo, 7 de enero de 2024

JS - Lateral Sidebar

Barra lateral para celular


HTML
<!------------- LATERAL SIDEBAR ------------->
  <div id="minimal_wall">
    <input type="checkbox" id="check">
    <label for="check">
      <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com
        /f/ce612125-96d6-4376-a8b3-6b72e463ad1e/
        d6s5d9m-8cbe2096-f452-42e1-a694-ffef7291a4b1.
        png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.
        eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQ
        xNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY
        0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL
        2ZcL2NlNjEyMTI1LTk2ZDYtNDM3Ni1hOGIzLTZiNzJlNDYzYWQxZVwv
        ZDZzNWQ5bS04Y2JlMjA5Ni1mNDUyLTQyZTEtYTY5NC1mZmVmNzI5MWE0YjEucG
        5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.6aaql
        V2GiO50pnn90Oy8UOSg3pZWPf-hsCm7O0Mkevs" 
        alt="" style="height: 60px" id="btn">
      <img src="img/cruzx.png" alt="" style="height: 26px" id="cancel">
    </label>

    <div class="sidebar">
        <header>Links</header>
        <ul>
            <li><a href="https://api.whatsapp.com/send/
                ?phone=+528117281794&text=Buen%20día,%20" target="_blank">
                <img src="img/whatsapplogo.jpg" alt="" style="height: 30px; 
                vertical-align: middle; margin-right: 15px;"> Whatsapp</a></li>
            <li><a href="https://www.google.com/search?q=nfl+games&source=
                lmns&bih=611&biw=1366&rlz=1C1ONGR_enMX1040MX1040&hl=es&sa=X&ve
                d=2ahUKEwj10I-gm7WBAxU0JN4AHd79BacQ0pQJKAB6BAgBEAI" target="_blank">
                <img src="https://neiuindependent.org/wp-content/uploads/
                2019/11/nfl-national-football-league-royalty-free-thumbnail.jpg"
                 alt="" style="border-radius: 50px; height: 30px; 
                vertical-align: middle; margin-right: 15px;">NFL</a></li>
            <li><a href="https://www.google.com/search?q=real+madrid&rlz=
                1C1ONGR_enMX1040MX1040&sxsrf=AJOqlzWXkyzXe3IZxTcO_cp9xrA4CBtr
                cw%3A1676834253739&ei=zXXyY9bjLLDbkPIPnYmWoAs&ved=0ahUKEwiW_qm
                wpqL9AhWwLUQIHZ2EBbQQ4dUDCA8&uact=5&oq=real+madrid&gs_lcp=Cgxnd
                3Mtd2l6LXNlcnAQAzIECCMQJzIECC4QJzILCAAQgAQQsQMQgwEyCwgAEIAEELED
                EIMBMggIABCxAxCDATIICAAQsQMQgwEyCwgAEIAEELEDEIMBMgsIABCABBCxAxC
                DATIFCAAQgAQyCAgAELEDEIMBOgoIABBHENYEELADOgUIIRCgAToQCAAQgAQQ
                FBCHAhCxAxCDAToKCAAQgAQQFBCHAjoFCC4QgAQ6CwguEIAEELEDEIMBSgQI
                QRgAUMAEWOQRYPoTaAFwAXgBgAGPAYgBvQiSAQM1LjWYAQCgAQHIAQjAA
                QE&sclient=gws-wiz-serp" target="_blank">
                <img src="img/rmadrid.png" alt="" style="border-radius: 50px; 
                height: 35px; vertical-align: middle; margin-right: 15px;">
                Real Madrid</a></li>
        </ul>
    </div>
  </div>


CSS
/************ LATERAL SIDEBAR ************/
#minimal_wall{
    width: 100%;
    height: 0px;
    background: #042231;
}
.sidebar {
  position: fixed;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #063146;
  transition: all .5s ease;
}
.sidebar header {
  font-size: 22px;
  color: white;
  line-height: 70px;
  text-align: center;
  background: #063146;
  user-select: none;
}
.sidebar ul a{
  display: block;
  height: 100%;
  width: 100%;
  line-height: 65px;
  font-size: 16px;
  color: white;
  padding-left: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid black;
  border-top: 1px solid rgba(255,255,255,.1);
  transition: .4s;
}
.sidebar ul li:hover a{
  padding-left: 50px;
}
.sidebar ul a i{
  margin-right: 16px;
}
#check{
  display: none;
}
label #btn,label #cancel{
  position: absolute;
  background: #ffffff;
  border-radius: 50px;
  cursor: pointer;
  padding: 3px;
}
label #btn{
  left: 15px;
  top: 20px;
  font-size: 35px;
  color: white;
  transition: all .5s;
}
label #cancel{
  z-index: 1111;
  left: -195px;
  top: 20px;
  font-size: 30px;
  color: #0a5275;
  padding: 6px;
  transition: all .5s ease;
  
}
#check:checked ~ .sidebar{
  left: 0;
}
#check:checked ~ label #btn{
  left: 250px;
  opacity: 0;
  pointer-events: none;
}
#check:checked ~ label #cancel{
  left: 210px;
}


JAVASCRIPT
// nuevo diseño

posicionarMenu();
 
$(window).scroll(function() {    
    posicionarMenu();
});
 
function posicionarMenu() {
    var altura_del_header = $('.header').outerHeight(true);
    var altura_del_menu = $('.menu').outerHeight(true);
 
    if ($(window).scrollTop() >= altura_del_header){
        $('.menu').addClass('fixed');
        $('.wrapper').css('margin-top', (altura_del_menu) + 'px');
    } else {
        $('.menu').removeClass('fixed');
        $('.wrapper').css('margin-top', '0');
    }
}

Acordeón de imagenes

Código de acordeón para tu sitio web

Solo agregalo en tu sitio web y listo...

Ha si, lo olvidaba, solo HTML y CSS

 HTML<!------------ ACORDEON ----------> 
<div class="ctr-accordion">

  <div class="tab">
    <a href="p/programming.html"><img src="
https://images.unsplash.com/"></a>
  </div>
   <div class="tab">
    <a href="p/programming.html"><img src="
https://images.unsplash.com/"></a>
  </div>
   <div class="tab">
    <a href="p/programming.html"><img src="
https://images.unsplash.com/"></a>
  </div>
   <div class="tab">
    <a href="p/programming.html"><img src="
https://images.unsplash.com/"></a>
  </div>
  
</div>

CSS/************* ACORDEON *************/
.ctr-accordion{
    max-width: 1200px;
    height: 350px;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: space-around;
    gap: 2px;
    overflow: hidden;
    margin: 50px auto;
}
 
.tab{
    position: relative;
    width: 16.6%;
    height: inherit;
    padding: 20px;
    background: rgb(150,150,150);
    cursor: pointer;
    transition: width .5s ease;
    border-radius: 25px;
}
 
.tab img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
    border-radius: 25px;
}
 
.tab:hover img{
    opacity: 0.6;
}
 
.tab:hover{
    width: 500%;
}

martes, 2 de enero de 2024

HTML5 - Carrusel para tu sitio web

Código para agregar tu carrusel a tu sitio web

Código sencillo:

<!--------------- CARRUSEL MOVIES --------------->
  <div class="carrusel">

    <div class="elemento">
      <a href="https://xviewplus.com/" target="_blank">
      <img src="img/xview logo.jpg" /></a>
    </div>
    
      <div class="elemento">
        <a href="https://www.paramountplus.com/home/" target="_blank">
        <img src="img/paramountplus logo.jpg" /></a>
      </div>
      
      <div class="elemento">
        <a href="https://www.netflix.com/browse" target="_blank">
        <img src="img/netflix logo.jpg" /></a>
      </div>
      
      <div class="elemento">
        <a href="https://play.max.com/home" target="_blank">
        <img src="img/hbo max logo.jpg" /></a>
      </div>
      
      <div class="elemento">
        <a href="p/soccer.html"><img src="img/soccer logo.jpg" /></a>
      </div>
      
      <div class="elemento">
        <a href="p/dinosaurios.html">
        <img src="img/jurassic park logo.jpg" /></a>
      </div>
      
      <div class="elemento">
        <a href="p/zoo.html"><img src="img/zoo logo mk.jpg" /></a>
      </div>
      
      <div class="elemento">
        <a href="https://www.youtube.com/" target="_blank">
        <img src="img/btn_youtube.jpg" /></a>
      </div>
      
    </div>

/************ CARRUSEL MOVIES ************/
.carrusel{
    padding: 30px 0px;
    display: flex;
    flex-wrap: nowrap;
    overflow: scroll;
    background: transparent;
    white-space: nowrap;
}
.elemento{
    flex: 1 0 auto;
    margin: 0 30px;
    background: #15a9f3;
    width: 200px;
    height: 270px;
}
.elemento img{
    width: 100%;
    height: 100%;
}

Links

domingo, 15 de septiembre de 2024

VISUAL STUDIO CODE

AJUSTE DE LÍNEA QUE NO SE MUESTRE EL CÓDIGO DE LA CAJA

viernes, 12 de julio de 2024

No podemos ver carpeta de aplicaciones de inicio, ni tampoco desde administrador de tareas...

jueves, 13 de junio de 2024

IMAGEN FIJA EN WEBSITE CON FUNCION ONCLICKplay and stopCódigo para copiar y pegar

martes, 21 de mayo de 2024

CSS3 - Slider infinito

lunes, 13 de mayo de 2024

CSS 3 - Botón flecha con movimiento

viernes, 3 de mayo de 2024

Slider con ayuda de Javascript

domingo, 21 de abril de 2024

Vídeo de fondo con letras encima en HTML 5 y CSS 3

domingo, 18 de febrero de 2024

domingo, 28 de enero de 2024

Código de botones creados con CSS

lunes, 22 de enero de 2024

Banner con background de color difuminado.

domingo, 21 de enero de 2024

Aumentar el tamaño de las herramientas en Photoshop

domingo, 7 de enero de 2024

Barra lateral para celular

HTML

CSS

JAVASCRIPT

Código de acordeón para tu sitio web

HTML

CSS

martes, 2 de enero de 2024

Código para agregar tu carrusel a tu sitio web

IMAGEN FIJA EN WEBSITE CON FUNCION ONCLICK
play and stop

Código para copiar y pegar