Tironemota

▲
Códigos

Códigos
22-08-2022

Ventana Modal 22-08-2022

×

Encabezado Modal

Algún texto en el modal.

Algún texto en el modal.

Construcción

Pie de página modal

×

Encabezado Modal

Algún texto en el modal.

Algún texto en el modal.

Construcción

Pie de página modal

Una ventana modal es una ventana que se encuentra sobre todas las demas ventanas de la misma aplicacion, hasta que se cierra o se abre otra ventana modal.

<div id="VentanaModal">
    <div id="VM-1" class="VModal">
        <div class="VModal-dialog">
            <div class="VModal-content">
                <header class="VMcontainer">
                    <a href="#gr" class="VMboton">×</a>
                    <h2>Encabezado Modal</h2>
                </header>
                <div class="VMcontainer">
                    <p>Algún texto en el modal.</p>
                    <p>Algún texto en el modal.</p>
                </div>
                <footer class="VMcontainer">
                    <p>Pie de página modal</p>
                </footer>
            </div>
        </div>
    </div>
    <div id="VM-2" class="VModal">
        <div class="VModal-dialog">
            <div class="VModal-content-peq">
                <header class="VMcontainer">
                    <a href="#pq" class="VMboton">×</a>
                    <h2>Encabezado Modal</h2>
                </header>
                <div class="VMcontainer">
                    <p>Algún texto en el modal.</p>
                    <p>Algún texto en el modal.</p>
                </div>
                <footer class="VMcontainer">
                    <p>Pie de página modal</p>
                </footer>
            </div>
        </div>
    </div>
</div>
/***** ESTILOS DEL MODAL *****/
/* Añadir animación (Chrome, Safari, Opera) */
@-webkit-keyframes TMejemploModal {from {top:-100px;opacity: 0;}to {top:0px;opacity:1;}}
/* Add animation (Standard syntax) */
@keyframes TMejemploModal {from {top:-100px;opacity: 0;}to {top:0px;opacity:1;}}
/* Los antecedentes del modal */
.VModal{display: none;position:relative;bottom:0;left:0;right:0;top:0;z-index:1050;width:100%;height:100%;overflow:auto;background-color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0.4);}
/* Mostrar el modal cuando está dirigido */
.VModal:target{display:table;position:fixed;}
/* La caja modal */
.VModal-dialog{display:table-cell;vertical-align:middle;}
/* El contenido del modal */
.VModal-dialog .VModal-content{width:80%}
.VModal-dialog .VModal-content-peq{width:500px}
.VModal-dialog .VModal-content, .VModal-dialog .VModal-content-peq {
    margin:auto;background-color:#f3f3f3;position:relative;padding:0;outline:0;border:1px #777 solid;text-align:justify;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /* Añadir animación */
    -webkit-animation-name:TMejemploModal; /* Chrome, Safari, Opera */
    -webkit-animation-duration:1s; /* Chrome, Safari, Opera */
    animation-name:TMejemploModal;
    animation-duration:1s;}
.VModal-content img{max-width:100%; height:auto}
/* El botón utilizado para cerrar el modal */
#VentanaModal .VMboton{text-decoration:none;float:right;font-size:35px;font-weight:bold;color:#fff;}
#VentanaModal .VMboton:hover,
#VentanaModal .VMboton:focus{color:#000;text-decoration:none;cursor:pointer;}
#VentanaModal .VMcontainer{padding:2px 16px;}
#VentanaModal header{background-color:#5cb85c;font-size:25px;color:white;}
#VentanaModal footer{background-color:#5cb85c;font-size:20px;color:white;}
Arriba ... ⇑

Contenedor videos 23-08-2022

Titulo
Titulo
Titulo
Titulo 
<div class="CajaVideos">
    <div>
        <span>Titulo</span>
        <video controls>
            <source src="URL-DEL-VIDEO" type="video/mp4">
        </video>
    </div>
    <div>
        <span>Titulo</span>
        <video controls>
            <source src="URL-DEL-VIDEO" type="video/mp4">
        </video>
    </div>
</div>
.CajaVideos *{box-sizing:border-box;}
.CajaVideos{background:#313131;color:#ffffff;margin:auto;width:100%;display:flex;flex-wrap:wrap;}
.CajaVideos>div{background:#6b6837;border:1px solid #000000;border-radius:20px;text-align: center;padding:10px;width:100%;}
.CajaVideos>div:hover{background:#e0db75;color:#000000;}
.CajaVideos video{height:auto;width:100%;margin:auto;}
@media screen and (min-width:700px){.CajaVideos>div{width:50%;}}
@media screen and (min-width:900px){.CajaVideos>div{width:33.33%;}}
@media screen and (min-width:1200px){.CajaVideos>div{width:25%;}}
Arriba ... ⇑

Centrar contenido en DIV 23-08-2022

Centrar un texto horizontal y vertical en un div
<div class="contTextXY">
    <div class="textXY">Centrar un texto horizontal y vertical en un div</div>
</div>
.contTextXY {border: 1px solid #333;height: 250px;margin: 20px auto;position: relative;width: 250px;}
.textXY {left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%);text-align: center;}
Arriba ... ⇑

Centrar un elemento horizontal y vertical con display:grid 23-08-2022

Elemento centrado
<div class="grid-centrar">
    <div class="elementoCentrado">Elemento centrado</div>
</div>
.grid-centrar {display:grid; justify-content:center; align-items:center; height:200px; border:1px solid Blue; width: 80%; margin: 20px auto;}
.elementoCentrado {border:1px solid Red;}
Arriba ... ⇑

Menú de pestaña I 23-08-2022

Sobre nosotros

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.

Cómo trabajamos

Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.

Servicios

Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.

Excelencia

Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.

Portafolio

The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.

Ejemplos

Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.

Contacto

You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.

Estar en contacto

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. 

<div class="tabs">
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
    <label for="tab-1" class="tab-label-1">Nosotros</label>
    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2">Servicios</label>
    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
    <label for="tab-3" class="tab-label-3">Trabajo</label>
    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
    <label for="tab-4" class="tab-label-4">Contacto</label>
    <div class="clear-shadow"></div>
    <div class="content">
        <div class="content-1">
            <h2>Sobre nosotros</h2>
            <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
            <h3>Cómo trabajamos</h3>
            <p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.</p>
        </div>
        <div class="content-2">
            <h2>Servicios</h2>
            <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
            <h3>Excelencia</h3>
            <p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>
        </div>
        <div class="content-3">
            <h2>Portafolio</h2>
            <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
            <h3>Ejemplos</h3>
            <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>
        </div>
        <div class="content-4">
            <h2>Contacto</h2>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
            <h3>Estar en contacto</h3>
            <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.</p>
        </div>
    </div>
</div>
.tabs {background:white;border:2px solid rgb(214, 213, 213);position: relative;margin: 40px auto;width: 95%;}
.tabs input {position: absolute;z-index: 1000;width: 120px;height: 40px;left: 0px;top: 0px;opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);cursor: pointer;}
.tabs input#tab-2{left: 120px;}
.tabs input#tab-3{left: 240px;}
.tabs input#tab-4{left: 360px;}
.tabs label{background: #EAECEC;background: -moz-linear-gradient(top, #EAECEC 0%, #9AA8A7 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EAECEC), color-stop(100%,#9AA8A7));background: -webkit-linear-gradient(top, #EAECEC 0%,#9AA8A7 100%);background: -o-linear-gradient(top, #EAECEC 0%,#9AA8A7 100%);background: -ms-linear-gradient(top, #EAECEC 0%,#9AA8A7 100%);background: linear-gradient(top, #EAECEC 0%,#9AA8A7 100%);font-size: 15px;line-height: 40px;height: 40px;position: relative;padding: 0 20px;float: left;display: block;width: 80px;color: #385c5b;letter-spacing: 1px;text-transform: uppercase;font-weight: bold;text-align: center;text-shadow: 1px 1px 1px rgba(255,255,255,0.3);border-radius: 3px 3px 0 0;box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);}
.tabs label:after{content: '';background: #fff;position: absolute;bottom: -2px;left: 0;width: 100%;height: 2px;display: block;}
.tabs input:hover + label {background: #EAECEC;}
.tabs label:first-of-type{z-index: 4;box-shadow: 2px 0 2px rgba(0,0,0,0.1);}
.tab-label-2 {z-index: 3;}
.tab-label-3 {z-index: 2;}
.tab-label-4 {z-index: 1;}
.tabs input:checked + label {background: #fff;z-index: 6;}
.clear-shadow {clear: both;}
.content{background: #fff;position: relative;width: 100%;height: 370px;z-index: 5;box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);border-radius: 0 3px 3px 3px;overflow: auto;}
.content div{position: absolute;top: 0;left: 0;padding: 10px 40px;z-index: 1;opacity: 0;-webkit-transition: opacity linear 0.1s;-moz-transition: opacity linear 0.1s;-o-transition: opacity linear 0.1s;-ms-transition: opacity linear 0.1s;transition: opacity linear 0.1s;}
.tabs input.tab-selector-1:checked ~ .content .content-1,.tabs input.tab-selector-2:checked ~ .content .content-2,.tabs input.tab-selector-3:checked ~ .content .content-3,.tabs input.tab-selector-4:checked ~ .content .content-4 {z-index: 100;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;-webkit-transition: opacity ease-out 0.2s 0.1s;-moz-transition: opacity ease-out 0.2s 0.1s;-o-transition: opacity ease-out 0.2s 0.1s;-ms-transition: opacity ease-out 0.2s 0.1s;transition: opacity ease-out 0.2s 0.1s;}
.content div h2,.content div h3{color: #398080;}
.content div p{font-size: 14px;line-height: 22px;font-style: italic;text-align: left;margin: 0;color: #777;padding-left: 15px;font-family: Cambria, Georgia, serif;border-left: 8px solid rgba(63,148,148, 0.1);}
@media (min-width: 1000px) {.tabs{width:70%;}}
@media (min-width: 1300px) {.tabs{max-width:800px;}}
Arriba ... ⇑

Menú de pestaña II 23-08-2022

Contenido de la pestaña 1

Contenido de la pestaña 2

Contenido de la pestaña 3

Contenido de la pestaña 4

<!--Contenedor-->
<div class="ContPestana2">
    <!--Pestaña 1 activa por defecto-->
    <input id="Pestana2-1" type="radio" name="PestanaGrupo2" class="PestanaSelector1" checked="checked" />
    <label for="Pestana2-1" class="menuTab-label-1">Pestaña1</label>
    <!--Pestaña 2 inactiva por defecto-->
    <input id="Pestana2-2" type="radio" name="PestanaGrupo2" class="PestanaSelector2" />
    <label for="Pestana2-2" class="menuTab-label-2">Pestaña2</label>
    <!--Pestaña 3 inactiva por defecto-->
    <input id="Pestana2-3" type="radio" name="PestanaGrupo2" class="PestanaSelector3" />
    <label for="Pestana2-3" class="menuTab-label-3">Pestaña3</label>
    <!--Pestaña 4 inactiva por defecto-->
    <input id="Pestana2-4" type="radio" name="PestanaGrupo2" class="PestanaSelector4" />
    <label for="Pestana2-4" class="menuTab-label-4">Pestaña4</label>
    <!--Contenido a mostrar/ocultar-->
    <div class="Pestanas2">
        <!--Contenido de la Pestaña 1-->
        <div class="Pestanas2-1">
            <h4>Contenido de la pestaña 1</h4>
            <img src="URL-IMG" alt=""/>
        </div>
        <!--Contenido de la Pestaña 2-->
        <div class="Pestanas2-2">
            <h4>Contenido de la pestaña 2</h4>
            <img src="URL-IMG" alt=""/>
        </div>
        <!--Contenido de la Pestaña 3-->
        <div class="Pestanas2-3">
            <h4>Contenido de la pestaña 3</h4>
            <img src="URL-IMG" alt=""/>
        </div>
        <!--Contenido de la Pestaña 4-->
        <div class="Pestanas2-4">
            <h4>Contenido de la pestaña 4</h4>
            <img src="URL-IMG" alt=""/>
        </div>
    </div>
</div>
.ContPestana2 {margin:40px auto;width: 95%;box-sizing: border-box;-moz-box-sizing: border-box;}
.ContPestana2 input {height: 32px;visibility: hidden;}
.ContPestana2 label {float: left;cursor: pointer;font-size: 15px;line-height: 40px;height: 40px;padding: 0 20px;display: block;color: #888;text-align: center;border-radius: 5px 5px 0 0;background: #eee;background: -webkit-linear-gradient(#DDDBDB,#FFFFFF);background: -o-linear-gradient(#DDDBDB,#FFFFFF);background: -moz-linear-gradient(#DDDBDB,#FFFFFF);background: linear-gradient(#DDDBDB,#FFFFFF);margin-right: 5px;}
.ContPestana2 input:hover + label {background: #ddd;color: #666;background: -webkit-linear-gradient(#FFFFFF,#DDDBDB);background: -o-linear-gradient(#FFFFFF,#DDDBDB);background: -moz-linear-gradient(#FFFFFF,#DDDBDB);background: linear-gradient(#FFFFFF,#DDDBDB);}
.ContPestana2 input:checked + label {background:#FFFFFF;color:#444;z-index:6;line-height:45px;height:45px;position:relative;top:-5px;transition: duration .1s;-webkit-transition: .1s;-moz-transition: .1s;-o-transition: .1s;-ms-transition: .1s;border:1px solid #E4BE39;border-bottom:none}
.Pestanas2 {background: #FFFFFF;position: relative;width: 91%;height: 350px;padding: 30px;z-index: 5;border-radius: 0 5px 5px 5px;border:1px solid #E4BE39;}
.Pestanas2 div {position: absolute;z-index: -100;opacity: 0;transition: all linear 0.1s;}
.ContPestana2 input.PestanaSelector1:checked ~ .Pestanas2 .Pestanas2-1,
.ContPestana2 input.PestanaSelector2:checked ~ .Pestanas2 .Pestanas2-2,
.ContPestana2 input.PestanaSelector3:checked ~ .Pestanas2 .Pestanas2-3,
.ContPestana2 input.PestanaSelector4:checked ~ .Pestanas2 .Pestanas2-4 {z-index: 100;opacity: 1;transition: all ease-out 0.2s 0.1s;-webkit-transition: all ease-out 0.2s 0.1s;-moz-transition: all ease-out 0.2s 0.1s;-o-transition: all ease-out 0.2s 0.1s;-ms-transition: all ease-out 0.2s 0.1s;}
@media (min-width: 1000px) {.ContPestana2{width:70%;}}
@media (min-width: 1300px) {.ContPestana2{max-width:800px;}}
Arriba ... ⇑

Menú de pestaña III 23-08-2022

HTMLLorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum sit reprehenderit iusto harum minima. Assumenda, accusamus, perspiciatis inventore tempora qui pariatur quisquam? Deleniti, placeat ea nostrum officiis obcaecati temporibus quod. Ullam, in, adipisci autem at fugit ab tempore enim ratione nesciunt alias corporis vitae quo quod nostrum itaque vero iure?

CSSLorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, id blanditiis deserunt in molestiae excepturi incidunt molestias dolor sunt dolore obcaecati non repellat mollitia error placeat est exercitationem sit voluptates iure autem saepe voluptas harum unde perferendis modi provident labore voluptatum. Repudiandae, aspernatur sit harum quod vero quos sequi voluptas!

CódigosLorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, est, nisi enim voluptates dicta quibusdam recusandae eveniet provident non at nostrum nesciunt laudantium omnis aliquam debitis magni expedita cumque tempore.

,

ImágenesLorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, molestiae, officia repellendus quasi cumque dolor eius deserunt possimus aliquid neque nam assumenda veniam soluta enim commodi aperiam reprehenderit quia incidunt.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, aperiam, enim odit placeat minus ab vero molestiae ad fugit maiores eaque saepe debitis assumenda ut ipsam eius sit repellendus dolore.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, in magni illo dolore dicta vero.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, minus, aspernatur voluptatem doloribus labore modi.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, exercitationem quia id accusamus beatae sunt? Dolorum mollitia sint debitis delectus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, accusantium, provident ab quo sed blanditiis perspiciatis distinctio aut voluptatibus cum odio quaerat iure vel dolorum fugit explicabo suscipit tenetur. Sed!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, accusantium, provident ab quo sed blanditiis perspiciatis distinctio aut voluptatibus cum odio quaerat iure vel dolorum fugit explicabo suscipit tenetur. Sed!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, accusantium, provident ab quo sed blanditiis perspiciatis distinctio aut voluptatibus cum odio quaerat iure vel dolorum fugit explicabo suscipit tenetur. Sed!

<!--Contenedor-->
<div class="ContPestana3">
    <!--Pestaña 1 activa por defecto-->
    <input id="Pestana3-1" type="radio" name="PestanaGrupo3" checked="checked" />
    <label for="Pestana3-1">Pestaña 1</label>
    <!--Pestaña 2 inactiva por defecto-->
    <input id="Pestana3-2" type="radio" name="PestanaGrupo3" />
    <label for="Pestana3-2">Pestaña 2</label>
    <!--Pestaña 3 inactiva por defecto-->
    <input id="Pestana3-3" type="radio" name="PestanaGrupo3" />
    <label for="Pestana3-3">Pestaña 3</label>
    <!--Contenido a mostrar/ocultar-->
    <div class="Pestanas3">
        <!--Contenido de la Pestaña 1-->
        <div class="Pest3-1">
            <p class="left"><img src="URL-DE-IMG" alt="">TEXTO-DE-EJEMPLO</p>
            <p class="left last"><img src="URL-DE-IMG" alt="">TEXTO-DE-EJEMPLO</p>
        </div>
        <!--Contenido de la Pestaña 2-->
        <div class="Pest3-2">
            <p class="column-left"><img src="URL-DE-IMG" alt="">TEXTO-DE-EJEMPLO</p>,
            <p class="column-right"><img src="URL-DE-IMG" alt="">TEXTO-DE-EJEMPLO</p>
        </div>
        <!--Contenido de la Pestaña 3-->
        <div class="Pest3-3">
            <p>TEXTO-DE-EJEMPLO</p>
            <ul>
                <li>TEXTO-DE-EJEMPLO</li>
                <li>TEXTO-DE-EJEMPLO</li>
                <li>TEXTO-DE-EJEMPLO</li>
            </ul>
            <p>TEXTO-DE-EJEMPLO</p>
            <p>TEXTO-DE-EJEMPLO</p>
            <p>TEXTO-DE-EJEMPLO</p>
        </div>
    </div>
</div>
.ContPestana3{
    margin: 40px auto;
    width:670px; /* Ancho del contenedor */
}
.ContPestana3 input{height: 2.5em;visibility: hidden;}
.ContPestana3 label {
    background: #f9f9f9; /* Fondo de las pestañas */
    border-radius: .25em .25em 0 0;
    color: #888; /* Color del texto de las pestañas */
    cursor: pointer;display: block;float: left;
    font-size: 1em; /* Tamaño del texto de la pestañas */
    height: 2.5em;line-height: 2.5em;margin-right: .25em;padding: 0 1.5em;text-align: center;
}
.ContPestana3 input:hover + label {
    background: #ddd; /* Fondo de las pestañas al pasar el cursor por encima */
    color: #666; /* Color del texto de las pestañas al pasar el cursor por encima */
}
.ContPestana3 input:checked + label {
    background: #f1f1f1; /* Fondo de las pestañas al presionar */
    color: #444; /* Color de las pestañas al presionar */
    position: relative;z-index: 6;
}
.Pestanas3 {
    background: #f1f1f1; /* Fondo del contenido */
    border-radius: 0 .25em .25em .25em;
    height:320px; /* Alto del contenido */
    position: relative;width:670px;z-index: 5;
}
.Pestanas3 > div {opacity: 0;margin:20px;position: absolute;z-index: -100;width:610px;height:260px;overflow:auto;background:#FFF;padding:10px;}
.Pest3-1 p {clear: both;margin-bottom: 1em;}
.Pest3-1 p.left img {float: left;margin-right: 1em;}
.Pest3-1 p.last {margin-bottom: 0;}
.Pest3-2 p {float: left;width: 48.5%;}
.Pest3-2 p.column-right {margin-left: 3%;}
.Pest3-2 p img {display: block;margin: 0 auto 1em auto;}
.Pest3-3 p, .Pest3-3 ul {margin-bottom: 1em;}
.Pest3-3 ul {margin-left: 2em;}
.ContPestana3 input#Pestana3-1:checked ~ .Pestanas3 .Pest3-1,
.ContPestana3 input#Pestana3-2:checked ~ .Pestanas3 .Pest3-2,
.ContPestana3 input#Pestana3-3:checked ~ .Pestanas3 .Pest3-3 {opacity: 1;z-index: 100;}
Arriba ... ⇑

Menú de navegación 23-08-2022

Coloque el puntero sobre los item del menú para ver los efectos

<div class="navegadorBody">
    <nav class="navegadorNav">
        <ul class="navegadorUl">
            <li>
            <div class="navegadorCapaIco"><img class="navegadorIco" src="../img/gen/ico-ini.png"/></div>
            Inicio</li>
            <li>
            <div class="navegadorCapaIco"><img class="navegadorIco" src="../img/gen/ico-link.png"/></div>
            Enlaces</li>
            <li>
            <div class="navegadorCapaIco"><img class="navegadorIco" src="../img/gen/ico-dwd.png"/></div>
            Descargas</li>
            <li>
            <div class="navegadorCapaIco"><img class="navegadorIco" src="../img/gen/ico-sm.png"/></div>
            Sobre Mi</li>
            <li>
            <div class="navegadorCapaIco"><img class="navegadorIco" src="../img/gen/ico-ctc.png"/></div>
            Contacto</li>
        </ul>
    </nav>
    <div style="width:80%; margin:auto; text-align:center; padding:30px; color:#A22325">
        <h3>Coloque el puntero sobre los item del menú para ver los efectos</h3>
    </div>
</div>
.navegadorBody{background-color:#D3FBCD;font-size:20px;margin:0;width:100%;height:250px;}
.navegadorNav{width:100%;height:50px;background-color:#eee;overflow:hidden;opacity:0.8;transition-duration:0.6s;}
.navegadorNav:hover{opacity:1;}
.navegadorUl{margin:0;}
.navegadorUl li{float:left;width:18%;color:#555;text-align:center;list-style:none;margin-top:-30px;transition-duration:0.6s;}
.navegadorUl li:hover{margin-top:15px;}
.navegadorIco{width:40px;height:40px;}
.navegadorCapaIco{width:100%;height:30px;float:left;text-align:center;padding:5px 0 5px 0;cursor:pointer;position:relative;top:-15px;}

Imágenes utilizadas

Inicio Enlaces Descargas Usuario Correo
Arriba ... ⇑

Formulario de contacto para móviles 23-08-2022


<div style="max-width:400px; margin:auto;">
    <form id="form1" name="form1" method="post">
        <label for="textfield">Nombre:</label>
        <input name="textfield" type="text" id="textfield" placeholder="Tú nombre:">
        <label for="website">Sitio Web:</label>
        <input type="url" name="website" placeholder="www.yourwebsite.com" />
        <label for="tel">Tel:</label>
        <input type="tel" name="tel" placeholder="Tú número teléfono" />
        <label for="email">Email:</label>
        <input type="email" name="email" placeholder="you@yourwebsite.com" />
        <label for="date">Fecha:</label>
        <input type="date" name="date" id="date" placeholder="DD/MM/YYYY">
        <label for="time">Time:</label>
        <input type="time" name="time" id="time" placeholder="9:00 AM">
        <input type="checkbox" name="preferencia" value="libros" id="preferencia_0"> <label>Libros</label><br>
        <input type="radio" name="radio" id="radio" value="radio"> <label for="radio">Radio Button </label>
        <button type="submit" name="enviar" id="enviar" value="Enviar">Enviar</button>
        <input type="button" name="button" id="button" value="Borrar">
    </form>
</div>
/*Los campos de entrada (inputs) serán mejores si tienen grandes areas para poder tocarlos en la pantalla:*/
input[type=date],
input[type=email],
input[type=password],
input[type=tel],
input[type=text],
input[type=time],
input[type=url] {
    border: 1px solid #bbb;
    display: block;
    font-size: 17px;
    height: 40px;
    line-height: 40px;
    margin: 0 0 15px;
    width: 100%;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}
/*Las casillas de verificación (checkbox y radio) mejorarán si son mas fáciles de tocar:*/
input[type=checkbox],
input[type=radio] {
    border: 1px solid #bbb;
    border-radius: 22px;
    -moz-border-radius: 22px;
    -webkit-border-radius: 22px;
    height: 44px;
    width: 44px;
}
/* los botones: */
button[type=submit],
input[type=button] {
    background: #fdfdfd;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe));
    background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);
    background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%);
    background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%);
    background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%);
    background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%);
    border: 1px solid #bbb;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    display: block;
    color: #333;
    font-size: 1em;
    font-weight: bold;
    height: 2.5em;
    line-height: 2.5em;
    margin: 1.5em 0;
    width: 100%;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}
Arriba ... ⇑

Confirmar si se envía o borra 23-08-2022

En un formulario podemos implementar unos mensajes de confirmación cuando el usuario envía o/y borra los datos del mismo.

Vea los resultados en el siguiente ejemplo….

Nombre: 

<form>
Nombre:
<input name="nombre" type="text" required id="nombre"><br><br>
<input type="submit" value="Enviar" onClick="willSubmit=confirm('¿Está seguro de que quiere enviar los datos?');return willSubmit;">
<input type="reset" value="Borrar" onClick="willReset=confirm('¿Está seguro de que quiere borrar los datos?');return willReset;">
</form>
Arriba ... ⇑

Aceptación de reglas 23-08-2022

Si asociamos dos botones de radio con una caja de texto podemos conseguir que sólo se pueda introducir datos en la caja si se selecciona el radio que nosotros establecemos (tipico ejemplo de las condiciones de aceptación de unas reglas).

Sólo puedes entrar tu nombre si estás de acuerdo con lo establecido
estoy de acuerdo
no estoy de acuerdo

Entra tu nombre: 
<form>
    Sólo puedes entrar tu nombre si estás de acuerdo con lo establecido<br>
    <input type=radio name='enable' value='agree' onClick="agree=1; document.enableform.box.focus();" checked> estoy de acuerdo<br>
    <input type=radio name='enable' value='disagree' onClick="agree=0; document.enableform.box.value='';"> no estoy de acuerdo<br><br>
    Entra tu nombre:
    <input type=text name=box onFocus="if (!agree)this.blur();" onChange="if (!agree)this.value='';" size=12>
</form>
Arriba ... ⇑

Mensaje de advertencia 23-08-2022

Podemos asociar un mensaje de alerta al radio botón, de tal forma que cuando el usuario pinche en él se active un mensaje de advertencia

Cual te gusta de mascota

Perico
Gato
Perro 
<form>
    Cual te gusta de mascota<br><br>
    <input type="radio" name="mascota" value="Perico" onClick="alert('Has seleccionado Perico ')"> Perico<br>
    <input type="radio" name="mascota" value="Gato" onClick="alert('Has seleccionado Gato ')"> Gato<br>
    <input type="radio" name="mascota" value="Perro" onClick="alert('Has seleccionado Perro ')"> Perro
</form>
Arriba ... ⇑

Marcar y desmarcar todas las opciones 23-08-2022

Establecer un único botón que alterne entra marcar y desmarcar todas las opciones a la vez

uno
dos
tres
cuatro
cinco
<form name="form09">
    <input type=checkbox name=list value="1"> uno<br>
    <input type=checkbox name=list value="2"> dos<br>
    <input type=checkbox name=list value="3"> tres<br>
    <input type=checkbox name=list value="4"> cuatro<br>
    <input type=checkbox name=list value="5"> cinco<br>
    <input type=button value="todos" onClick="this.value=check(this.form.list)">
</form>
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;}
checkflag = "true";
return "ninguno"; }
else {
for (i = 0; i < field.length; i++) {
field[i].checked = false; }
checkflag = "false";
return "todos"; }
}
Arriba ... ⇑

Invierta la selección previa 23-08-2022

Ejemplo:

C1
C2
C3
C4
C5
C6
C7
C8
C9
C10
C11
C12
C13
C14




<form name="form08">
    <input type=checkbox name=C1> C1<br>
    <input type=checkbox name=C2> C2<br>
    <input type=checkbox name=C3> C3<br>
    <input type=checkbox name=C4> C4<br>
    <input type=checkbox name=C5> C5<br>
    <input type=checkbox name=C6> C6<br>
    <input type=checkbox name=C7> C7<br>
    <input type=checkbox name=C8> C8<br>
    <input type=checkbox name=C9> C9<br>
    <input type=checkbox name=C10> C10<br>
    <input type=checkbox name=C11> C11<br>
    <input type=checkbox name=C12> C12<br>
    <input type=checkbox name=C13> C13<br>
    <input type=checkbox name=C14> C14<br><br>
    <input type=button value="todos" onClick="checkAll()"><br>
    <input type=button value="ninguno" onClick="uncheckAll()"><br>
    <input type=button value="invertir" onClick="switchAll()"><br>
</form>
function checkAll() {
for (var j = 1; j <= 14; j++) {
box = eval("document.form08.C" + j); 
if (box.checked == false) box.checked = true;
    }
}
function uncheckAll() {
for (var j = 1; j <= 14; j++) {
box = eval("document.form08.C" + j); 
if (box.checked == true) box.checked = false;
    }
}
function switchAll() {
for (var j = 1; j <= 14; j++) {
box = eval("document.form08.C" + j); 
box.checked = !box.checked;
    }
}
Arriba ... ⇑

Botones marcar y desmarcar todo 23-08-2022

Es posible implementar un botón que marque de una vez todos los checkbox de una colección, y otro que los desmarque.

Java
JavaScript
ASP
HTML
SQL

<form name="form07">
    <input type=checkbox name=list value="1"> Java<br>
    <input type=checkbox name=list value="2"> JavaScript<br>
    <input type=checkbox name=list value="3"> ASP<br>
    <input type=checkbox name=list value="4"> HTML<br>
    <input type=checkbox name=list value="5"> SQL<br><br>
    <input type=button name=on value="Seleccionar Todos" onClick="marcaT(document.form07.list)">
    <input type=button name=off value="Borrar Todos" onClick="marcaN(document.form07.list)">
</form>
function marcaT(field) {
for (i = 0; i < field.length; i++)
field[i].checked = true;
}
function marcaN(field) {
for (i = 0; i < field.length; i++)
field[i].checked = false;
}
Arriba ... ⇑

Botones marcar y desmarcar todo 2 23-08-2022

Opción 1
Opción 2
Opción 3
<form name="form13">
    <div><input type="checkbox" name="opcion"> Opción 1</div>
    <div><input type="checkbox" name="opcion"> Opción 2</div>
    <div><input type="checkbox" name="opcion"> Opción 3</div>
    <div>
        <input type="button" name="marcar" value="Marcar todo" onClick="modificar_boxes(true,3)">
        <input type="button" name="desmarcar" value="Desmarcar todo" onClick="modificar_boxes(false,3)">
    </div>
</form>
function modificar_boxes(chequear,cantidad){
for (i=0; i < cantidad ; i++ ){
    if (chequear){
        document.form13.opcion[i].checked=true;
    }else{
        document.form13.opcion[i].checked=false;
    }
}
}

Si nuestro formulario posee más cantidad de checkboxes solamente debemos cambiar el número 3 por el deseado en los botones Marcar y Desmarcar.

Arriba ... ⇑

Marque sólo una cantidad de opciones 23-08-2022

Podemos obligar al usuario a que marque sólo un número determinado de opciones dentro de un conjunto de ellas.

Por favor, seleccione dos opciones:

Selección 1
Selección 2
Selección 3 
<form>
    Por favor, seleccione dos opciones:<br><br>
    <input type=checkbox name=box1 onClick="contarOpciones(this)"> Selección 1<br>
    <input type=checkbox name=box2 onClick="contarOpciones(this)"> Selección 2<br>
    <input type=checkbox name=box3 onClick="contarOpciones(this)"> Selección 3
</form>
function contarOpciones(obj) {
max = 2; // max. número permitido a la vez
box1 = obj.form.box1.checked;  // sus casillas de verificación aquí
box2 = obj.form.box2.checked;
box3 = obj.form.box3.checked;  // agregue más si es necesario
count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0);
// Si tiene más casillas de verificación en su formulario
// agregue más (box_? 1: 0) separados por '+'
if (count > max) {
alert("Atención!  Sólo puede seleccionar " + max + " opciones! \Quite una de ellas si quiere seleccionar otra.");
obj.checked = false;
    }
}
Arriba ... ⇑

Campo en blanco 23-08-2022

El primer paso será comprobar que el usuario no deje el campo en blanco. El siguiente ejemplo lanza un mensaje de error si se pretende enviar el formulario con la caja de texto sin rellenar, y devuelve el foco a la misma.

Introduzaca sus datos:

Nombre:

Apellido:

País: 

<form name="form04" action="" method="POST" onSubmit = "return verifica(this);">
    <p>Introduzaca sus datos:</p>
    <p>Nombre:<input type="text" name="suNombre"></p>
    <p>Apellido:<input type="text" name="suApellido"></p>
    <p>País:<input type="text" name="suPais"></p>
    <p><input type="submit" value=" Enviar ">
    <input type="reset" value=" Cancelar "></p>
</form>
function fixElement(element, message) {
alert(message);
element.focus();
}
function verifica(form) {
var passed = false;
if (form.suNombre.value == ""){
    fixElement(form.suNombre, "Por favor, intruduzca su nombre.");
}
else if (form.suApellido.value == ""){
    fixElement(form.suApellido, "Por favor, intruduzca su apellido.");
}
else if (form.suPais.value == ""){
    fixElement(form.suPais, "Por favor, intruduzca su País.");
}
else {
passed = true;
}
return passed;
}
Arriba ... ⇑

Texto a minúsculas 23-08-2022

Que todo el texto pase a minúsculas

Convierte el texto a minúsculas



<form>
    Convierte el texto a minúsculas<br><br>
    <input type="text" name="caps" size=25 value="" onChange="javascript:this.value=this.value.toLowerCase();">
    <br><br>
    <input type="button" value="Ok!">
</form>
Arriba ... ⇑

Texto a mayúsculas 23-08-2022

Que todo el texto introducido pase a mayúsculas.

Convierte el texto a mayúsculas



<form>
    Convierte el texto a mayúsculas<br><br>
    <input type="text" name="caps" size=25 value="" onChange="javascript:this.value=this.value.toUpperCase();">
    <br><br>
    <input type="button" value="Ok!">
</form>
Arriba ... ⇑

Elimina espacios en blanco al principio del texto 23-08-2022

Podemos quitar los espacios en blanco al principio del texto, especialmente útil cuando queremos subir archivos al servidor

Elimina los espacios en blanco al principio del texto



<form>
    Elimina los espacios en blanco al principio del texto<br><br>
    <input type="text" name="mensaje" size="25" onChange="javascript:while(''+this.value.charAt(0)==' ')this.value=this.value.substring(1,this.value.length);">
    <br><br>
    <input type="button" value="Ok!">
</form>
Arriba ... ⇑

Descargar videos de YouTube 17/05/2023

¡Simplemente agregue 'ss' a la URL del video y descargue el video de inmediato!

    Usar el dominio corto de SSYouTube
  1. Abrir vídeo de Youtube
  2. Agregar "ss" antes de la URL del video
      Ejemplo:
    1. URL original: https://youtube.com/watch?v=YOcmSsBfafg
    2. URL con ss: https://ssyoutube.com/watch?v=YOcmSsBfafg
  3. Haga clic en "Entrar" y será redirigido a la página de descarga.
Arriba ... ⇑