EntradaEfectos de desplazamiento para el fondo de la página. Efectos originales al pasar el cursor sobre objetos
CSS3 ha brindado innumerables oportunidades para los diseñadores de UX, y lo mejor de todo es que los elementos más interesantes son realmente fáciles de implementar.
Solo un par de líneas de código crearán efectos de transición sorprendentes que entusiasmarán a sus usuarios, aumentarán la participación y, en última instancia, si se usan correctamente, aumentarán su tráfico. Además, estos efectos usan aceleración de hardware, esto es progreso, en el que puede participar ahora mismo.
Aquí hay 8 efectos realmente simples que agregarán vida a su interfaz de usuario y sonrisas en las caras de sus usuarios.
Todos estos efectos (un rectángulo) se controlan mediante la propiedad de transición. Entonces, para ver cómo funcionan estos efectos, creamos un div en la página HTML:
Una vez que haya hecho eso, establezca su ancho y alto (para que esté dimensionado), su color de fondo (para que podamos verlo) y las propiedades de su efecto.
La propiedad de transición tiene tres valores: propiedades de transición (en nuestro caso todas) la velocidad de transición (en nuestro caso 0.3 segundos) y un tercer valor que le permite cambiar cómo se calculan la aceleración y la desaceleración, pero nos quedaremos con el predeterminado configuración, dejando que el campo esté vacío.
Ahora todo lo que tenemos que hacer es cambiar las propiedades y se animarán para nosotros.
Si desea continuar por su cuenta, los archivos de demostración son para usted.
1. Atenuación
Los efectos de atenuación son una solicitud bastante común de los clientes. Esta es una excelente manera de resaltar la funcionalidad o llamar la atención sobre un llamado a la acción.
El efecto se codifica en dos pasos: primero, establece el estado inicial; luego establezca el cambio, por ejemplo, al pasar el mouse por encima:
Fundido (opacidad: 0.5;) .fade: hover (opacidad: 1;)
(Asegúrate de darle a tu div la clase "fade" para ver cómo funciona).
2. Cambio de color
En el pasado, la animación de cambio de color era increíblemente compleja, involucrando las matemáticas involucradas en el cálculo de valores RGB individuales y luego recombinándolos. Ahora simplemente configuramos el "color" de la clase div y configuramos el color que queremos en CSS:
Color: flotar (fondo: # 53a7ea;)
3. Acercar y alejar
Érase una vez, para agrandar un elemento, tenías que usar su ancho y alto, o un parámetro de plenitud. Pero por ahora, podemos usar la transformación CSS3 para acercarnos.
Configure su clase div para "crecer" y luego agregue este código a su estilo de bloque:
Grow: hover (-webkit-transform: scale (1.3); -ms-transform: scale (1.3); transform: scale (1.3);)
Reducir un elemento es tan fácil como agrandarlo. Para hacer un elemento más grande, indicamos un valor mayor que 1, para hacerlo más pequeño, indicamos un valor menor que 1:
Reducir: hover (-webkit-transform: scale (0.8); -ms-transform: scale (0.8); transform: scale (0.8);)
4. Retorcimiento de elementos
CSS proporciona una serie de transformaciones, y una de las mejores es la torsión de elementos. Dale a tu div la clase "rotar" y agrega las siguientes líneas a tu CSS:
Rotar: hover (-webkit-transform: rotateZ (-30deg); -ms-transform: rotateZ (-30deg); transform: rotateZ (-30deg);)
5. Convertir un cuadrado en un círculo
Ahora el efecto de transformar un elemento cuadrado en uno redondo y viceversa es muy popular. Con CSS esto es fácil de lograr, simplemente cambiamos la propiedad border-radius. Solo usaremos la propiedad border-radius.
Dale a tu div la clase "círculo" y agrega estas líneas a tus hojas de estilo:
Círculo: desplazarse (radio del borde: 50%;)
6. Sombra 3D
Las sombras 3D estuvieron mal vistas durante un año más o menos porque, como ve, no encajaban en el diseño plano, lo que por supuesto es una tontería, funcionan fantásticamente bien, lo que le da al usuario una sensación de compromiso tanto con el diseño plano como con la interfaz pseudo 3D. .
Este efecto se logra agregando un rectángulo de sombra y luego moviendo el elemento en el eje x cambiando la propiedad de transformación y traducción para que parezca que el elemento está creciendo fuera de la pantalla.
Dale a tu div la clase "threed" y luego agrega el siguiente código a tu CSS:
Threed: hover (box-shadow: 1px 1px # 53a7ea, 2px 2px # 53a7ea, 3px 3px # 53a7ea; -webkit-transform: translateX (-3px); transform: translateX (-3px);)
7. Columpio
No todos los elementos utilizan la propiedad de transición. También podemos crear animaciones muy complejas usando @keyframes, animación y animación-iteración.
En este caso, primero definiremos las animaciones CSS en estilos. Notará que debido a problemas de implementación, tenemos que usar @ -webkit-keyframes así como @keyframes (sí, Internet Explorer es realmente mejor que Chrome, al menos).
@ -webkit-keyframes swing (15% (-webkit-transform: translateX (5px); transform: translateX (5px);) 30% (-webkit-transform: translateX (-5px); transform: translateX (-5px); ) 50% (-webkit-transform: translateX (3px); transform: translateX (3px);) 65% (-webkit-transform: translateX (-3px); transform: translateX (-3px);) 80% (-webkit -transform: translateX (2px); transform: translateX (2px);) 100% (-webkit-transform: translateX (0); transform: translateX (0);)) @keyframes swing (15% (-webkit-transform: translateX (5px); transform: translateX (5px);) 30% (-webkit-transform: translateX (-5px); transform: translateX (-5px);) 50% (-webkit-transform: translateX (3px); transform : translateX (3px);) 65% (-webkit-transform: translateX (-3px); transform: translateX (-3px);) 80% (-webkit-transform: translateX (2px); transform: translateX (2px); ) 100% (-webkit-transform: translateX (0); transform: translateX (0);))
8. Insertar borde
Uno de los estilos de botones más populares en este momento es el botón fantasma; botón sin fondo y borde en negrita. Por supuesto, podemos simplemente agregar un borde al elemento, pero eso cambiará la posición del elemento. Podríamos resolver esto con el tamaño de la caja, pero una solución mucho más simple es ir al borde insertando una sombra paralela.
Dale a tu caso una clase de "borde" y agrega el siguiente CSS para tus estilos:
Borde: hover (cuadro-sombra: recuadro 0 0 0 25px # 53a7ea;)
Quieres saber, ? o ? Todo esto y mucho más en el sitio. Suscríbete a nuestro boletín por correo electrónico (en la parte inferior de la página) o ¡y serás el primero en enterarte de nuevos artículos! También únete a nuestro
En esta lección, continuamos trabajando con CSS, implementamos un hermoso efecto de desplazamiento en una imagen donde gira suavemente con desvanecimiento y aparecen un trazo y títulos de texto en su fondo.
Efecto CSS que describe la estructura alámbrica de los bloques de transformación.
Descargue la plantilla preparada, contiene dos archivos, Índice en el que está conectado el CSS. En CSS, restablecemos el relleno, configuramos la fuente y agregamos una imagen al fondo. La carpeta / img en sí contiene dos archivos, un fondo y una imagen como ejemplos.
Describimos todos los bloques que deben mostrarse en la página y los rellenamos con contenido de texto.
Div.dws> div.blocImg> img + div.blocText> div.text> h2 + p transición 
Efecto de desplazamiento CSS
transformar escala (x, y)
: hover :: before :: after
Describiendo los principales estilos / efectos de imagen en css
Configuramos el bloque con la imagen a un ancho y alto fijos, y con la ayuda de overflow: oculto, oculte todo lo innecesario fuera de él, agregue un cursor.
BlocImg (ancho: 600px; alto: 338px; desbordamiento: oculto; cursor: puntero;)
Para mayor comodidad, colocamos el bloque en el medio de la pantalla.
Dws (posición: absoluta; arriba: 50%; izquierda: 50%; transformar: traducir (-50%, -50%);)
Luego hacemos que la imagen sea 100% ancha y colgamos una animación suave en medio segundo.
BlocImg img (ancho: 100%; transición: .5s;)
Establezca el filtro de desenfoque en 1 pico. filtro: difumina (1px) y oscurece el fondo, y para esto agregamos un fondo negro a la clase .blocImg, y al pasar el mouse hacemos que la imagen sea semitransparente opacidad: .5; ...
Dws: hover .blocImg img (transformar: rotar (-10 grados) escala (1.3); filtro: desenfoque (1px); opacidad: .5;)
Ahora comencemos a diseñar el texto.
Decorando el contenido de texto del bloque
Posicionamos el bloque .blocText como el padre absoluto y establecemos los márgenes en todos los bordes a 30 pt. En el futuro, haremos su aparición animada a lo largo del marco.
BlocText (contorno: 1 px de color naranja sólido; posición: absoluta; superior: 30 px; izquierda: 30 px; derecha: 30 px; inferior: 30 px;)
Para el texto, establezca el color en blanco, configúrelo en letras mayúsculas, coloque el relleno alrededor de los bordes.
Texto (color: #fff; transformación de texto: mayúsculas; relleno: 0 20px;)
Establezca el título del segundo nivel en 25 picos.
Texto h2 (tamaño de fuente: 25px;)
Hacemos que la segunda parte sea naranja, establecemos las sangrías desde la parte inferior para la línea y hacemos el subrayado en 2 picos.
Texto h2 span (color: naranja; padding-bottom: 3px; border-bottom: 2px solid #fff;)
Posicionamos el párrafo absolutamente, lo bajamos 180 pico. establezca el ancho de su bloque en 250 píxeles. Agregue un borde de 4 picos en el lado izquierdo. y configurar el acolchado.
Texto p (posición: absoluta; superior: 180px; ancho: 250px; borde izquierdo: 4px sólido # ffb611; relleno: 0 10px;)
Describiendo los pseudoelementos :: before y :: after
Eliminemos el esquema que se asignó previamente a la clase .blocText y configurémoslo para los pseudo-elementos.
Crea pseudo-elementos :: antes :: después, describe sus estilos principales.
Los posicionamos absolutamente, establecemos el ancho y alto al 100% y la apariencia de pago en medio segundo.
BlocText :: before, .blocText :: after (contenido: ""; posición: absoluta; arriba: 0; izquierda: 0; ancho: 100%; alto: 100%;)
Por separado, :: antes de asignar el borde de la parte superior e inferior a 1 pico. y establezca la transformación para la transformación del eje X: escala (0,1).
BlocText :: before (borde superior: 1px sólido #fff; borde inferior: 1px sólido #fff; transformar: escala (0,1);)
Hacemos lo mismo para :: después, solo el borde ahora está en los lados izquierdo y derecho, y la transformación a lo largo del eje Y
BlocText :: after (borde izquierdo: 1px sólido #fff; borde-derecho: 1px sólido #fff; transformar: escala (1,0);)
Y para su apariencia, indicamos la transformación para todos los ejes en 1.
Dws: hover .blocText :: before, .dws: hover .blocText :: after (transform: scale (1,1);)
Y queda ocultar el texto, para ello establecemos la clase .text en opacity: 0 y le agregamos su apariencia suave.
Y al pasar el mouse, se muestra el texto.
Dws: hover .text (opacidad: 1;)
Al final, obtuvimos efectos de desplazamiento geniales al pasar el mouse sobre la imagen.
Quien esté interesado en el video, compártelo con tus amigos en las redes sociales, y no olvides comentar al mismo tiempo.
La lección fue preparada por Denis Gorelov.
En primer lugar, para aquellos que no están del todo en el tema o nada en el tema, les explicaré brevemente de qué se trata. Se trata de varios tipos de efectos (ventanas emergentes, información sobre herramientas, transiciones suaves, transformaciones, rotación, zoom, compensación, etc.) que se aplican a los elementos de un sitio web cuando se desplaza sobre ellos con el cursor del mouse. Estos efectos se pueden implementar usando varios complementos de jQuery, o pure.
Hoy he preparado una gran colección de efectos de desplazamiento originales para imágenes creadas con CSS3, sin conectar bibliotecas de JavaScript. No hablaré sobre las ventajas y desventajas de implementar efectos de desplazamiento en CSS3 puro, este es otro tema, solo mira los ejemplos y, si es necesario, usa el que te guste en tu sitio. Todos los efectos presentados en la revisión se suministran con un ejemplo de demostración y documentación detallada con las fuentes. Los manuales están en su mayoría en burgués, pero todo es más o menos intuitivo.
Solo quiero llamar su atención sobre el hecho de que todos estos ejemplos funcionarán correctamente solo en navegadores modernos que admitan propiedades CSS3.
Para no romper la imagen general, no distorsionó los nombres de los efectos con la traducción automática (con la excepción de algunos), dejó los originales de los títulos como los llamó el desarrollador.
Un efecto de desplazamiento muy interesante para imágenes en miniatura, que utiliza líneas finas en el diseño y la tipografía. Varios tipos diferentes de efectos para la apariencia de subtítulos para imágenes, transformaciones 3D suaves y no intrusivas y transiciones suaves de pseudoelementos. Solo funciona en navegadores modernos.
iHover es una colección impresionante de efectos de desplazamiento CSS3 puros, con soporte de Bootstrap 3. Construido con Scss CSS (archivo), fácilmente modificable con variables. El código es modular, no es necesario incluir el archivo completo. Más de 30 efectos diferentes en un solo paquete. Todo está bastante bien documentado y los efectos son muy fáciles de usar. Todo lo que necesita hacer es alinear el marcado HTML correctamente y poner el archivo CSS a trabajar.
Crea algunos efectos de desplazamiento simples pero elegantes para los subtítulos de las imágenes. La idea es hacer que el título, el nombre del autor y el botón de enlace aparezcan dramáticamente al pasar el cursor sobre las miniaturas. Para algunos efectos, se utilizan transformaciones visuales 3D.
Un efecto de transición muy simple, sin campanas ni silbidos especiales, una imagen completamente redonda en un marco, se transforma cambiando el enfoque en el hover y eso es todo.
Efectos de desplazamiento para miniaturas CSS3
El desarrollador posiciona su trabajo como un ejemplo de una galería de imágenes con efectos de transición cuando aparecen anotaciones (leyendas) para miniaturas. Se declara un fuerte soporte para los navegadores modernos, incluido IE 9+. Por supuesto, es difícil llamarlo una galería completa, pero el efecto de la aparición de firmas es bastante interesante.
Otro conjunto de reglas CSS para crear impresionantes efectos de transformación al pasar el mouse sobre miniaturas absolutamente circulares. El paquete contiene 7 tipos de transiciones CSS3, documentación muy detallada sobre la configuración y el uso. Los efectos son compatibles con todos los navegadores modernos.
Rotación de miniaturas al pasar el mouse
El efecto simple de rotar miniaturas redondas cuando pasas el mouse sobre ellas con el cursor del mouse es aproximadamente el mismo que puedes ver en mi blog, en los anuncios de publicaciones en la página principal. Está implementado en un par de líneas de código CSS.
Si se traduce literalmente: "Efecto sexual cuando pasas el cursor". Por supuesto, difícilmente notarás algo tan sexy en este efecto, a menos que tengas una imaginación violenta, pero el efecto es interesante a su manera y vale la pena prestarle atención.
Cinco efectos de desplazamiento diferentes para imágenes. Leyendas emergentes en tres variaciones, cortinas en forma de cambio del grado de transparencia y rotación con movimiento horizontal.
4 Tipos de efectos de animación para pies de imagen, implementados exclusivamente con CSS3. Diferentes posiciones de fundido y efectos de transición, rendimiento bastante estándar. Para comprender cómo funciona la animación, eche un vistazo al código fuente de la página de demostración, no encontré ninguna documentación separada.
Miniaturas alineadas en la galería con varias apariencias de subtítulos, rotación, desvanecimiento, pop y más. La documentación sobre el uso y la configuración es bastante escasa, pero si realmente lo desea, puede resolverlo.
Este efecto no representa nada especial, un cambio banal en el brillo de las imágenes al pasar el mouse, excepto que se agregan elementos de animación. Tendrá que averiguar los detalles de la implementación usted mismo expandiendo el código fuente de la demostración.
Otro conjunto de 10 efectos de desplazamiento para imágenes, varias modificaciones de miniaturas en desplazamiento, zoom, rotación, rotación, desvanecimiento, etc.
Varios efectos para animar el marco alrededor de las imágenes, se ve bastante atractivo, hay una guía detallada sobre cómo configurar y usar.
Se aplicaron efectos de desplazamiento de CSS3 originales para mostrar de forma eficaz los subtítulos en miniatura al desplazar el cursor. El conjunto de reglas CSS incluye 10 efectos diferentes que puede usar por separado para diferentes imágenes. Los efectos son realmente impresionantes, especialmente cuando te das cuenta de que todo se hace con CSS3. Una guía detallada lo ayudará a descubrir qué es qué.
La idea es crear un SVG que sea una forma de fondo para algún tipo de letra y se convierta en otra forma al pasar el mouse. Por lo tanto, puede hacer muchas opciones diferentes, en el ejemplo, se muestran tres tipos de efectos de transición. Lo bueno de usar SVG es que podemos cambiar el tamaño del formulario para que se ajuste al contenedor principal.
Imágenes deslizantes
La esencia de este efecto es que la imagen se mueve hacia arriba y hacia abajo para que aparezca la firma. Si trabaja con los parámetros de estilo, creo que puede lograr efectos bastante agradables, pero por defecto, todo parece muy simple.
Con este efecto, todo es simple, los subtítulos de las imágenes se deslizan hacia arriba a la derecha o de izquierda a abajo, en forma de cinta con un fondo oscuro traslúcido, todo es muy simple de reformar usando propiedades css.
Una solución interesante, las miniaturas se presentan en forma oscurecida, cuando pasas el mouse sobre ellas, aparecen las imágenes y la firma emerge sobre un fondo claro.
Una leyenda de imagen emerge de la esquina y se expande diagonalmente por toda el área de la imagen.
Algunas soluciones más interesantes para implementar subtítulos emergentes para miniaturas de imágenes. En el editor en línea, puede experimentar con los parámetros y lograr resultados más impresionantes.
Un conjunto de hermosos efectos al pasar el cursor sobre miniaturas, varios tipos de apariencia y diseño de subtítulos para imágenes. Las líneas finas en contraste con un fondo ligeramente oscurecido crean bloques de información fáciles de leer.
Formas extrañas y efecto de zoom combinado con efecto de animación de subtítulos a imágenes en miniatura.
Maravillosos efectos de superponer iconos en miniaturas de imágenes en diferentes variaciones de apariencia. El ejemplo usa el símbolo (+) delineado en un círculo usando border-radius: en CSS, también puede usar los íconos de fuente para hacer que el panel emergente sea más informativo.
Un ejemplo de creación de un efecto de diapositiva visual para generar leyendas volumétricas en imágenes utilizando solo CSS3 y HTML5.
6 pies de imagen
6 Opciones para la aparición de leyendas emergentes para imágenes al pasar el ratón por encima con CSS3. Lección detallada sobre implementación y configuración, fuentes disponibles para descargar.
Y finalmente, al final, por así decirlo, no puedo dejar de mencionar la forma más sencilla de crear un título emergente para una miniatura usando CSS3.
El servicio SendPulse es una herramienta de marketing para crear una base de suscripción y convertir visitantes aleatorios a su sitio en visitantes habituales. SendPulse reúne las funciones más importantes para atraer y retener clientes en una plataforma:
● boletines informativos por correo electrónico,
● web-push,
● envío de SMS,
● SMTP,
● mensajería en Viber,
● enviar mensajes a Facebook Messenger.
Correo electrónico del boletín
Puede utilizar varias tarifas para realizar boletines informativos por correo electrónico, incluidos los gratuitos. La tarifa gratuita tiene limitaciones: la base de suscripción no es más de 2500.Lo primero con lo que empezar, cuando se trabaja con el servicio de envío de correo electrónico, es crear su propio directorio... Establezca un título y cargue una lista de direcciones de correo electrónico.
SendPulse facilita la creación formularios de suscripción como una ventana emergente, formularios en línea, flotantes y fijados a una determinada parte de la pantalla. Con la ayuda de los formularios de suscripción, recopilará una base de suscriptores desde cero o agregará nuevas direcciones a su base.
En el diseñador de formularios, puede crear exactamente el formulario de suscripción que mejor se adapte a sus necesidades, y los consejos de servicio le ayudarán a hacer frente a esta tarea. También es posible utilizar uno de los formularios prefabricados disponibles.
Al crear formularios de suscripción, es obligatorio utilizar el correo electrónico con un dominio corporativo. Lea cómo.
Plantillas de mensajes le ayudará a diseñar sus cartas a los suscriptores maravillosamente. Puede crear su propia plantilla de carta en un constructor especial.
Autoinformes... Los administradores de contenido utilizan activamente el envío automático de correos. Esto ayuda a automatizar el proceso de servicio al cliente. Hay varias formas de crear una alimentación automática:
● Serie consecutiva de letras... Esta es la opción más sencilla, cuando, independientemente de las condiciones, se escriben varias cartas, que se enviarán a los destinatarios en un orden determinado. Puede haber sus propias opciones: serie de mensajes(hilo de mensaje simple), fecha especial(las cartas están programadas para fechas específicas), letra de activación- la carta se envía en función de las acciones del suscriptor (abrir un mensaje, etc.).
● Automatización360- envío de correos con determinados filtros y condiciones, así como teniendo en cuenta las conversiones.
● Cadenas listas por plantilla. Puede crear una serie de letras de acuerdo con una plantilla determinada, o modificar la plantilla y ajustarla para que se adapte a sus necesidades.
Pruebas A / B lo ayudará a experimentar con diferentes opciones para enviar una serie de cartas y determinar la mejor opción para aperturas o transiciones.
Envío de notificaciones push
Los push-mailings son una suscripción en una ventana del navegador, es una especie de reemplazo de las suscripciones rss. Las tecnologías web-push han entrado rápidamente en nuestra vida, y ya es difícil encontrar un sitio que no utilice push-mailing para atraer y retener clientes. El script de solicitud para, puede enviar cartas manualmente o crear correos electrónicos automáticos creando una serie de cartas o recopilando datos de RSS. La segunda opción implica que después de que aparezca un nuevo artículo en su sitio, se enviará automáticamente una notificación a sus suscriptores con un breve anuncio.
Nuevo de EnviarLegumbres- ahora puede monetizar su sitio con notificaciones push incorporando anuncios en ellas. Al llegar a los $ 10, los pagos se realizan todos los lunes a uno de los sistemas de pago: Visa / mastercard, PayPal o Webmoney.
Los mensajes push en el servicio son absolutamente gratuitos. El pago se realiza solo para los correos de marca blanca sin mencionar el servicio SendPulse, pero si el logotipo del servicio no le molesta, puede usar las notificaciones automáticas de forma gratuita y sin restricciones.
SMTP
La función SMTP protege sus correos electrónicos para que no se incluyan en la lista negra mediante el uso de direcciones IP incluidas en la lista blanca. Las tecnologías de firma criptográfica DKIM y SPF, que se utilizan en los correos SendPulse, aumentan la credibilidad de los correos electrónicos enviados, por lo que es menos probable que sus correos electrónicos terminen en spam o en listas negras.Bots de Facebook Messenger
El chatbot de Facebook está en prueba beta. Puede conectarlo a su página y enviar mensajes a los suscriptores.Envío de SMS
El servicio SendPulse facilita el envío de correos basados en números de teléfono. Primero, debe crear una libreta de direcciones con una lista de números de teléfono. Para hacer esto, seleccione la sección "Libreta de direcciones", cree una nueva libreta de direcciones, cargue números de teléfono. Ahora puede crear una lista de correo SMS para esta base de datos. El precio de los mensajes SMS varía según los operadores de telecomunicaciones del destinatario y es, en promedio, de 1,26 rublos a 2,55 rublos por 1 SMS enviado.programa de afiliación
SendPulse implementa un programa de afiliados, dentro del cual un usuario registrado que usa su enlace y que pagó la tarifa le traerá 4000 rublos. El usuario invitado recibe un descuento de 4000 rublos durante los primeros 5 meses de uso del servicio.Si te gusta el efecto, ¡puedes simplemente copiar el código terminado y usarlo!
¡Da vida a tu sitio web!
Varios efectos de desplazamiento pueden aportar frescura a las páginas de su sitio. Anteriormente, para cualquier efecto, tenía que lidiar con javascript, pero hoy, después del advenimiento de la tecnología CSS3, todo se puede hacer sin pasar por el uso de javascript.
Los ejemplos de hoy están todos implementados y optimizados para los nuevos navegadores modernos y definitivamente funcionarán en ellos (por ejemplo, en los navegadores Mozilla o WebKit). No podemos asegurarle que trabaja en IE, pero en las versiones más recientes, los efectos definitivamente funcionarán como se esperaba. Pero no olvide que se ha preparado una atractiva opción de reversión para cada efecto en caso de que el navegador aún no admita el efecto.
01. Incrementar
Manifestación: Para ver
Este efecto es muy fácil de implementar y se puede realizar de varias formas. Usamos un método en el que se agrega un parámetro de margen a cada imagen y luego, al pasar el mouse, se elimina este parámetro. Digamos que la configuración del margen comienza en 15 píxeles y, al pasar el mouse, se convierte en 2 píxeles, lo que hace que la imagen parezca rebotar. También puede usar este efecto con texto, incluso si los enlaces son verticales en lugar de horizontales.
La transición aquí se puede establecer a su discreción, y el efecto también será atractivo sin ninguna transición. Por ejemplo, hicimos el efecto un poco suave, lo que pensamos que agregaría un poco de sabor al efecto.
Mejorar CSS
Ex1 img (
borde: 5px sólido #ccc;
flotador izquierdo;
margen: 15px;
-webkit-transición: margen de 0.5s de salida;
-moz-transición: margen 0,5 s de salida fácil;
-o-transición: margen de 0.5s de salida;
}
Ex1 img: desplazarse (
margen superior: 2px;
}
02. Apilar y crecer
Manifestación: Para ver
El autor de este efecto aparentemente quería lograr algún tipo de efecto de lámpara de lava, ya que cuando pasa el mouse sobre la lista de enlaces, cada imagen se expande lentamente y luego vuelve a su tamaño original.
Para la implementación aquí se utilizaron imágenes con un tamaño de 400x133 píxeles. Luego se redimensionaron a 300x100 píxeles usando CSS y se expandieron al pasar el mouse. Dado que toda la lista está centrada en el ejemplo, el nuevo tamaño de las imágenes refractaba toda la alineación. Este problema se puede resolver estableciendo márgenes negativos a la mitad del ancho de las imágenes ampliadas.
Código CSS para Stack & Grow
/ * Ejemplo 2 * /
#envase (
ancho: 300px;
margen: 0 automático;
}
# ex2 img (
altura: 100px;
ancho: 300px;
margen: 15px 0;
-webkit-transición: facilidad de todos los 1;
-moz-transición: todos los 1 se facilitan;
-o-transición: facilidad de todos los 1;
}
# ex2 img: hover (
altura: 133px;
ancho: 400px;
margen izquierdo: -50px;
}
03. Fundir texto en
Manifestación: Para ver
Aquí, el autor quería crear algo así como un evento de tipo javascript, cuando pasa el cursor sobre un elemento y el efecto se muestra en otro. Aquí, el texto y la imagen se tomaron y luego se colocaron en un div separado, alineado a la izquierda. A continuación, se agregaron los parámetros color: transparent y line-height: 0px al div. Esto permitió que el texto se colocara en la parte superior del div y lo ocultara por completo.
Para que el texto vuelva a aparecer, simplemente cambiamos el color y la altura de la línea. Cuando pasas el cursor sobre la imagen, el texto vuelve a aparecer. Efecto muy divertido y fácil.
Desvanecer texto en CSS
# ex3 (
ancho: 730px;
altura: 133px;
altura de línea: 0px;
color: transparente;
tamaño de fuente: 50px;
familia de fuentes: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
peso de fuente: 300;
transformación de texto: mayúsculas;
}
# ex3: desplazarse (
altura de línea: 133px;
color: # 575858;
}
# ex3 img (
flotador izquierdo;
margen: 0 15px;
}
04. Foto torcida
Manifestación: Para ver
Este efecto es muy simple, pero funciona muy bien para una galería de miniaturas. Primero, debe crear una cuadrícula de imágenes y luego rotar las imágenes cuando pasa el mouse sobre ellas, lo que crea un efecto atractivo.
Hay muchos valores CSS nuevos para usar aquí, por lo que también vale la pena considerar la opción de reversión para navegadores más antiguos. En nuestra galería, se utilizarán transiciones, transformaciones y sombras en bloque, sin embargo, según sus deseos. La transformación será responsable de la rotación de la imagen, y las transiciones serán responsables del efecto suave y liso.
Aquí es donde puede aplicar pseudo-selectores.
CSS de foto torcida
# ex4 (
ancho: 800px;
margen: 0 automático;
}
# ex4 img (
margen: 20px;
borde: 5px sólido #eee;
-webkit-box-shadow: 4px 4px 4px rgba (0,0,0,0.2);
-moz-caja-sombra: 4px 4px 4px rgba (0,0,0,0.2);
caja de sombra: 4px 4px 4px rgba (0,0,0,0.2);
-webkit-transición: todos los 0,5 segundos de salida;
-moz-transición: todos los 0,5 segundos de facilidad;
-o-transición: todos los 0,5 segundos de facilidad;
}
# ex4 img: hover (
-webkit-transform: rotar (-7 grados);
-moz-transform: rotar (-7 grados);
-o-transform: rotar (-7 grados);
}
05. Fundir y reflejar
Manifestación: Para ver
Este efecto es un poco más complicado de implementar, por lo que tuvimos que modificarlo un poco para obtener un efecto decente. La posición estándar de la imagen es ligeramente transparente. Luego, cuando pasa el mouse sobre la imagen, el nivel de transparencia se reduce y la imagen recupera su apariencia original, además de que aparece un ligero brillo y un reflejo (solo para navegadores de la familia WebKit).
Desafortunadamente, el reflejo no es realmente una transición, por lo que aparece de inmediato, aunque el resto del contenido aparece a cámara lenta.
Si está confundido acerca del CSS para las reflexiones, puede leer más sobre él en (David Walsh).
Fade In y Reflect Effect CSS
# ex5 (
ancho: 700px;
margen: 0 automático;
altura mínima: 300px;
}
# ex5 img (
margen: 25px;
opacidad: 0,8;
borde: 10px sólido #eee;
/ * Transición * /
-webkit-transición: todos los 0.5s facilidad;
-moz-transición: todos los 0,5 segundos de facilidad;
-o-transición: todos los 0,5 segundos de facilidad;
/ * Reflexión * /
-webkit-box-reflect: debajo de 0px -webkit-gradient (lineal, arriba a la izquierda, abajo a la izquierda, desde (transparente), color-stop (.7, transparente), a (rgba (0,0,0,0,1)) );
}
# ex5 img: hover (
opacidad: 1;
/ * Reflexión * /
-webkit-box-reflect: debajo de 0px -webkit-gradient (lineal, arriba a la izquierda, abajo a la izquierda, desde (transparente), color-stop (.7, transparente), a (rgba (0,0,0,0,4)) );
/ * Brillo * /
-webkit-box-shadow: 0px 0px 20px rgba (255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba (255,255,255,0.8);
sombra de cuadro: 0px 0px 20px rgba (255,255,255,0.8);
}
Conclusión
Estos 5 ejemplos deberían ser suficientes para inspirarte a crear algo por tu cuenta. Recuerde que siempre puede experimentar con ejemplos ya hechos y luego contarnos sobre ellos.
Si te has encontrado con otros efectos atractivos en algún lugar de la red, cuéntanoslo a nosotros y al resto de lectores.