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

    }

}

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

}

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

}