JS - Audio en tu sitio con boton onclick

IMAGEN FIJA EN WEBSITE CON FUNCION ONCLICK

play and stop

Código para copiar y pegar

<img src="img/pedro_pe.png" alt="Capibara" title="Capibara Song" style="height: 45px; position: fixed; right: 2%; top: 44%; cursor: pointer; border-radius: 50%;" onclick="playSound('sound2')" >

<audio id="sound2" src="media/pedro-pe.mp3"></audio>

 

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();

  }

}

 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;

  }

 

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;

    }

  }

}

Javascript - Slider con botones

Slider con ayuda de Javascript

Código para pegarlo en tu sitio web.

HTML5

    <div id="contenedor_slider">

        <div id="slider">

            <img src="https://images.unsplash.com/photo-1564148204877-9bf116988675?q=80&w=1674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 1">

            <img src="https://plus.unsplash.com/premium_photo-1674257750724-893425035b2f?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 2">

            <img src="https://images.unsplash.com/photo-1548097160-627fd636ee56?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 3">

            

          </div>

          <div class="btn_slide">

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

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

      

          </div>

          

    

    </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);

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%;

}

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

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

CSS - Botones web

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...;

}

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;

}

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.

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');

    }

}