Miguel Manchego desarrollo web

Dar estilos a una tabla y efecto zebra

miguelmr — Wed, 04 Dec 2024 16:08:25 +0000

Las tablas son una herramienta fundamental para organizar y presentar datos en la web. Sin embargo, una tabla sin estilo puede verse anticuada y difícil de leer. En este post, te mostraré cómo aplicar estilos modernos a una tabla HTML utilizando CSS, incluyendo cómo implementar el popular efecto zebra que mejora la legibilidad al alternar los colores de las filas.

1. Estructura Básica de una Tabla HTML

Antes de aplicar estilos, es esencial tener una tabla bien estructurada. A continuación, un ejemplo básico:


  
    
      Nombre
      Edad
      Ciudad
    
  
  
    
      Ana
      28
      Madrid
    
    
      Juan
      34
      Barcelona
    
    
      María
      22
      Valencia

2. Aplicando Estilos Modernos con CSS

Vamos a mejorar la apariencia de la tabla con estilos modernos. Puedes añadir los estilos en una hoja CSS externa o dentro de una etiqueta

Nombre	Edad	Ciudad
Ana	28	Madrid
Juan	34	Barcelona
María	22	Valencia
Carlos	45	Sevilla





4. Personalización Adicional



Para adaptar aún más la tabla a tus necesidades, considera lo siguiente:




Responsividad: Asegúrate de que la tabla se vea bien en dispositivos móviles. Puedes envolverla en un contenedor con overflow-x: auto o utilizar frameworks como Bootstrap que ofrecen tablas responsivas.




.table-container {
  overflow-x: auto;
}



Y en el HTML




  
    
  




Tipografías y Iconos: Integra fuentes de Google Fonts o utiliza iconos (como los de Font Awesome) para mejorar la presentación.



Animaciones Suaves: Añade transiciones para efectos más suaves al interactuar con la tabla.



tbody tr {
  transition: background-color 0.3s ease;
}



5. Conclusión



Estilizar una tabla HTML con CSS puede transformar completamente su apariencia, haciéndola más atractiva y fácil de leer. Implementar el efecto zebra es una práctica recomendada para mejorar la legibilidad, especialmente en tablas con muchas filas. Recuerda siempre mantener una coherencia en los colores y estilos para que la tabla se integre armoniosamente con el diseño general de tu sitio web.



¡Espero que este post te haya sido útil para crear tablas modernas y funcionales en tus proyectos web!
La entrada Dar estilos a una tabla y efecto zebra se publicó primero en Miguel Manchego desarrollo web.



Cómo Crear un Botón Flotante de WhatsApp para tu Sitio Web
miguelmr — Wed, 04 Dec 2024 15:48:21 +0000

En la era digital actual, la comunicación instantánea es clave para mejorar la experiencia del usuario y aumentar la interacción en tu sitio web. Un botón flotante de WhatsApp permite a los visitantes contactarte fácilmente, lo que puede incrementar las conversiones y mejorar el servicio al cliente. En este post, te mostraremos paso a paso cómo implementar un botón flotante de WhatsApp en tu página web utilizando HTML, CSS y JavaScript.



Paso 1: Preparar el Enlace de WhatsApp



Antes de crear el botón, necesitas generar un enlace que redirija a los usuarios a una conversación de WhatsApp contigo. Puedes usar el siguiente formato de enlace:



https://wa.me/tu_numero_de_telefono?text=Tu%20mensaje%20predeterminado



Paso 2: Añadir el HTML del Botón



Inserta el siguiente código HTML en el lugar de tu sitio web donde desees que aparezca el botón flotante. Generalmente, se coloca al final del .





    




Nota: Este ejemplo utiliza Font Awesome para el icono de WhatsApp. Asegúrate de incluir la biblioteca de Font Awesome en tu proyecto o usa una imagen personalizada.



Paso 3: Estilizar el Botón con CSS



/* Estilos para el botón flotante de WhatsApp */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #128c7e;
}

.whatsapp-icon {
    margin: 0;
}



Este CSS posiciona el botón en la esquina inferior derecha de la pantalla, le da un tamaño adecuado, color característico de WhatsApp y añade efectos al pasar el cursor sobre él.



Incluir Font Awesome (Opcional)



Si decides usar Font Awesome para el icono de WhatsApp, asegúrate de incluir la biblioteca en tu proyecto. Añade el siguiente enlace en la sección  de tu HTML:







Usar un Icono SVG Inline



Usar un SVG inline ofrece mayor flexibilidad y rendimiento, ya que no depende de cargas externas y puede ser fácilmente personalizado con CSS.



Ventajas de usar SVG Inline:




Personalización Fácil: Puedes cambiar colores, tamaños y otros atributos directamente con CSS.



Rendimiento: Evita solicitudes HTTP adicionales para cargar iconos.



Escalabilidad: Los SVG son escalables y se verán bien en cualquier resolución.




Ejemplo de SVG Inline:




    




Personalizar el Color del SVG:



Puedes cambiar el color del icono modificando el atributo fill en la etiqueta  o usando CSS:



.whatsapp-float:hover .whatsapp-icon path {
    fill: #128c7e; /* Color al pasar el cursor */
}



Conclusión



Implementar un botón flotante de WhatsApp en tu sitio web es una excelente manera de facilitar la comunicación con tus visitantes y potenciales clientes. Siguiendo estos sencillos pasos, puedes agregar esta funcionalidad de manera rápida y personalizada. Además, al utilizar un icono SVG inline, mejoras el rendimiento y la personalización de tu botón. No olvides probar el botón en diferentes dispositivos y navegadores para asegurar una experiencia óptima para todos los usuarios.



¡Empieza hoy mismo y mejora la interacción en tu sitio web con un botón flotante de WhatsApp!
La entrada Cómo Crear un Botón Flotante de WhatsApp para tu Sitio Web se publicó primero en Miguel Manchego desarrollo web.



Cómo Crear Spinners/Loaders con CSS Puro
miguelmr — Wed, 04 Dec 2024 15:13:32 +0000

Si estás buscando una forma sencilla y elegante de añadir animaciones a tus proyectos sin depender de librerías externas, aquí tienes 4 ejemplos de loaders animados creados únicamente con CSS. ¡Perfectos para cualquier diseño moderno!



Loader Circular Giratorio



Un clásico y limpio spinner circular.







.loader-circle {
  width: 50px;
  height: 50px;
  border: 5px solid #ccc;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}









Dots / Puntos que Brincan



Tres puntos animados que simulan un movimiento de rebote.




  




.loader-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.loader-dots span {
  width: 10px;
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
  animation: bounce 0.6s infinite ease-in-out;
}

.loader-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.loader-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}




  






Barra Deslizante



Una barra animada que simula un cargador infinito.







.loader-bar {
  width: 80px;
  height: 8px;
  background: linear-gradient(to right, #3498db 0%, #fff 50%, #3498db 100%);
  background-size: 200% 100%;
  animation: slide 1.5s infinite linear;
}

@keyframes slide {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}



¡Listo!  Solo necesitas copiar y pegar el HTML y CSS en tu proyecto. Estos loaders son ligeros, personalizables, y funcionales en cualquier navegador moderno. 



 ¿Cuál es tu favorito? Déjame tus comentarios. 




La entrada Cómo Crear Spinners/Loaders con CSS Puro se publicó primero en Miguel Manchego desarrollo web.



CSS agregar estilos a inputs para subir archivos
miguelmr — Tue, 19 Nov 2024 14:32:02 +0000

Estos estilos en campos de archivo están pensados para ser usados con Contact Form7 sin embargo pueden usarse con HTML puro u otro plugin, lo importante es fijarse en las clases usadas para que funcione.



Usando HTML




        
            
        
        Seleccionar archivo
    



Usando Contact Form 7



[file file-761 limit:5MB filetypes:jpg|png id:imagen1]Seleccionar archivo



Aplicando estilos CSS



Estos estilos funcionan tanto para HTML como usando Contact Form7 en WordPress



.uploader {
    display: inline-block;
    padding: 10px;
    border: 2px solid #ccc;
    cursor: pointer;
}

/* Ocultamos el campo file y dejamos solo el label visible */
.uploader input[type="file"] {
    display: none; /* Hide default file input */
}

/* Cambiamos el color si se ha elegido un archivo */
.uploader.active {
    background-color: green;
    color: white;
}

.file-name-label {
    margin-left: 10px;
}



Mostrar el nombre del archivo seleccionado



Usando un poco de javascript haremos que al seleccionar un archivo aparezca el nombre dentro de la etiqueta label



document.addEventListener('DOMContentLoaded', function () {
    const fileInputs = document.querySelectorAll('.wpcf7-file');
    
    fileInputs.forEach(input => {
        input.addEventListener('change', function() {
            // Change background color to green for the specific file input's label
            const uploaderLabel = input.closest('.uploader');
            uploaderLabel.classList.add('active');

            // Display the filename in the label
            const fileName = input.files[0] ? input.files[0].name : 'Seleccionar archivo';
            const label = uploaderLabel.querySelector('.file-name-label');
            label.textContent = fileName;
        });
    });
});




Se pueden agregar más detalles como por ejemplo que sean múltiples archivos para elegir o agregar un botón para retirar el archivo elegido








La entrada CSS agregar estilos a inputs para subir archivos se publicó primero en Miguel Manchego desarrollo web.



CSS Animación efecto zoom y desenfoque con dos columnas
miguelmr — Wed, 13 Nov 2024 17:19:52 +0000

En el diseño web, los efectos de animación pueden hacer que un sitio se vea mucho más interactivo y atractivo para los usuarios. Hoy veremos cómo lograr un efecto de zoom y desenfoque en columnas de imágenes usando CSS y HTML.



Imaginemos que tenemos dos columnas, cada una con una imagen. Al pasar el cursor sobre una columna, queremos que:




La imagen de esa columna se amplíe (zoom).



La otra columna se desenfoque para dirigir la atención del usuario.




Veamos paso a paso cómo hacerlo:



Estructura HTML Básica



Primero, estructuramos nuestro HTML para tener un contenedor con dos columnas. Cada columna contiene una imagen:




    
        
    
    
        
    




Desenfoque de la Columna Adyacente con CSS



CSS por sí solo permite desenfocar un elemento adyacente en todos los navegadores que soporten el selector has, de lo contrario tendría que usarse Javascript.



El código CSS necesario es:



* { margin: 0; padding: 0; }
        .container {
            display: flex;
            width: 100%;            
            margin: auto;
            height: 100vh; /* Fijas la altura para container */
            overflow: hidden;
        }

        .column {
            flex: 1;
            position: relative;
            overflow: hidden; /* Ocultas parte de la imagen que se hace zoom */
            transition: flex 0.5s ease;
        }

        .column img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Te aseguras que la imagen ocupe toda la columna sin distorcionarse */
            transition: transform 0.5s ease, filter 0.5s ease;
        }

        /* Aplicas el efecto a cada columna */
        .column:hover {
            flex: 1.2; /* Agrandas las columna */
        }

        .column:hover img {
            transform: scale(1.1); /* Escalas la imagen */
        }

                
        /* Aplicas el efecto de desenfoque en cada imagen */        
        .column:hover + .column img {    
            filter: blur(5px); 
        }

        .column:has(~ .column:hover) img {
            filter: blur(5px);            
        }    



Ver el efecto CSS funcionando



Puedes ver el efecto en este enlace




La entrada CSS Animación efecto zoom y desenfoque con dos columnas se publicó primero en Miguel Manchego desarrollo web.



¿Cómo evitar que WordPress sea infectado?
miguelmr — Wed, 13 Nov 2024 01:57:03 +0000

Evitar que tu instalación de WordPress sea infectada por malware o ataques requiere implementar buenas prácticas de seguridad. Aquí hay algunas recomendaciones clave para proteger tu sitio:



1. Mantén WordPress actualizado




WordPress: Asegúrate de mantener tu instalación de WordPress actualizada a la última versión. Las actualizaciones frecuentes corrigen vulnerabilidades conocidas.



Temas y Plugins: También actualiza tus temas y plugins regularmente. Los desarrolladores lanzan parches de seguridad para abordar vulnerabilidades.




2. Usa contraseñas fuertes




Utiliza contraseñas robustas para todas las cuentas, especialmente para el administrador, usuarios, y bases de datos. Usa una combinación de letras, números y caracteres especiales.



Considera el uso de un gestor de contraseñas para generar y almacenar contraseñas fuertes.




3. Desactiva la edición de archivos desde el panel de administración




WordPress permite editar los archivos del tema y los plugins desde el panel de administración. Si un atacante obtiene acceso al panel, podría modificar estos archivos.



Agrega la siguiente línea en el archivo wp-config.php para deshabilitar la edición:




define('DISALLOW_FILE_EDIT', true);



4. Instala plugins de seguridad



Utiliza plugins de seguridad como:




Wordfence Security: Proporciona un firewall, protección contra ataques de fuerza bruta y un análisis de malware.



Sucuri Security: Ofrece monitoreo de seguridad, auditoría y protección de sitios web.



iThemes Security: Ofrece más de 30 configuraciones de seguridad para proteger tu instalación.




5. Realiza copias de seguridad regulares



Haz copias de seguridad de tu sitio de manera regular (bases de datos, archivos, plugins, etc.) para poder restaurarlo rápidamente en caso de un ataque. Usa plugins como UpdraftPlus o BackupBuddy.



6. Habilita un firewall de aplicaciones web (WAF)



Un WAF ayuda a bloquear intentos de intrusión. Servicios como Cloudflare o Sucuri ofrecen WAF que protegen tu sitio de amenazas externas, ataques DDoS y otros tipos de ataques web.



7. Restringe los intentos de inicio de sesión




Limita los intentos de inicio de sesión para prevenir ataques de fuerza bruta. Usa plugins como Limit Login Attempts o la función de seguridad de Wordfence para hacer esto.



Si es posible, desactiva la opción de inicio de sesión de usuario ‘admin’ para evitar ataques dirigidos a esta cuenta predeterminada.




8. Configura permisos de archivo adecuados




Asegúrate de que los permisos de archivo en tu servidor estén configurados correctamente:

Archivos: 644



Directorios: 755





Además, evita que archivos sensibles como wp-config.php sean accesibles públicamente. Usa una regla en el .htaccess para proteger estos archivos:





Order Deny,Allow
Deny from all





9. Desactiva la ejecución de archivos en directorios no esenciales




Algunos directorios como wp-content/uploads no deben contener archivos PHP. Si tienes acceso al servidor, puedes agregar una regla al archivo .htaccess para evitar que se ejecuten archivos PHP en estos directorios:






Deny from all






10. Utiliza HTTPS




Asegúrate de que tu sitio esté utilizando HTTPS (certificado SSL). Esto cifrará los datos entre el navegador y el servidor, protegiendo la información sensible (como contraseñas e información personal) de los atacantes.



Puedes obtener certificados SSL gratuitos con servicios como Let’s Encrypt.




11. Revisa y elimina temas y plugins no utilizados




Si tienes temas o plugins inactivos o no utilizados, elimínalos. Estos pueden ser un vector para ataques si contienen vulnerabilidades que no se actualizan.




12. Monitorea tu sitio web




Realiza auditorías periódicas de seguridad en tu sitio y utiliza herramientas de monitoreo para detectar actividades sospechosas.



Plugins como WP Security Audit Log te permitirán llevar un registro detallado de las acciones en tu sitio.




13. Habilita el acceso mediante autenticación de dos factores (2FA)




La autenticación de dos factores añade una capa adicional de seguridad en el proceso de inicio de sesión, evitando que los atacantes accedan con solo la contraseña.




14. Protege tu base de datos




Cambia el nombre predeterminado de la base de datos, si es posible, y utiliza un prefijo personalizado para las tablas de WordPress, lo que dificulta los ataques dirigidos a bases de datos.




15. Revisa regularmente el código de tu sitio




Examina periódicamente los archivos de tu instalación de WordPress en busca de código malicioso o alteraciones no autorizadas. Los ataques de malware suelen modificar archivos clave.




16. Utiliza un servidor de confianza




Si es posible, usa un hosting especializado en WordPress con medidas de seguridad adecuadas. Algunos proveedores gestionan las actualizaciones y el monitoreo de seguridad de manera profesional.




Al aplicar estas recomendaciones de seguridad, minimizarás significativamente el riesgo de infección y ataques a tu sitio de WordPress. La seguridad es un proceso continuo, así que asegúrate de estar siempre alerta y actualizado.
La entrada ¿Cómo evitar que WordPress sea infectado? se publicó primero en Miguel Manchego desarrollo web.



CSS y HTML: Crear listas con numeración decreciente
miguelmr — Thu, 20 Aug 2015 21:46:10 +0000

Las listas ordenadas o tambien llamadas ordered list (









) nos generan listas ordenadas, empezando desde el 1. Ejemplo:




Primero



Segundo



Tercero




Pero seguro que muchos alguna vez han querido tener una lista con la numeracion invertida, algo así:



5. Item 1

4. Item 2

3. Item 3

2. Item 4

1. Item 5



Para lograr esto lo haremos de dos maneras:



Usando CSS



Para ello basta con el siguiente código:



ol {
counter-reset: c 10;
list-style: none;
}
li {
counter-increment: c -1;
}
li:before {
content: counter(c) ". ";
}




Si te fijas en el «ol» pusimos «counter-reset: c 10» eso nos indica que empezara desde el 10, la letra «c» es el nombre del contador, se puede poner al gusto de uno.







En el «li» «counter-increment: c -1» con eso decrecerá en 1 por cada «li».



Y en el «li:before» content: counter(c) «. » con esto pondremos el valor correspondiente.



Aquí te dejo algunos ejemplos adicionales:



Usando HTML



Para ello nos valdremos del atributo «reversed»




 	Cinco
 	Cuatro
 	Tres
 	Dos
 	Uno





Con lo cual obtendremos:








Cinco



Cuatro



Tres



Dos



Uno





La entrada CSS y HTML: Crear listas con numeración decreciente se publicó primero en Miguel Manchego desarrollo web.



jQuery: Llamar HTML sin recargar la página
miguelmr — Thu, 09 Apr 2015 17:21:25 +0000
Muchas veces queremos llamar HTML sin necesidad de tener que actualizar toda la página, para ello jQuery nos brinda la funcion «.load()».
Para explicar esta función haremos un pequeño ejemplo:

Necesitamos un botón o link para que en el evento click se cargue el HTML, y un contenedor «div» donde queremos que se muestre lo que cargaremos.

El HTML a usar será:

[cc lang=»html»]

 

            Aqui se cargará el contenido
    
[/cc]
Para ver el ejemplo en funcionamiento podemos ir AQUÍ
La estructura para load() es, primero el contenedor «$(«htmltext»)», de ahi «.(load)» y la url del html a cargar «(‘ejemplo1.html’)»;

Entonces en el evento click del botón pondremos lo siguiente:

[cc lang=»javascript»]

$(«#boton»).click(function(event) {

        $(«#htmlext»).load(‘ejemplo1.html’);

    });

[/cc]
Aparte de esto .load() nos permite llamar solo parte del HTML. Para ello agregaremos a la URL el nombre del div que queremos cargar «div#cargar-soloesto».

[cc lang=»javascript»]

$(«#boton2»).click(function(event) {

       $(«#htmlext2»).load(‘ejemplo1.html div#cargar-soloesto’);

    });

[/cc]
.load() tambien nos permite interactuar con archivos php, asi como enviar variables via «POST»:

[cc lang=»javascript»]

$(«#boton3»).click(function(event) {

        $(«#phpextget»).load(‘ejemplo2.php’,{

            ‘var1′:’Valor 1’,

            ‘var2′:’Valor 2’

            });

    });

[/cc]
[social-download button_id=»a8357ad76c6889d3f» dl_id=»http://www.miguelmanchego.com/samples/2015/recargarpaginajquery/recargarpaginajquery.zip» theme=»blue» message=»Comparte el post para descargar todos los archivos de los ejemplos» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=» @xlogus» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]
La entrada jQuery: Llamar HTML sin recargar la página se publicó primero en Miguel Manchego desarrollo web.



CCS3: Efectos hover para tus menús
miguelmr — Wed, 08 Apr 2015 20:14:24 +0000
Un buen sitio web necesita de una navegación simple, atráctiva y eficiente. Para ello no necesitamos recurrir a herramientas complejas, sino que con simples trucos de CSS3 se puede crear menus muy buenos.
Aquí te pondré unos ejemplos sencillos de efectos hover para tus menús; para que puedas copiarlos y modificarlos a tu gusto.

Para ver todos los ejemplos puedes ir AQUÍ.
Como base del menú usaremos «ul», «li» y «a»; en algunos casos agregaremos «span» para dar algun efecto especial.

[cc lang=»html» width=»100%»]

Link 1
Link 2
Link 3
Link 4
Link 5

[/cc]
El css base será:

[cc lang=»css» width=»100%»]

    ul{list-style:none;margin:0px;padding:0px;clear:both;}

    ul li{margin:0px 10px;padding:0px;float:left;}

    ul li a{display:block;text-decoration:none}

[/cc]
Ejemplo 1

En este ejemplo haremos que en el hover la letras cambien de color de izquierda a derecha.

Para ello usaremos de base el siguiente html:

[cc lang=»html» width=»100%»]

Link 1
Link 2
Link 3
Link 4
Link 5

[/cc]
Para generar este efecto nos valdremos del selector «:before» y la propiedad «content»; con esta propiedad podemos poner el texto que deseemos via css, le daremos el valor «attr(title)» quiere decir que del atributo title del «a» copiaremos su valor y lo asignaremos al «:before».

Para la animación usaremos la propiedad max-width, que variará de 0% a 100% en el hover, para evitar que el texto aparezca en 2 lineas debido al variar el «max-width» usaremos «white-space: nowrap».

Nuestro css quedaría así:

[cc lang=»css» width=»100%»]

    ul#ejm1 li a{

        position: relative;

        color:#ED1C24;

        font-weight:bold;

    }

    ul#ejm1 li a:before{

        position: absolute;

        color:#005496;

        content:attr(title);

        left:0px;

        top:0px;

        max-width:0%;

        white-space: nowrap;

        overflow:hidden;

        transition: max-width 0.3s linear

    }

    ul#ejm1 li a:hover:before{

        max-width:100%;

    }

[/cc]
Ejemplo 2

Para el ejemplo 2 haremos que aparezca una pequeña linea debajo del texto.
Nuestro HTML a usar será

[cc lang=»html» width=»100%»]

Link 1
Link 2
Link 3
Link 4
Link 5

[/cc]
Para lograr este efecto usaremos el selector «:after» con un height en «position: absolute», con «bottom: 0px», «opacity:0» y lo moveremos 20px para abajo con «transform: translateY(20px)», al hover haremos que aparezca «opacity:1» y para que de el efecto que aparece desde abajo con «transform: translateY(15px)».
Nos quedaría:

[cc lang=»css» width=»100%»]

    ul#ejm2 li a{

        position: relative;

        font-weight:bold;

        color:#0E83CD;

        margin: 0px 15px;

    }

    ul#ejm2 li a:after{

        position: absolute;

        bottom: 7px;

        left: 0px;

        width: 100%;

        height: 4px;

        background-color: #FFD743;

        content: «»;

        opacity: 0;

        transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;

        transform: translateY(20px);

    }

    ul#ejm2 li a:hover:after{

        opacity:1;

        transform: translateY(15px)

    }

[/cc]
Ejemplo 3

En el ejemplo 3 haremos un efecto que parece a una tarjeta deslizandose sobre la otra.

HTML base será:

[cc lang=»html» width=»100%»]

Link 1
Link 2
Link 3
Link 4
Link 5

[/cc]

Para obtener este efecto de tarjetas deslizandose usaremos el «span» y el «:before»; y colocaremos uno encima del otro para ello el «:before» será «position: absolute» y para la animación se deslizara el span sobre el «:before» con «transform: translateX(100%)».
El CSS quedaría:

[cc lang=»css» width=»100%»]

    ul#ejm3 li a{

        position: relative;

        color:#FFF;

        overflow:hidden;

    }

    ul#ejm3 li a:before{

        position: absolute;

        top: 0px;

        left: 0px;

        z-index: 1;

        padding: 10px 20px;

        background: none repeat scroll 0% 0% #FFF;

        color: #0F7C67;

        content: attr(title);

        transition: transform 0.3s ease 0s;

    }

    ul#ejm3 li a span{

        display: block;

        position: relative;

        padding: 10px 20px;

        background: none repeat scroll 0% 0% #0F7C67;

        transition: transform 0.3s ease 0s;

        z-index: 2;

    }
    ul#ejm3 li a:hover span{

        transform: translatex(100%);

    }

[/cc]
Ejemplo 4

Para el ejemplo 4 haremos un efecto de bajo relieve en el hover.

Nuestro HTML base será:

[cc lang=»html» width=»100%»]

Link 1
Link 2
Link 3
Link 4
Link 5

[/cc]

Para este efecto usaremos transparecia en el color de la letra «color: rgba(0, 0, 0, 0.2);» y al «:before» lo pondremos encima y al hacer hover se reducira «transform: scale(0.9)» y desaparecera «opacity: 0″ dejando el el link con el efecto de bajo relieve.

[cc lang=»css» width=»100%»]

    ul#ejm4{

        background-color:#0E83CD;

        overflow:hidden;

        padding:20px 10px

    }

    ul#ejm4 li a{

        position: relative;

        color: rgba(0, 0, 0, 0.2);

        overflow:hidden;

    }

    ul#ejm4 li a::before {

        color: #FFF;

        content: attr(title);

        position: absolute;

        transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;

    }

    ul#ejm4 li a:hover::before {

        transform: scale(0.9);

        opacity: 0;

    }

[/cc]
Ejemplo 5

En este ejemplo haremos una pequeña transición 3D que simulara un cubo que gira al hacer hover al link.

Usaremos el siguiente HTML:

[cc lang=»html» width=»100%»]

Link 1
Link 2
Link 3
Link 4
Link 5

[/cc]
Para ellos usaremos el «span» y el «:before» con lo cual rotaremos una encima de la otra para emular el efecto, el css quedaría:

[cc lang=»css» width=»100%»]

    ul#ejm5{

        background-color:#3FA46A;

        overflow:hidden;

        padding:20px 10px

    }

    ul#ejm5 li a{

        position: relative;

        line-height:40px;

        overflow:hidden;

        color:#fff;

        perspective: 1000px;

    }

    ul#ejm5 li a span{

        position: relative;

        display: inline-block;

        padding: 0px 14px;

        background: #247547;

        transition: transform 0.3s ease 0s;

        transform-origin: 50% 0px 0px;

        transform-style: preserve-3d;

    }

    ul#ejm5 li a span:before{

        position: absolute;

        top: 100%;

        left: 0px;

        width: 100%;

        height: 100%;

        padding: 0px 14px;

        background:  #2e8d57;

        content: attr(data-title);

        transition: #000 0.3s ease 0s;

        transform: rotateX(-90deg);

        transform-origin: 50% 0px 0px;

    }

    ul#ejm5 li a:hover span {

        transform: rotateX(90deg) translateY(-22px);

    }

    ul#ejm5 li a:hover span::before {

        background:  0% 0% #2e8d57;

    }

[/cc]
Para ver todos los ejemplos puedes ir AQUÍ

[social-download button_id=»a8357ad76c6889d3f» dl_id=»www.miguelmanchego.com/samples/2015/hovermenus/hovermenus.zip» theme=»blue» message=»Comparte el post para descargar todos los archivos de los ejemplos» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=» @xlogus» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]
La entrada CCS3: Efectos hover para tus menús se publicó primero en Miguel Manchego desarrollo web.



HTML5: combo con campos condicionales
miguelmr — Thu, 02 Apr 2015 16:54:22 +0000
En este tutorial veremos como crear un formulario cuyos campos dependan de un combo, el ejemplo se puede cambiar para usar cualquier tipo de campos o cualquier cantidad basta con alterar las opciones contenidas en el div «opciones».
Lo primero es crear el combo #tipo con sus opciones, allí debemos fijarnos que los value sean iguales a los ID de los div que están dentro de «opciones», de esta forma al elegir una opción se usará el contenido del div respectivo.
[cc lang=»html»]


[/cc]
Crear las opciones del formulario
[cc lang=»html»]


Nombre: 
Direccion: 
DNI: 



Razón Social: 
Direccion: 
RUC: 



[/cc]
Podrían alterar la posición de la etiqueta form para que capture también al combo principal o incluso más campos que sean fijos, ya es cuestión de jugar un poco con el código.

Para añadir más opciones basta añadir más div con ID op3, op4, op5, etc y esos mismos valores ponerlos en el combo principal.
El Javascript del Combo y los campos dependientes
[cc lang=»javascript»]

function elegir_opcion(combo) {

$tipo = jQuery(combo).val();

$campos = jQuery(«#»+$tipo).html();

jQuery(«.opcionesWrapper»).html($campos);

}

[/cc]
Yo he usado una función muy sencilla que simplemente captura la opción elegida, en la segunda línea captura los campos que corresponden a dicha opción y en la última línea coloca esos campos en un div contenedor, podrían hacer que el combo no invoque a la función sino que jQuery capture ele evento pero no lo he puesto para no complicar ele ejemplo y sea muy claro su funcionamiento.
Si te ha gustado este tutorial y os parece util no olvideis compartirlo o darle tweet además así podrán descargar los archivos del ejemplo o pueden ver el ejemplo funcionando AQUI
 
[social-download button_id=»589f49b0d3e67e307″ dl_id=»http://www.miguelmanchego.com/wp-content/uploads/2015/04/combo-campos-condicionales.zip» theme=»blue» message=»Compartelo para descargar el ejemplo de los campos condicionales» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=»Tutorial para crear Campos condicionales #html5 @XLogus @xlogus» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]
La entrada HTML5: combo con campos condicionales se publicó primero en Miguel Manchego desarrollo web.