domingo, 28 de enero de 2024

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


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

Documental de Hackers