Miguel Manchego desarrollo web View RSS

No description
Hide details



Dar estilos a una tabla y efecto zebra 4 Dec 2024 7:08 AM (10 months ago)

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:

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
      <th>Ciudad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>28</td>
      <td>Madrid</td>
    </tr>
    <tr>
      <td>Juan</td>
      <td>34</td>
      <td>Barcelona</td>
    </tr>
    <tr>
      <td>María</td>
      <td>22</td>
      <td>Valencia</td>
    </tr>
    <!-- Más filas -->
  </tbody>
</table>

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 <style> en el <head> de tu documento HTML.

a. Estilos Básicos

Primero, eliminaremos los bordes predeterminados y añadiremos un aspecto más limpio:

table {
  width: 100%;
  border-collapse: collapse; /* Elimina el espacio entre bordes */
  font-family: Arial, sans-serif;
}

th, td {
  padding: 12px 15px;
  text-align: left;
}

b. Añadiendo Colores y Tipografía

Mejoraremos la tipografía y añadiremos colores suaves para un aspecto moderno:

thead {
  background-color: #009879; /* Color de fondo para el encabezado */
  color: #ffffff; /* Color del texto del encabezado */
}

tbody tr {
  border-bottom: 1px solid #dddddd;
}

tbody tr:last-of-type {
  border-bottom: 2px solid #009879; /* Última fila con borde más grueso */
}

tbody tr:hover {
  background-color: #f1f1f1; /* Efecto hover para resaltar la fila */
}

c. Implementando el Efecto Zebra

El efecto zebra alterna el color de las filas para mejorar la legibilidad. Lo implementaremos utilizando los selectores :nth-child.

tbody tr:nth-child(even) {
  background-color: #f3f3f3; /* Color para filas pares */
}

tbody tr:nth-child(odd) {
  background-color: #ffffff; /* Color para filas impares */
}

Nota: Puedes ajustar los colores según la paleta de tu sitio web para mantener la coherencia visual.

3. Código Completo de Ejemplo

Aquí tienes un ejemplo completo que integra todos los estilos mencionados:

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:

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

Y en el HTML

<div class="table-container">
  <table>
    <!-- contenido de la tabla -->
  </table>
</div>

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.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Cómo Crear un Botón Flotante de WhatsApp para tu Sitio Web 4 Dec 2024 6:48 AM (10 months ago)

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

<!-- Botón Flotante de WhatsApp -->
<a href="https://wa.me/34123456789?text=Hola%2C%20estoy%20interesado%20en%20tus%20servicios" class="whatsapp-float" target="_blank">
    <i class="fa fa-whatsapp whatsapp-icon"></i>
</a>

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 <head> de tu HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

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:

Ejemplo de SVG Inline:

<a href="https://wa.me/34123456789?text=Hola%2C%20estoy%20interesado%20en%20tus%20servicios" class="whatsapp-float" target="_blank">
    <svg class="whatsapp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
        <path fill="#fff" d="M380.9 97.1C339-7.1 232.3-3.3 173.3 43.5L140.2 76.6C131.5 85.3 131.5 99.7 140.2 108.4L206.8 174H198.5C88.8 174 0 262.8 0 372.5C0 382.3 2.2 392 6.4 401.2C10.6 410.4 16.3 418.5 23.3 425.5C30.3 432.5 38.4 438.2 47.6 442.4C56.8 446.6 66.5 448.8 76.3 448.8H372.5C382.3 448.8 392 446.6 401.2 442.4C410.4 438.2 418.5 432.5 425.5 425.5C432.5 418.5 438.2 410.4 442.4 401.2C446.6 392 448.8 382.3 448.8 372.5C448.8 262.8 360 174 250.3 174H242L308.6 108.4C317.3 99.7 317.3 85.3 308.6 76.6L275.5 43.5C216.5-3.3 109.8-7.1 68-97.1C26.2-187.3 25.3-293.4 68.7-369.7C112.2-446 205.7-512 300.2-512C394.6-512 488  -446 531.3-369.7C574.7-293.4 573.8-187.3 532-97.1Z"/>
    </svg>
</a>

Personalizar el Color del SVG:

Puedes cambiar el color del icono modificando el atributo fill en la etiqueta <path> 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.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Cómo Crear Spinners/Loaders con CSS Puro 4 Dec 2024 6:13 AM (10 months ago)

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.

<div class="loader-circle"></div>
.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.

<div class="loader-dots">
  <span></span><span></span><span></span>
</div>
.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.

<div class="loader-bar"></div>
.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.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

CSS agregar estilos a inputs para subir archivos 19 Nov 2024 5:32 AM (11 months ago)

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

<label class="uploader">
        <span class="wpcf7-form-control-wrap" data-name="file-761">
            <input size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.png" aria-invalid="false" type="file" name="file-761">
        </span>
        <span class="file-name-label">Seleccionar archivo</span>
    </label>

Usando Contact Form 7

<label class="uploader">[file file-761 limit:5MB filetypes:jpg|png id:imagen1]<span class="file-name-label">Seleccionar archivo</span><button type="button" class="remove-file-btn" style="display: none;">&times;</button></label>

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.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

CSS Animación efecto zoom y desenfoque con dos columnas 13 Nov 2024 8:19 AM (11 months ago)

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:

  1. La imagen de esa columna se amplíe (zoom).
  2. 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:

<div class="container">
    <div class="column" id="column1">
        <img src="https://via.placeholder.com/400x600" alt="Imagen 1">
    </div>
    <div class="column" id="column2">
        <img src="https://via.placeholder.com/400x600" alt="Imagen 2">
    </div>
</div>

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.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

¿Cómo evitar que WordPress sea infectado? 12 Nov 2024 4:57 PM (11 months ago)

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

2. Usa contraseñas fuertes

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

define('DISALLOW_FILE_EDIT', true);

4. Instala plugins de seguridad

Utiliza plugins de seguridad como:

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

8. Configura permisos de archivo adecuados

<Files wp-config.php>
Order Deny,Allow
Deny from all
</Files>

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

<Directory "/wp-content/uploads">
<Files "*.php">
Deny from all
</Files>
</Directory>

10. Utiliza HTTPS

11. Revisa y elimina temas y plugins no utilizados

12. Monitorea tu sitio web

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

14. Protege tu base de datos

15. Revisa regularmente el código de tu sitio

16. Utiliza un servidor de confianza

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.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

CSS y HTML: Crear listas con numeración decreciente 20 Aug 2015 1:46 PM (10 years ago)

Las listas ordenadas o tambien llamadas ordered list (

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

  1. Primero
  2. Segundo
  3. 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»

<ol reversed="reversed">
 	<li>Cinco</li>
 	<li>Cuatro</li>
 	<li>Tres</li>
 	<li>Dos</li>
 	<li>Uno</li>
</ol>

Con lo cual obtendremos:

  1. Cinco
  2. Cuatro
  3. Tres
  4. Dos
  5. Uno

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

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

jQuery: Llamar HTML sin recargar la página 9 Apr 2015 9:21 AM (10 years ago)

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.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

CCS3: Efectos hover para tus menús 8 Apr 2015 12:14 PM (10 years ago)

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%»]

[/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

ejm1

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%»]

[/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

ejemplo2

Para el ejemplo 2 haremos que aparezca una pequeña linea debajo del texto.

Nuestro HTML a usar será
[cc lang=»html» width=»100%»]

[/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

ejm3

En el ejemplo 3 haremos un efecto que parece a una tarjeta deslizandose sobre la otra.
HTML base será:
[cc lang=»html» width=»100%»]

[/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

ejm4

Para el ejemplo 4 haremos un efecto de bajo relieve en el hover.
Nuestro HTML base será:
[cc lang=»html» width=»100%»]

[/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

ejm5

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%»]

[/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.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

HTML5: combo con campos condicionales 2 Apr 2015 8:54 AM (10 years ago)

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.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?