Trucos CSS

Trucos CSS: la guía definitiva para trucos CSS avanzados

Si alguna vez ha considerado aprender algunos trucos avanzados de CSS, esta guía es un excelente lugar para comenzar. Cubre los siguientes temas de CSS;

  • animar CSS
  • Refactorización de código CSS
  • Animaciones CSS3 nativas
  • Usando degradados de color en CSS3
  • Una descripción general del posicionamiento CSS
  • Una descripción general de los selectores de CSS
  • Comprender la especificidad en CSS
  • Uso de WOW.js y Animate.css para animaciones activadas por desplazamiento
  • Introducción a CSS flexbox y selectores avanzados de CSS

Qué es Animate.CSS [Tutorial]

Esta sección explica cómo comenzar con Animate.css ayuda mejor a los desarrolladores web a crear diseños animados creativos y funcionales a través de una programación simple y eficiente. Para actualizar el contenido web y mejorar los diseños de las aplicaciones, Introducción a Animate.css [Tutorial] es una excelente manera de crear contenido único. Los desarrolladores obtienen una ventaja sobre otros sitios de la competencia con funciones creativas y diferentes, contenido más rápido y de mejor calidad, y una mejor compatibilidad entre navegadores al compartir contenido de sitios web en el entorno digital. La extensión de la biblioteca Animate.CSS proporciona las herramientas, la simplicidad y la flexibilidad para todos los sitios web y servicios de desarrollo de aplicaciones móviles.

La animación CSS es una extensión de las hojas de estilo en cascada (CSS) con diferentes funciones de animación. El módulo incorpora una biblioteca de diseños para sitios web y ofrece a los usuarios conveniencia, creatividad y aplicaciones web profesionales. Los desarrolladores web Introducción a Animate.css [Tutorial] aplican diseños de animación, editan secuencias CSS y mejoran el diseño de sitios web a través de la extensión Hoja de estilo en cascada. La extensión simplifica la interacción del desarrollador al implementar diseños de animación con configuraciones sencillas para elementos HTML específicos que requieren menos procesamiento y uso de memoria de Flash o JavaScript.

Ventajas

Sin lugar a dudas, Animate.CSS gana popularidad entre la comunidad de desarrolladores por su simplicidad y compatibilidad. Principalmente, Animate.CSS tiene scripts de hojas de estilo simples y listos para usar que se copian y pegan en los documentos del sitio web del desarrollador para una mayor comodidad del desarrollador. Además, el módulo está diseñado para evitar que los usuarios se conformen con GIFS genéricos o imágenes Flash que limitan la creatividad del desarrollador y requieren pasos adicionales que ralentizan los tiempos de finalización del desarrollo del proyecto. Además, hay muchos scripts de estilo de diseño de animación abreviados para las propiedades de animación cuando se comienza con Animate.css. Es importante destacar que el programa Animate.CSS de hoja de estilos en cascada (CSS) incluye extensiones avanzadas de fotogramas clave que equipan mejor a los desarrolladores con las herramientas de desarrollo de personalización de diseño necesarias para diseños animados creativos y funcionales. Junto con un módulo fácil de usar, Animate también resulta compatible para actualizaciones adicionales o mejoras con Javascript.

¿Cómo funcionan las animaciones en Animate.CSS?

CSS animate es un módulo de biblioteca único creado a partir de un sencillo y diseño efectivo. Para explicarlo, Animate.CSS incluye dos componentes principales para diseñar sitios web. El primer componente diseña y almacena información para animaciones CSS. Sin embargo, el segundo componente utiliza "fotogramas clave" para señalar a los desarrolladores web el comienzo y el final de las secuencias de los diseños de animación. Además, este componente utiliza puntos de transición avanzados para permitir una mejor configuración de la animación.

Introducción a Animate.css [Tutorial]

Crear una animación

Las animaciones CSS incluyen componentes primarios y secundarios. Por lo general, los desarrolladores web comienzan con Animate.css utilizando elementos de script específicos de estilo de Animate.CSS e incluyen estilos de diseño adicionales para las propiedades de animación. Más específicamente, las propiedades funcionan entre diferentes funciones de orzuelo para equipar los sitios web con animaciones funcionales y simples. Las propiedades de la animación incluyen amplios criterios de elementos de estilo como el nombre de la animación, la duración, el tiempo y los retrasos. Otras formas incluyen recuento de animación, dirección, relleno y reproducción. Afortunadamente, el módulo de biblioteca permite diseñadores web receptivos aplicar estas propiedades a animaciones de sitios web con secuencias de texto simples, en lugar de formatear y probar numerosos códigos con incertidumbre funcional.

fotogramas clave

A través de la extensión de CSS Animate, los usuarios trabajan con "fotogramas clave" para crear animaciones con elementos componentes. Para beneficio de los usuarios, los "fotogramas clave" se configuran a través de hojas de estilo en cascada para ofrecer a los usuarios capacidades de edición gradual para conjuntos de estilos CSS, al tiempo que permiten a los desarrolladores web centrarse en funciones de animación importantes. Para elaborar, las "piedras angulares" ayudan a los usuarios a realizar configuraciones dentro del tiempo, la duración y los elementos detallados en profundidad dentro de una secuencia de diseño diferente.

Fotogramas clave en regla

Además, la visualización de las animaciones requiere que los usuarios utilicen "fotogramas clave en regla" para conectarse mejor con los elementos componentes. Para configuraciones de propiedades más específicas, la extensión corrige los valores de animación entre los "fotogramas clave" de diseño. Con fines de identificación, los desarrolladores web valoran los "fotogramas clave en regla" para editar varios nombres dentro de secuencias y ubicar elementos que no tienen valor para el conjunto de estilos CSS. Además, los "fotogramas clave en regla" amplían las capacidades de edición para los desarrolladores web con indicadores de código útiles para las animaciones para representar mejor los elementos durante los estilos de diseño.

Annimate.CSS Transform

Igualmente importante, las características de Animate.CSS de hojas de estilo en cascada (CSS) ofrecen propiedades de “transformación” para una mejor edición de elementos. Los elementos no compatibles con los diseños CSS se modifican con la herramienta de transformación. Beneficiosamente, los desarrolladores que utilizan herramientas de transformación como escalar, rotar, sesgar y traducir configurarán elementos para diseñar mejor en aplicaciones web. Las propiedades de transformación, ya sea 2d o 3d, brindan a los usuarios creatividad y funcionalidad de diseño adicionales al crear sitios web.

Escalable

Con la escala, los usuarios de Animate.CSS ajustan las dimensiones de los diseños para adaptarse mejor al contenido web. La función de transformación CSS específica corrige el ancho y la altura de los elementos para escalar mejor el contenido en las aplicaciones web. De forma predeterminada, los valores de escala comienzan con un atributo de uno, que se ajusta a un valor mayor o menor que una forma más o menos escalabilidad para los elementos. En pocas palabras, los atributos en CSS permiten correcciones proporcionales al manejar configuraciones de escalado al diseño de elementos y contenido.

oblicuidad

Para continuar, las herramientas de transformación en Animate.CSS consisten en una función de sesgo para desarrolladores web. El diseño de las propiedades del elemento se alinea con un eje horizontal y vertical en las aplicaciones web que pueden estar sesgadas. Normalmente, las funciones de sesgo incluyen valores "x" e "y" para ayudar a los desarrolladores a distorsionar elementos en el eje.

Traducir

Otra característica de transformación es la traducción CSS. De manera similar, la función de traducción también comparte los valores "x" e "y" para ayudar a los desarrolladores a mejorar la funcionalidad de diseño. A diferencia de la función de inclinación de CSS, la herramienta de traducción permite a los usuarios colocar un elemento en particular dentro del eje horizontal y vertical.

Girar

Además, los desarrolladores que comienzan con Animate.css usan la herramienta de transformación que también incluye una función de rotación de elementos. Con facilidad, los usuarios pueden ajustar el ángulo de un elemento en cualquier dirección. Los valores de rotación son positivos cuando se gira el contenido en sentido horario y descienden a valores negativos cuando se ajusta un elemento en sentido antihorario.

Matrix

Finalmente, las características de transformación CSS incluyen funciones matriciales para elementos. Especialmente útil para los desarrolladores, la herramienta de matriz une configuraciones 2d en un solo elemento para aplicaciones de edición universales.

Introducción a Animate.css [Tutorial]
Animación CSS de solo agregar agua

El sistema Animate.CSS se refiere a "Just-Add-Water". El módulo se clasifica como una fuente de animaciones "entre navegadores", lo que indica su facilidad de uso y su diseño simple para desarrolladores web nuevos o establecidos.

Instalación

Para comenzar, los administradores requieren la instalación del programa de animación de hojas de estilo en cascada Just Add Water. Primero, la instalación se realiza a través de NPM. Para definir, el Node Package Manager colabora con JavaScript script, que comparte el diseño de Animate.CSS. Por defecto, el lenguaje de programación opera con Node.JS como premisa estable para el desarrollo web. A continuación, los usuarios utilizan este código “$ Node Package Manager install animate.css –save” para instalar el programa.

Alternativamente, la secuencia sigue a "$ yarn add animate.css". Para explicar con más detalle, una instalación de hilo también ayuda a los administradores con las instalaciones del proyecto. Normalmente, "Yarn" asocia instalaciones con dependencias que utilizan códigos u otra decencia para la instalación. A diferencia del método de instalación de Node Packaging Manager (npm), la alternativa “yarn” no aplica un “–save” o “–sav-dev” al agregar nuevos programas. En profundidad, una dependencia no puede funcionar a menos que cuente con el apoyo de otro programa más destacado. La combinación del módulo y las extensiones de instalación colaboran con nuevos e innovadores modelos de biblioteca.

Uso de Animate.CSS [Tutorial]

En el sitio web de Animate.CSS, los códigos de fuente abierta están disponibles para desarrolladores web. El usuario puede seleccionar el Descarga Animate.css para acceder a diferentes textos de animación de hojas de estilo en cascada. La lista incluye una amplia variedad de estilos de diseño y puede aplicarse directamente al sitio web del usuario. Además, el descargar El código es otro método para comenzar con Animate.Css.

Introducción a Animate.CSS en sitios web

Aplicar las hojas de estilo de hojas de estilo en cascada (CSS) en el sitio web del desarrollador es fácil, rápido y eficaz. Sin embargo, la implementación de texto requiere que el usuario preste atención a los detalles. Primero, las hojas de estilo en cascada (CSS) animate.CSS deben colocarse correctamente dentro del documento del desarrollador " . " A continuación, el administrador aplica la clase de hoja de estilo "animada" a un elemento dentro del documento de la aplicación web. Además, el script animado sigue los nombres CSS para realizar funciones de animación específicas para el elemento. Alternativamente, los usuarios pueden cambiar a otras versiones, como CDNJS, como otro host para configuraciones de elementos Annimate.CSS. El formato se muestra a continuación:

Introducción a Animate.css [Tutorial]

Animaciones en Animate.CSS

Los diseñadores web que comienzan con Animate.css valoran la animación simple y de calidad que diferencia el contenido de las aplicaciones web. Las hojas de estilo de animación proporcionadas en Animate.CSS incluyen una gran cantidad de estilos de animación de hojas de estilo en cascada (CSS) que personalizan los elementos del documento. Además, para crear un diseño de animación para un elemento, el desarrollador debe ingresar la etiqueta "animada". La clase se inserta dentro de un elemento de documento y requiere instrucción adicional para definir mejor los atributos de contenido. Por lo general, los desarrolladores confían en un elemento activo con una función configurada en "infinito" para permitir múltiples ciclos de diseños de animación dentro de un sitio web. También muy apreciado, las limitaciones de duración de las animaciones, junto con los retrasos y la interacción de la animación del usuario están disponibles en la lista de hojas de estilo de Animate.CSS.

A continuación se muestran clases de animación para desarrolladores web que comienzan con Animate.css [Tutorial] para implementar en documentos de aplicaciones web.

Empezar a cronometrar animaciones

En su mayor parte, los desarrolladores web que comienzan con Annimate.CSS buscan diseños de animación para mejorar el contenido de los sitios web. Razonablemente, la animación debe tener la capacidad de funcionar como un método para atraer a los visitantes del sitio a información particular en los sitios. Por lo tanto, los desarrolladores deben comprender cómo configurar elementos con respecto a los retrasos, la velocidad y el tiempo de la animación.

Retrasar

Actualmente, Animate.CSS ayuda a los desarrolladores con funciones de retraso con una hoja de estilo en particular. Por ejemplo, una hoja de estilo con una función de retardo podría aparecer así: " Ejemplo . " En este escenario, se produce un retraso de dos segundos para un elemento que tiene una clase animada de rebote adjunta. Las clases de retardo se identifican como "retardo" y pueden alterar las funciones de retardo de uno a cinco segundos. Se aceptan más períodos de retraso si los usuarios agregan textos de hojas de estilo en cascada (CSS), especialmente el código.

velocidad

Además, los diseños de elementos en Annimate.CSS tienen valores de tiempo de velocidad. El desarrollador puede corregir la velocidad de una animación usando una hoja de estilo específica para la clase. Por ejemplo, una secuencia de tiempo de animación puede verse así: " Ejemplo . " Además, el desarrollador permite que el elemento animado rebote y crea una función de velocidad de "más rápido". Además, los nombres de las clases pueden referirse como "lento", "más lento", "rápido" y "más rápido". Junto con los nombres de las clases, los tiempos de velocidad como "2 segundos", "3 segundos", "800 milisegundos" y "500 milisegundos" abordan la velocidad de la función de los elementos. De forma predeterminada, las tasas de elementos se establecen en un valor estándar de un segundo. Los usuarios, con extensiones adicionales, pueden alterar los tiempos mediante la edición manual de texto dentro de las hojas de estilo Annimate.CSS de Hojas de estilo en cascada (CSS).

Iniciar compilaciones personalizadas

Como se mencionó anteriormente, los desarrolladores pueden ajustar manualmente las hojas de estilo de Animate.CSS para desarrollar nuevas animaciones independientes de los valores predeterminados estándar. Otra fuente, como "gulp.js, ”Es compatible con Animate.CSS y ofrece configuraciones de animación personalizadas fáciles de configurar. Más específicamente, la plataforma de varios navegadores es un programa de automatización para el desarrollo de tareas. Para los desarrolladores y programadores web, la extensión The Gulp analiza y organiza una variedad de archivos controlados por tuberías para admitir complementos en los servidores de los usuarios. En este caso, Gulp interactúa con dependencias para la creación de funciones y construcciones de animación personalizadas.

Como ejemplo, la fase inicial llama a los desarrolladores para que ingresen el script de la hoja de estilo "$ cd path / to / animate.css /". Una vez más, el administrador trata el documento con una "instalación de $ npm". Después, los desarrolladores web se unirán a las compilaciones en el programa de empaquetado "NPX Gulp". Como ventaja, el empaque dentro de Gulp es ajustable para incluir estilos de diseño animados que se adapten al contenido web. Los usuarios editarían este paquete con un script "animate-config.json" para seleccionar y elegir las compilaciones adecuadas. Al seleccionar las opciones de compilación con valores de "verdadero" y "falso", se determina qué compilaciones se agregan o quitan de la lista NPX Gulp.

Animate.CSS con Javascript

Con Javascript, el módulo de biblioteca Animate.CSS permite a los usuarios funciones adicionales para diseñar aplicaciones web. Las características incluyen funciones de animación más específicas con instrucciones direccionales específicas, señales de tiempo de animación, adición y eliminación de teclas de animación y efectos posteriores a la animación. También, Javascript ofrece una mejor funcionalidad entre navegadores para la extensión Animate.CSS y permite a los usuarios más flexibilidad sobre qué desaceleraciones funcionan mejor para el software del usuario.

Resumen

En resumen, Animate.css es un módulo de biblioteca entre navegadores con una programación simple y eficaz de hojas de estilo en cascada (CSS). El diseño fomenta la creatividad del desarrollador con compatibilidad para dependencias alternativas e incluye numerosas características de diseño animado. Junto con las diferentes versiones de las hojas de estilo de diseño, el comportamiento de la animación también cambia a través de la interacción del texto del programador. Los desarrolladores de aplicaciones web, con el apoyo de Annimate.CSS, crean más sitios web receptivos con animaciones de calidad que son fáciles de mantener y proporcionan una interacción única con el sitio web.

Refactorización de código CSS

Refactorización de código CSS

Escribir un buen código es algo más que obtener los resultados que desea en una página web. Un buen código debe ser lo más eficiente y conciso posible. Si bien a menudo existen numerosas formas de lograr los mismos resultados, el método más conciso y simple es, con pocas excepciones, la opción ideal.

Hay dos beneficios principales de escribir código limpio y bueno. En primer lugar, puede mejorar la velocidad y el rendimiento del sitio. Cuanto más pequeño sea su archivo (y menos solicitudes externas esté enviando), menos tiempo tardará su sitio web en cargarse en el navegador. En segundo lugar, escribir un buen código tiene la inestimable ventaja de facilitar su mantenimiento. Ya sea que esté codificando un proyecto por su cuenta o con otros desarrolladores involucrados, cuanto más delgado sea su código (idealmente con buena documentación), menos será un dolor de cabeza para cualquiera que tenga que volver a visitar el código base.

Las mejores prácticas para escribir un buen código a menudo se aplican a todos los lenguajes de programación, aunque esta publicación se adaptará específicamente para mejorar el CSS en su sitio web.

Eliminar solicitudes HTTP innecesarias

Muchas veces, en el proceso de desarrollo de un sitio web, puede terminar con múltiples archivos externos y dependencias vinculadas desde su documento HTML o archivos CSS. Puede probar varias fuentes diferentes o marcos CSS, alojados en una CDN externa. Cada una de estas dependencias representa una solicitud HTTP que realiza su sitio cada vez que se carga en el navegador. Esto ejerce una gran presión sobre el tiempo de carga del sitio, y todas estas solicitudes se acumulan con bastante rapidez.

Si agregó un montón de archivos de fuentes externos a su proyecto, pero actualmente solo hace referencia a 1 o 2 en su archivo CSS, revise y elimine cualquiera de estas dependencias vinculadas del <head> de su documento HTML.

¿Está utilizando solo un marco CSS para unas pocas líneas de código? Considere copiar y pegar estas líneas en su .css hoja de estilo y elimine el enlace al código del marco CSS original.

Simplifique y consolide las reglas CSS

Mientras escribe CSS, puede terminar escribiendo repetidamente las mismas reglas para varios elementos y selectores diferentes. En la programación de computadoras, el concepto frecuentemente repetido de "DRY" (Don't Repeat Yourself) también se aplica a CSS. Siempre que se encuentre escribiendo las mismas reglas CSS para diferentes selectores, encuentre una manera de consolidarlas.

Por ejemplo, en lugar de escribir:

p {tamaño de fuente: 14px; margen: 0 automático; pantalla: bloque en línea; } H1 {margen: 0 automático; } Img {pantalla: bloque en línea; margen: 0 automático; }

 

Considere escribir:

p, h1, img {margen: 0 automático; } P {tamaño de fuente: 14px; } P, img {display: inline-block; }

 

O mejor:

/ * aplicado a los elementos p, h1 e img * / .def-margin {margin: 0 auto; } / * Aplicado al elemento p * / .def-fs {font-size: 14px; } / * Aplicado a los elementos p e img * / .d-ib {display: inline-block; }

 

Si bien esto puede no parecer una gran diferencia (al menos en términos de líneas de código), el recuento total de caracteres se ha reducido significativamente, lo que tendrá un impacto en los tiempos de carga de la página. Además, consolida elementos y selectores que utilizan los mismos estilos, lo que hace que sea más claro ver qué estilos comunes se están aplicando a diferentes elementos.

Refactorización de código CSS

 Reevalúa sus valores de identificación y clase

A menudo es tentador asignar un aspecto de la presentación de estilo como su clase o valores de identificación, pero esto está lejos de ser ideal. Por ejemplo, para un mensaje de error, a menudo parece tener sentido usar red como la clase o el valor de ID, así:

Este es un mensaje de error

 

Pero, ¿qué pasa si cambia el color u otros estilos de esta clase? Esta clase ya no tendrá una relación directa con su contenido o presentación y lo más probable es que cause confusión. Una mejor opción en esta situación sería utilizar un valor de clase que explique su función, en lugar de su presentación estilística:

Este es un mensaje de error

 

Siempre es una buena idea usar valores de clase e ID que describan el contenido o la función de ese elemento, en lugar de descripciones estilísticas. El estilo puede cambiar muchas veces durante el proceso de creación de un sitio, pero el uso de descriptores para funciones hará que el código sea mucho más legible y fácil de mantener.

Reevalúa sus opciones de selector

A menudo hay muchas formas diferentes de seleccionar un elemento, pero a menudo hay formas más eficientes que otras. Si bien es posible anidar selectores unos dentro de otros para llegar a un elemento específico, si tiene que pasar demasiados niveles, lo mejor sería reevaluar si una clase o un valor de ID funcionarían mejor.

Verificar redundancias

En el proceso de diseñar su página web, puede probar una variedad de colores diferentes, por ejemplo, muchos tonos del mismo color. Es fácil dejar estos diferentes conjuntos de reglas en su código, sin decidir sobre un solo color definitivo. Una buena herramienta para comprobar este tipo de redundancias es cssstats.com.

Esto no solo simplificará su código, sino que también hará que su diseño general sea mucho más consistente, en lugar de tener 40 tonos diferentes de un color en el sitio.

Minifica tus archivos CSS

Una vez que sus archivos CSS estén completamente listos para la producción y la implementación en un servidor en vivo, es una buena idea minimizarlos para obtener el mejor rendimiento. Un minificador eliminará todos los espacios en blanco de su código fuente, reduciendo significativamente el tamaño del archivo. Dado que el código fuente no depende del espacio en blanco para su funcionalidad (solo su legibilidad), esto no tendrá ningún efecto negativo en el funcionamiento de su sitio.

Hay muchas herramientas gratuitas para minificar CSS (y archivos JS). Una opcion es cssminifier.com.

Consolide sus archivos CSS

Como se mencionó brevemente en la última publicación, es una buena idea consolidar sus recursos tanto como sea posible. Si bien existe un buen argumento para mantener CSS modular durante la etapa de desarrollo (como mantener las reglas de diseño en un archivo CSS, las opciones de color en otro, etc.), en última instancia, querrá consolidar todas estas reglas CSS en un solo archivo para mejor actuacion.

Animaciones CSS3 nativas

Animaciones CSS3 nativas

Aunque las bibliotecas populares como Animate.css Facilite la adición de animaciones CSS a su proyecto, se componen en gran parte de movimientos comunes como "rebotar", "sacudir" y otros movimientos de valores que pueden parecer bastante obsoletos cuando se usan en exceso. Al aprovechar las propiedades de animación integradas en CSS, puede crear animaciones mucho más complejas y personalizadas mucho más allá del simple movimiento. Las animaciones CSS pueden afectar el color, el tamaño, la posición del elemento o cualquier otra propiedad disponible en la especificación CSS3. Esta publicación dará una introducción para comenzar con las propiedades nativas de CSS3 y algunos ejemplos de posibles usos para ellas.

Agregar animación a un elemento

Para dar una animación a un elemento HTML, los dos primeros pasos son declarar un nombre para la animación y una duración. Esto se hace con el animation-name y animation-duration propiedades:

#miAnimación {
    animación-nombre: cambio de color;
    duración de la animación: 5s;
}

 

animation-duration puede aceptar cualquier valor en segundos o milisegundos (declarado usando s or ms después de un número entero).

Creando la animación

Una vez que haya declarado un nombre y una duración, es hora de crear la animación. Esto se hace usando el @keyframes regla, seguida del nombre de la animación:

@keyframes cambio de color {
    
}

 

Dentro del @keyframes La regla será una regla para cada "fotograma" de la animación, designado por un valor porcentual de 0% a 100%. 0% es el comienzo de la animación, 100% siendo el final, con cualquier valor porcentual posible en el medio. Esto se puede considerar como un video o un flipbook, donde cada página del libro es un marco único que, cuando se combina, crea movimiento:

@keyframes cambio de color {
    0% {
        color de fondo: negra;
    }  
    50% {
        color de fondo: gris;
    }
    100% {
        color de fondo: blanco;
    }
}

 

En el ejemplo anterior, el color-change La animación cambiará el background-color de los #myAnimation elemento de black at 0%, gray at 50% luego finalmente a white at 100%.

Sin embargo, el poder de usar animaciones personalizadas es que puede cambiar absolutamente cualquier propiedad de CSS, con cualquier nivel de cambio incremental en los marcos. Un buen ejemplo de esto es para :hover pseudoclases. CSS :hover Los estados se usan a menudo para aplicar un color o un cambio estilístico menor cuando se pasa el mouse sobre un elemento, pero las animaciones permiten que estos cambios sean mucho más detallados.

.:flotar {
    animación-nombre: botón-anim;
    duración de la animación: 5s;
    modo de relleno de animación: hacia adelante;
}
@keyframes botón-anim {
    0% {
        color de fondo: azul;
    }
    50% {
        transformar: escala(2.1);
        color de fondo: dodgerblue;
    }
    75% {
        transformar: escala(2.5);
        color de fondo: blanco;
    }
    100% {
        transformar: escala(1.5);
        color de fondo: azul;
    }
}

 

En el ejemplo anterior, button-anim efectos de animación cualquiera button elemento cuando se coloca sobre él. Sus background-color cambia en cuatro pasos iguales durante una duración de 5 segundos, y el tamaño del elemento en sí cambia también en pasos discretos y únicos (original, a 2.1x, a 2.5x, y luego a 1.5x el original).

Una propiedad adicional incluida en el ejemplo anterior es la animation-fill-mode propiedad. Esta propiedad se puede usar para indicar cómo se deben aplicar los estilos antes (y después) de que se complete la duración de la animación. Utilizando animation-fill-mode: forwards indica que los estilos del último fotograma de la animación (los de la 100% regla) permanecerá aplicada. Sin la adición del animation-fill-mode propiedad, los estilos de button volvería a su estado original una vez finalizada la animación.

Conclusión

Las animaciones CSS pueden ser muy complejas y detalladas, con hasta 100 fotogramas distintos que se pueden especificar. Teniendo en cuenta que esta función está disponible de forma nativa en CSS vanilla, son una excelente manera de agregar interés visual y complejidad a un proyecto web, bien compatibles con todos los navegadores modernos.

Usando degradados de color en CSS3

Usando degradados de color en CSS3

Desde la introducción de CSS3, ha sido posible utilizar degradados de color como fondo, con 2 o más colores que se desvanecen gradualmente entre sí. Anteriormente, la creación de degradados debía realizarse con Photoshop u otro software de edición de imágenes. Si se usa de manera efectiva, esta es una excelente manera de agregar interés e incluso textura a los diseños de páginas web, más allá de los colores de fondo estáticos. Si bien las versiones heredadas de Internet Explorer no admiten esta función, puede agregarlas de manera segura a un proyecto, ya que todos los navegadores modernos la admiten. Esta publicación analizará el uso de fondos degradados y las opciones de personalización disponibles.

Degradados lineales básicos

Para establecer el fondo de un elemento (ya sea el body, la div, u otro elemento), el background se utiliza la propiedad, normalmente con un valor de color:

cuerpo {fondo: #fffbed; }

 

Para usar un degradado lineal en lugar de un color sólido, incluya al menos dos colores (usando valores de colores hexadecimales, rgb, hsl o con nombre), separados por comas, dentro del linear-gradient() valor:

cuerpo {fondo: degradado lineal (#fffbed, # 45add3); }

Degradados lineales básicos

Prefijos de proveedores

Dado que diferentes navegadores manejan linear-gradient valor de manera diferente, se recomienda encarecidamente utilizar prefijos de proveedor junto con él. Esto garantizará que Safari, Firefox, Chrome y Opera comprendan el valor. Para usar prefijos de proveedores, simplemente agregue 2 background reglas con el linear-gradient valor prefijado con -webkit- y -moz-. También deben aparecer antes de la regla normal sin ningún prefijo de proveedor:

cuerpo {fondo: -webkit-linear-gradient (#fffbed, # 45add3); fondo: -moz-linear-gradient (#fffbed, # 45add3); fondo: degradado lineal (#fffbed, # 45add3); }

 

Es un poco más de escritura, pero asegura que sus degradados sean compatibles con todos los navegadores principales.

Dirección de control

De forma predeterminada, los degradados pasarán de arriba a abajo, con el primer color incluido en la linear-gradient siendo el valor el color superior.

Sin embargo, puede cambiar la dirección del degradado agregando algunas palabras clave de dirección antes de los colores (es decir, to top, to bottom, to right, to left, to right top, Etc.)

body {background: linear-gradient (abajo a la derecha, #fffbed, # 45add3); }

 

Al establecer la dirección en una esquina, se puede indicar primero el eje xo el eje y (es decir, to right bottom y to bottom right son lo mismo).

Múltiples colores

Puede utilizar más de dos colores en un degradado, simplemente separándolos con comas:

cuerpo {fondo: degradado lineal (#eaecee, # abebc6, # 45add3); }

or

body {background: linear-gradient (#eaecee, # ebdef0, # f4f6f7, # abebc6, # 4eb39d, # 45add3); }

 

Paradas de color

A veces, querrá controlar dónde comienza un determinado color, lo que permite que ciertos colores ocupen más espacio o tengan un espacio más amplio para la transición. Para agregar estas "paradas de color", simplemente agregue un valor porcentual después de un color determinado, para designar dónde debe comenzar ese color:

body {background: linear-gradient (#eaecee, # abebc6 30%, # 45add3% 80); }

 

Esto es ideal para tener un control más preciso sobre sus transiciones y puede usarse para efectos interesantes.

Gradientes radiales

Una variación disponible de los gradientes lineales son los gradientes radiales. Los degradados radiales pasarán del centro del elemento hacia el exterior como un círculo. Usan casi la misma sintaxis exacta que los gradientes lineales, solo con la radial-gradient valor en su lugar:

body {background: radial-gradient (#eaecee, # 45add3); }

Degradados de color CSS3

 

Una descripción general del posicionamiento CSS

Una de las propiedades más importantes de CSS para comprender es la position propiedad. Si bien se puede hacer mucho para diseñar elementos en una página sin cambiar explícitamente los valores de la position propiedad, la mayoría problemas de diseño avanzados Requerirá conocer los diferentes valores disponibles para esta propiedad. Esta publicación de blog analizará los cuatro valores principales para positiony las instancias en las que podría utilizar cada uno de ellos.

Posición estática

static es el valor predeterminado de position, lo que significa que para cualquier elemento no establezca explícitamente ningún valor para position, será static por defecto. Elementos con position of static no aceptará ninguna propiedad de compensación de cuadro, como margin or padding .

En el siguiente ejemplo, cada div se apilarán uno encima del otro, ya que cada uno es un elemento a nivel de bloque:

Unidad 1 Unidad 1 Unidad 2 Unidad 2

 

cuerpo {familia de fuentes: Helvetica; color blanco; } .contenedor {color de fondo: #fffbed; } .unit {color de fondo: # 337e7e; altura: 80px; ancho: 80px; alineación de texto: centro; altura de línea: 80px; borde: # 696969 2px sólido; }

 

Posicionamiento CSS

Posición relativa

Elementos con position of relative son muy similares al valor de static, aunque con una diferencia importante: pueden aceptar propiedades de desplazamiento de caja de top, right, bottomy left.

En el caso de un elemento con un position of relative, estas propiedades de compensación establecen la distancia desde la posición normal de los elementos. En otras palabras, si tuviera que establecer un elemento con un position of relative tener un top valor de 10px, el elemento aparecería 10px más bajo de lo que normalmente aparecería si su position tuvieron static.

Elementos con position of relative permanecer dentro del "flujo" normal de elementos, las propiedades de desplazamiento de la caja simplemente desplazan los elementos de su flujo normal:

Unidad 1 Unidad 1 Unidad 2 Unidad 2

 

cuerpo {familia de fuentes: Helvetica; color blanco; } .contenedor {color de fondo: #fffbed; } .unit {color de fondo: # 337e7e; altura: 80px; ancho: 80px; alineación de texto: centro; altura de línea: 80px; borde: # 696969 2px sólido; posición: relativa; } .unit-1 {superior: 10px; } .unit-2 {derecha: 30px; } .unit-3 {izquierda: 20px; } .unit-4 {bottom: -30px; derecha: 40px; }

 

Una descripción general del posicionamiento CSS

Posición absoluta

Elementos con position of absolute también aceptan propiedades de desplazamiento de caja, aunque se eliminan del flujo normal de elementos. Usar propiedades de compensación de caja en un absolute El elemento posicionado colocará ese elemento en relación directa con su elemento padre.

Tomando exactamente el mismo CSS que el position: relative; ejemplo anterior, pero simplemente cambiando el position a absolute resultará en un posicionamiento completamente diferente de los elementos individuales:

Unidad 1 Unidad 1 Unidad 2 Unidad 2

 

cuerpo {familia de fuentes: Helvetica; color blanco; } .contenedor {color de fondo: #fffbed; } .unit {color de fondo: # 337e7e; altura: 80px; ancho: 80px; alineación de texto: centro; altura de línea: 80px; borde: # 696969 2px sólido; posición: absoluta; } .unit-1 {superior: 10px; } .unit-2 {derecha: 30px; } .unit-3 {izquierda: 20px; } .unit-4 {bottom: -30px; derecha: 40px; }

 

Posicionamiento CSS

Posición fija

Un elemento con un position of fixed es muy similar a position: relative;, aunque la posición es relativa a la ventana gráfica del navegador, en lugar de a cualquier elemento principal. Además, el elemento no se desplazará con la página, permaneciendo “fijo” y siempre visible, independientemente de dónde se encuentre el usuario en la página. Esto se usa a menudo para "arreglar" encabezados y pies de página en la página, con el fin de permanecer siempre visible.

Una descripción general de los selectores de CSS

Una descripción general de los selectores de CSS

En el desarrollo web, a menudo existen numerosas formas de lograr el mismo resultado. Una clave para escribir un buen código (independientemente del idioma) es utilizar el método más eficiente posible, escribiendo la menor cantidad de código que sea necesario y manteniendo la base de código al mínimo absoluto. Esto dará como resultado tiempos de carga de página más rápidos, así como claridad en el código fuente para usted y otros desarrolladores. Al escribir CSS, es importante saber cómo seleccionar los elementos a los que desea apuntar y cuál es el mejor método para hacerlo. Esta sección echa un vistazo a algunos de los selectores de CSS más comunes y las mejores instancias para usar cada uno de ellos.

Selectores de tipo

Para cada elemento HTML, hay un selector correspondiente para ese tipo de elemento. Ya sea un div, p, img o cualquier otro elemento HTML, el selector de CSS correspondiente es exactamente el mismo, menos los corchetes angulares utilizados en la etiqueta:

p {color: negro; } div {display: inline: block; } img {ancho: 200px; }

 

Los selectores de tipo son ideales cuando desea segmentar cada instancia de un tipo de elemento dado y aplicar los mismos estilos para todos ellos.

Selectores de clases

Los selectores de clases utilizan un nombre de clase asociado con elementos específicos. Este selector es ideal cuando desea aplicar ciertos estilos a una variedad de elementos diferentes, independientemente del tipo de elemento. Por ejemplo, puede tener una clase de .responsive aplicado a un p, div y img elemento:

Este párrafo responde Un div receptivo

 

El siguiente bloque de código CSS apuntará a todos estos elementos con la misma clase:

.responsive {ancho: 80%; margen: 0 automático; }

 

Los selectores de clases siempre se designan en una hoja de estilo usando un punto (.) antes del nombre de la clase.

Selectores de ID

Los selectores de ID son similares a los selectores de clases, aunque solo se pueden aplicar a un solo elemento en un documento HTML determinado. Esto es útil cuando , de manera quiere apuntar a un solo elemento:

Este es un párrafo con estilos únicos
#myParagraph {color: green: width: 200px; flotador izquierdo; pantalla: bloque en línea; }

 

Los selectores de ID siempre se designan en una hoja de estilo usando el signo de almohadilla o almohadilla (#) antes del nombre de ID.

Selector universal

El selector universal apuntará a cada elemento de un documento HTML. Esto se usa a menudo para restablecimientos de CSS, como eliminar el margen predeterminado, el relleno y otros estilos de todos los elementos:

* {margen: 0; acolchado: 0; }

 

El selector universal se designa con el asterisco (*).

:hover

Otro selector común (y una de las muchas "pseudoclases" de CSS) es :hover. Agregar esta pseudoclase a cualquier selector apuntará al estado de desplazamiento del elemento. Esto significa que estos estilos , de manera se aplicará cuando un usuario pase el mouse sobre ese elemento:

a: hover {decoración de texto: subrayado; color morado; }

 

:hover se utiliza a menudo para enlaces o cualquier elemento que desee resaltar cuando el usuario se desplaza sobre él. Esta pseudoclase funciona bien para usuarios de computadoras portátiles y de escritorio, aunque no tiene un uso real para dispositivos móviles, debido a la falta de un cursor del mouse.

Comprender la especificidad en CSS

Comprender la especificidad en CSS

En el proceso de escribir código CSS, invariablemente se encontrará con situaciones en las que el código que acaba de escribir parece no tener ningún efecto en la página. Esto puede resultar frustrante, confuso y difícil de solucionar sin la ayuda de algo como Herramientas de desarrollo de Chrome. Sin embargo, tener una mejor comprensión de cómo funciona la especificidad y la cascada en CSS puede ser de gran ayuda para mitigar estos problemas por completo. Esta sección tendrá como objetivo señalar algunos de los principales problemas que suelen surgir al intentar determinar qué fragmento de código bloquea lo que está intentando hacer.

Es bien sabido que CSS (que significa hojas de estilo en cascada) funciona de arriba hacia abajo. Esto significa que, en términos generales, el código que se encuentra más abajo en el documento tiene prioridad sobre otro código superior. Un ejemplo simple de esto es tener dos declaraciones dirigidas al mismo elemento:

 

p {color: azul; } p {color: verde; }

 

El color de los elementos de párrafo en este ejemplo siempre será verde, ya que aparece después de la declaración asignando el color azul a los párrafos.

El problema es que los selectores más allá de los selectores de elementos tienen distintos niveles de especificidad, y la combinación de selectores aumentará su especificidad, anulando otras reglas.

Elementos y pseudoelementos

Los elementos y pseudoelementos tienen el nivel más bajo de especificidad. Ya que apuntan todos instancias de un elemento dado, el uso de selectores de elementos solo debe usarse cuando realmente desee que esos estilos se apliquen a todos instancias de párrafos, divs, encabezados, etc. Por ejemplo, el siguiente código aplicará un borde negro sólido de 1px a todos los elementos de párrafo en el documento.

 

p {borde: 1px negro sólido; }

 

Clases, atributos y pseudoclases

Las clases, atributos y pseudoclases tienen un mayor nivel de especificidad y solo se aplicarán a los elementos asociados a ellos. Son reutilizables, en el sentido de que puede tener clases aplicadas a múltiples elementos diferentes, siempre que desee que compartan los mismos estilos. Estos estilos también anularán los estilos que entren en conflicto con los del nivel de elemento. En el siguiente ejemplo, todos los elementos de párrafo serán verdes, excepto aquellos con la clase de alert, que será rojo:

 

p {color: verde; } p.alert {color: rojo; }

 

ID

Los ID tienen uno de los niveles más altos de especificidad y anularán casi cualquier cosa. A diferencia de las clases que se pueden reutilizar tantas veces como desee, se supone que los ID solo se deben aplicar a un soltero elemento en la página.

 

p # myParagraph {color: negro; } p.alert {color: rojo; } p {color: verde; }

 

Aunque hay dos declaraciones más para los párrafos debajo de la p#myParagraph declaración, el ID de #myParagraph siempre será negro.

Estilos en línea

Los estilos en línea tienen un nivel de especificidad aún mayor que los ID. Si bien generalmente está muy mal visto aplicar cualquier estilo en línea, ya que dificulta encontrar y administrar los estilos aplicados a los elementos, hay situaciones en las que se puede justificar.

Mi párrafo rojo

 

El estilo en línea anterior siempre será rojo, independientemente de los estilos que se apliquen en otros lugares. *

!important

La única advertencia a lo anterior, incluso incluidos los estilos en línea, es el uso de !important. Cuando !important se agrega a una regla CSS, esta regla tendrá prioridad sobre todo lo demás, siempre, sin importar qué:

 

p {color: azul! importante; }

 

!important puede ser un salvavidas cuando no puede averiguar qué está bloqueando su CSS, pero también se puede abusar fácilmente y hacer que su código sea más complicado. Como regla general, utilice !important solo cuando todo lo demás falla.

Una herramienta extremadamente útil para comprender mejor y verificar la especificidad es Calculadora de especificidad de Keegan Street. Siempre que tenga dudas, puede resultar muy útil comprobar aquí sus selectores.

Uso de WOW.js y Animate.css para animaciones activadas por desplazamiento

WOW.js y Animate.css

Las animaciones son una excelente manera de agregar emoción visual y movimiento a sus sitios web, y los populares animate.css Library ha proporcionado una manera fácil de agregar animaciones basadas en CSS a cualquier sitio web. Sin embargo, ¿qué sucede si solo desea activar estas animaciones una vez que el usuario se haya desplazado a una sección específica de su sitio web?

Por supuesto, esto se puede lograr a través de jQuery, pero usar la biblioteca de JavaScript solo para esa función agrega volumen innecesario para una función que de otro modo se puede lograr con un simple script. WOW.js resuelve este problema, ofreciendo una biblioteca fácil de usar para agregar animaciones que se activan mediante el desplazamiento, sin necesidad de jQuery, en solo 3kB.

Esta publicación proporcionará una guía sobre el uso de WOW.js y animate.css para sus proyectos web, incluidas varias opciones disponibles para instalarlo.Click To Tweet

Si está interesado en aprender sobre diferentes animaciones además de los efectos de desplazamiento, diríjase a la última sección de esta publicación de blog para obtener una lista de otras bibliotecas de animación CSS y Javascript.

Acerca de animate.css

Uso de WOW.js y Animate.css para la actualización de 2019 de animaciones activadas por desplazamiento

El uso de animaciones CSS es un método sencillo y sencillo para agregar efectos visuales llamativos a cualquier sitio web HTML. Una de las bibliotecas más populares para animaciones CSS es animate.css. Si bien la biblioteca puede ser pequeña, es una herramienta perfecta para los desarrolladores web novatos que buscan agregar más contenido a su sitio web sin el uso complejo de fotogramas clave. Si bien esta publicación de blog discutirá principalmente cómo usar WOW.js, el archivo animate.css es extremadamente versátil y también se puede usar con otros archivos.

Algunas de las muchas animaciones que puede agregar a los elementos de su sitio incluyen:

  • Animaciones estáticas: Estos tipos de animaciones aparecen justo cuando carga y abre una página web. En otras palabras, ¡no hay desplazamiento (WOW.js) involucrado!
  • Animaciones de desplazamiento: Estos tipos de animaciones aparecen cuando el usuario se desplaza hacia la vista del elemento en una página web. Este es el tipo de animación en el que nos centraremos con WOW.js. Esta animación también se puede crear con jQuery.
  • Haga clic en animaciones: Con una combinación de programación jQuery y Javascript, puede crear animaciones en su sitio web que se ejecutan cuando el usuario hace clic en un elemento determinado.
  • Animaciones "especiales": Estas animaciones más extravagantes se pueden usar en elementos cuando realmente desea capturar la atención del usuario al instante con una animación llamativa.

Acerca de WOW.js

WOW.js es un archivo Javascript que, cuando se agrega a su documento HTML, puede crear efectos atractivos y dinámicos en un sitio. Este efecto de desplazamiento es una de las opciones más populares para los diseñadores web, ya que solía tener licencia como código de fuente abierta bajo MIT. Cuando esté en un sitio web que implemente WOW.js, los elementos animados aparecerán mágicamente a medida que se desplaza hacia abajo en el sitio. Para ver un ejemplo de este efecto, visite el sitio web oficial de WOW.js. Es una gran herramienta de diseño para utilizar con animate.css.

En comparación con otras opciones de animación con Javascript, WOW.js es extremadamente popular por su código simple y sin volumen. Tenga en cuenta que puede utilizar otras bibliotecas de animación CSS para activar WOW.js; WOW.js simplemente trata a animate.css como su biblioteca predeterminada. Esto incluye bibliotecas como CSShake o DynCSS. WOW.js es de uso gratuito para proyectos de código abierto, aunque requiere la compra de una licencia para cualquier proyecto comercial.

Agregar animate.css y WOW.js a su proyecto

Para comenzar a animar su sitio web, el primer paso es agregar animate.css y WOW.js a su documento HTML. Hay algunas formas en las que puede agregar los archivos a su proyecto HTML. Puede descargar la distribución de animate.css y WOW.js desde cada uno de sus respectivos sitios oficiales, o simplemente enlazar a los archivos disponibles en CDN. CDN alberga una amplia colección de bibliotecas para Javascript y CSS.

Un beneficio importante de usar animate.css para su sitio web es que el código CSS se guarda en un solo archivo, lo que simplifica su proyecto inmensamente. Una vez que agregue el archivo CSS a su proyecto, todo lo que debe hacer es vincularlo a su HTML en el encabezado del documento. Alternativamente, puede simplemente vincular el archivo CDN a su documento HTML. Dependiendo de si agrega directamente el archivo animate.css o simplemente enlaza al archivo CDN, solo el href variará ligeramente:

Instale animate.css y WOW.js

Haga clic en los enlaces siguientes para ver los archivos animate.css y WOW.js en CDN:

(Nota: el código "minimizado" se refiere a la eliminación de espacios en blanco y caracteres más cortos para preservar la funcionalidad pero crear tamaños de archivo más compactos. Esto hará que el código sea más difícil de leer y editar para aquellos que quieran personalizar o realizar cambios en el código.)

Usando npm para instalar animate.css y WOW.js

Alternativamente, puede usar un administrador de paquetes como npm (administrador de paquetes Javascript) para instalar animate.css y WOW.js simplemente escribiendo algunas palabras clave en la línea de comando. Desde la raíz del directorio de su proyecto, ejecute el siguiente comando desde la línea de comandos:

npm instalar wowjs

Una ventaja de instalar WOW.js a través de npm es que también instala automáticamente animate.css como dependencia. De esta manera, no necesita preocuparse por seguir las instrucciones para descargar animate.css con una de las opciones discutidas anteriormente. Similar a agregar el archivo directamente o usar CDN, animate.css se vinculará en el archivo de su documento (la ruta href diferirá según la ubicación del archivo):

Para el script, puede agregar WOW.js a su sitio web vinculándolo en la parte inferior de su documento HTML, justo debajo de la etiqueta de cierre. Esto debe ir seguido de un etiqueta para activar WOW.js, como se muestra a continuación:

nuevo WOW (). init ();

Agregar animaciones a elementos

Una vez que se agregan ambos archivos al proyecto, es hora de seleccionar los elementos HTML que le gustaría animar al desplazarse. Cualquier elemento con una clase de .wow permanecerá oculto hasta que el usuario lo alcance en la página. Puede aplicar esta clase a encabezados, texto, imágenes o incluso una parte más grande de su sitio web encerrada en un etiqueta.

Agregue una clase de .wow a cualquier elemento HTML que le gustaría animar con WOW.js, como un elemento h1:

¡Bienvenido a mi sitio!

Animate.css tiene 75 estilos de animación diferentes para elegir, todos los cuales se pueden probar en el sitio oficial (ver arriba). Una vez que haya seleccionado una animación que le gustaría usar, agregue su nombre como una clase CSS en el elemento para animar, junto con la clase "wow". Aquí hay algunos ejemplos de animate.css y WOW.js en acción en su documento HTML:

¡Bienvenido a mi sitio!

El elemento h1 ahora se desvanecerá a la derecha una vez que el usuario se haya desplazado hasta él en la página.

haga clic aquí

El contenido incluido en el La etiqueta ahora creará un efecto pulsante en el sitio una vez que el usuario se haya desplazado hasta ella en la página.

Alteraciones en las animaciones de WOW.js

Hay pequeños ajustes que se pueden hacer a las animaciones CSS mediante algunas ediciones en línea en su documento HTML. Puede agregar estas cuatro propiedades después class = "guau" e incluso combinarlos dentro de cualquier etiqueta HTML. Esencialmente, estas propiedades simples son una forma excelente y sin esfuerzo para que los usuarios agreguen versatilidad a las animaciones de desplazamiento. A continuación se muestran descripciones de las cuatro propiedades que puede modificar al animar un elemento HTML con WOW.js:

  • data-wow-delay = "_ s": Normalmente, el elemento aparece automáticamente cuando el usuario se desplaza hasta su ubicación. Con esta propiedad, puede retrasar la animación durante _ segundos.
  • data-wow-duration = "_ s": Puede hacer que la animación dure _ segundos, lo cual es útil para acelerar o ralentizar la apariencia del elemento.
  • data-wow-iteration = "_": Con esta propiedad, puede hacer que la animación se repita o se repita _ veces antes de que se vuelva estática en su página.
  • data-wow-offset = "_": Esta propiedad permite que la animación comience _ píxeles desde el borde del navegador antes de animar.

Bibliotecas de animación alternativas a animate.css y WOW.js

Bounce.js

Bounce.js es una herramienta fácil de usar para crear impresionantes animaciones CSS3 y JavascriptBounce.js es una herramienta fácil de usar para crear impresionantes animaciones CSS3 y Javascript para su sitio web en solo minutos. Los desarrolladores pueden experimentar con una lista de varias animaciones en la herramienta web Bounce.js para generar fotogramas clave estáticos e incluso personalizar las animaciones directamente en el navegador web. Cuando la animación cumpla con sus estándares, puede exportar el código CSS directamente desde el sitio y pegarlo en su proyecto. Luego, puede usar las animaciones que creó en el navegador web y aplicarlas directamente a los elementos de su documento HTML. La herramienta web incluso genera una URL única y abreviada que le permite acceder a su animación en un nuevo navegador web en caso de que desee editarla en cualquier momento.

Para obtener más información sobre cómo crear animaciones con Javascript e instalar la biblioteca Bounce.js en su proyecto, puede seguir las instrucciones para instalar la biblioteca Bounce.js en su Sitio de Github.

Anime.js

Anime.js, que utiliza propiedades CSS, objetos Javascript, SVG y atributos DOM para crear animaciones impresionantesOtra biblioteca de animación popular es Anime.js, que utiliza propiedades CSS, objetos Javascript, SVG y atributos DOM para crear animaciones impresionantes. La colección de Julian Garnier presenta docenas de animaciones integradas que puede agregar directamente a su propio sitio. Puede ver las diversas animaciones creadas con Anime.js en la colección Codepen de Anime.js. A diferencia de WOW.js, esta biblioteca de animación no se usa necesariamente para animar elementos HTML en un sitio. Más bien, Anime.js se utiliza para crear "ilustraciones" animadas independientes para su sitio web en conjunto para aumentar su atractivo visual. Algunos de mis favoritos incluyen Garnier's animación de dibujo lineal y demostración de animaciones en capas. Para agregar la biblioteca Anime.js a su proyecto, puede instalar a través de npm.

Vea las instrucciones y la documentación para usar Anime.js en el Sitio de Github.

Hover.css

Hover.css produce efectos llamativos en su sitio web simplemente pasando el mouse sobre los elementos animados.Hover.css produce efectos llamativos en su sitio web simplemente pasando el mouse sobre los elementos animados. Puede usar esta biblioteca de animación para agregar más agallas a elementos 2D ordinarios, como botones, logotipos o imágenes. En el sitio web Hover.css, puede navegar y probar las diversas animaciones, como transiciones de fondo, 2D, sombras y contornos, colocando el mouse sobre cada botón. Aquellos que planean usar una o pocas animaciones Hover.css pueden simplemente descargar el archivo y copiar / pegar la animación específica en sus propias hojas de estilo. Sin embargo, si planea usar muchas animaciones Hover.css, entonces esencialmente puede seguir el mismo procedimiento de instalación y vinculación de la hoja de estilo Hover.css a su documento HTML. Tendrá acceso a todos los efectos Hover.css para animar cualquier elemento HTML apropiado en su sitio.

Para ver las instrucciones y documentación específicas para instalar y usar Hover.css, vaya al sitio oficial Sitio de Github.

Typed.js

Uso de la publicación de blog WOW.js y Animate.css: descripción general de Typed.jsPara crear la máquina de escribir icónica o el efecto de mecanografía, una opción popular para los desarrolladores web es usar Typed.js. Muchos sitios web utilizan esta biblioteca de animación para crear efectos de escritura de cadenas en las páginas, incluida la popular plataforma de espacio de trabajo grupal, Slack. Simplemente instale la biblioteca Hover.css a través de npm o vincule el archivo CDN a su documento HTML. Con esencialmente uno etiqueta, puede animar una etiqueta de texto HTML con el efecto de máquina de escribir. Con suficientes ajustes, puede crear efectos de escritura más avanzados en su sitio web para obtener un efecto aún más sorprendente. Por ejemplo, puede crear el efecto de que la computadora haga una pausa mientras escribe o el efecto de eliminar letras en una palabra.

El funcionario Sitio de Github incluye todo el código fuente y documentación detallada sobre cómo puede personalizar la animación de escritura para satisfacer sus preferencias personales.

CSShake

CSS shake es una colección de animaciones que "agitan" los elementos HTMLComo indica el título, esta biblioteca CSS es una colección de animaciones que "sacuden" los elementos HTML de su sitio web. Esta peculiar animación es perfecta si desea llamar la atención sobre una determinada imagen o sección de su sitio web. También hace que los elementos de su sitio web sean más interactivos, lo que siempre es una ventaja para el desarrollo front-end. Puede experimentar con la variación de las animaciones de sacudidas usted mismo en el sitio web de CSShake colocando el cursor sobre diferentes elementos de la página. El código fuente de CSShake Github también incluye documentación detallada que describe cómo crear sus propias animaciones de agitación personalizadas. Tendrá que comprender y aprender a ajustar las propiedades de jQuery leyendo la documentación.

Cuando esté listo para instalar CSShake en su propio proyecto, siga las instrucciones de instalación en el Sitio de Github.

Introducción a CSS flexbox y selectores avanzados de CSS

CO Flexbox (o Diseño de caja flexible) fue una adición tardía a la especificación CSS3, con el objetivo de abordar muchos de los problemas de diseño de una página web, especialmente cuando se trabaja con varios tamaños de dispositivos y diseño web receptivo. Mientras que el CSS más reciente grid las propiedades son capaces de crear diseños complejos basados ​​en cuadrículas, flexbox es a menudo una mejor opción para diseñar pequeños grupos de componentes dentro de un diseño más grande, generalmente con mucho menos código que cuando se usa grid. Esta publicación dará una breve introducción al uso de las propiedades de flexbox para problemas de diseño comunes.

display: flex

El primer paso para crear una caja flexible es aplicar un display: flex propiedad a un elemento padre que actuará como un contenedor para todos los elementos flexibles dentro de él.

Si bien la mayoría de los diseños requerirán el uso de propiedades adicionales. Se puede crear un diseño simple de 2 columnas usando solo esta propiedad.

Por ejemplo, podemos tomar un recipiente con 2 div elementos apilados uno encima del otro, y transformarlo en un diseño de 2 columnas con la adición de la display: flex propiedad:

Codigo original:

HTML


    
    
</div>

 

CO:

#envase {
    altura: 600px;
    anchura: 800px;
}
# column1 {
    color de fondo: azul;
    altura: 300px;
    anchura: 400px;
}
# column2 {
    color de fondo: verde;
    anchura: 400px;
    altura: 300px;
}

 

Introducción a CSS flexbox

CSS con flexbox:

#envase {
    altura: 600px;
    anchura: 800px;
    pantalla: flexión;
}
# column1 {
    color de fondo: azul;
    altura: 300px;
    anchura: 400px;
}
# column2 {
    color de fondo: verde;
    anchura: 400px;
    altura: 300px;
}

 

Introducción a CSS flexbox

flex-direction

Podemos agregar control adicional sobre el flujo de elementos en nuestro contenedor flexible a través del flex-direction propiedad. Por defecto, todos los elementos dentro de un contenedor flexible fluirán en un row de izquierda a derecha, aunque también podemos establecer esta propiedad para que tenga valores de column, row-reverse or column-reverse.

Ajustar el espaciado y la alineación con justify-content

A menudo, habrá más espacio en un contenedor del que ocupan los elementos que contiene, por lo que es probable que desee justificar el espaciado de los elementos de cierta manera. De forma predeterminada, todos los elementos dentro de un contenedor flexible se alinearán al comienzo del contenedor (denominado flex-start) pero hay una variedad de otras opciones. Tenga en cuenta que la posición real variará dependiendo de la configuración de flex-direction: si la dirección se establece como row luego flex-start indicará todo el camino a la izquierda del contenedor, mientras que una dirección de column indicaría la parte superior del contenedor para flex-start.

Volviendo a nuestro ejemplo de código original, aumentaremos el width de nuestro contenedor un poco para mostrar mejor las diferentes justify-content configuración.

justify-content: center colocará todos los elementos directamente en el centro de la columna:


    
    
</div>

 

#envase {
    altura: 600px;
    anchura: 1000px;
    pantalla: flexión;
    justify-content: centro;
}
# column1 {
    color de fondo: azul;
    altura: 300px;
    anchura: 400px;
}
# column2 {
    color de fondo: verde;
    anchura: 400px;
    altura: 300px;
}

 

Introducción a CSS flexbox

justify-content: flex-end es lo contrario de justify-content: flex-start, colocando los elementos al final del contenedor:

Consejos de CSS flexbox

justify-content: space-between colocará todos los elementos en cada extremo del contenedor, dejando el espacio que quede en el centro del contenedor, así como alrededor de cualquier elemento adicional en el interior (en casos de un contenedor con 3 o más elementos):

Trucos CSS flexbox

justify-content: space-around es como spae-between, aunque hay espacio adicional en los extremos del contenedor:

Consejos y trucos de CSS flexbox

Selectores CSS3 avanzados

Sin embargo, existen muchos otros selectores más avanzados, con el fin de seleccionar elementos con un mayor nivel de especificidad. Estar familiarizado con el selector adecuado para el trabajo es uno de los aspectos más importantes del aprendizaje de CSS. Esta publicación destacará algunos de los selectores avanzados más útiles para los elementos de orientación.

Selectores de niños

Los selectores secundarios se utilizan para apuntar a elementos anidados entre sí. Hay dos tipos diferentes de selectores secundarios, descendientes y selectores secundarios directos.

Selectores de descendientes

Los selectores descendientes se utilizan para apuntar a un elemento determinado (o grupo de elementos), independientemente de dónde estén anidados en su elemento principal. Por ejemplo:

.contenedor p

 

apuntaría a ambas instancias del p elemento en el siguiente HTML:

Este es un párrafo Este es otro párrafo anidado más abajo.

 

Selectores de niños directos

Si solo desea apuntar a elementos que están en el siguiente nivel por debajo del elemento principal, el selector Direct Child es el que debe usar.

.contenedor> p

 

solo seleccionaría el primero p elemento en el siguiente HTML:

Este es un párrafo, dirigido por el selector Direct Child Este es otro párrafo, no dirigido por el selector de niño directo

 

Selectores de hermanos

Selectores generales de hermanos

Los selectores generales de hermanos seleccionarán cualquier elemento en el mismo nivel anidado que aparece después del primer hermano. Por ejemplo:

h1 ~ div

 

apuntará a los 2 señalados div elementos que aparecen después de la h1, pero no el anterior, ni ninguno que pueda estar anidado en niveles posteriores:

Un párrafo El título Este div será el objetivo Otro párrafo Este div también será dirigido

 

Selectores de hermanos adyacentes

El selector de hermanos adyacentes se utiliza para seleccionar elementos que aparecen directamente después de un elemento dado. Por ejemplo:

h1 + p

 

solo apuntará al p elemento justo después del h1:

... ... Este párrafo será dirigido ... ...

 

Pseudoclases

En la publicación anterior de selectores de CSS, tocamos las pseudoclases a través de :hover selector. Sin embargo, hay muchas otras pseudoclases, como :link, :visited, :active y más.

Para diseñar un a enlace que aún no ha sido visitado, utilice el :link selector:

a: enlace {color: verde; }

 

Stlye un a enlace que ha sido visitado, utilice el :visited selector:

a: visitado {color: azul; }

 

La :active El selector se puede utilizar siempre que un usuario interactúe con un elemento, como hacer clic en él:

.click-me: active {border-radius: 50%; }

 

:focus se utiliza siempre que un elemento tiene "foco", como un elemento de formulario cuando el usuario lo ha introducido mediante un clic del mouse o del teclado:

a: focus {altura: 120%; }

Conclusión

¿Encuentra trucos CSS útiles en esta publicación? Por favor comparte tus comentarios abajo.

 

Biografía del autor

Angelo ha estado involucrado en el mundo creativo de TI durante más de 20 años. Construyó su primer sitio web en 1998 utilizando Dreamweaver, Flash y Photoshop. Amplió sus conocimientos y experiencia al aprender una gama más amplia de habilidades de programación, como HTML / CSS, Flash ActionScript y XML.

Angelo completó una capacitación formal con el programa CIW (Certified Internet Webmasters) en Sydney, Australia, y aprendió los fundamentos básicos de las redes de computadoras y cómo se relaciona con la infraestructura de la red mundial.

Además de ejecutar Sunlight Media, Angelo disfruta escribiendo contenido informativo relacionado con el desarrollo web y de aplicaciones, el marketing digital y otros temas relacionados con la tecnología.

Publicar un comentario

Los comentarios están moderados. Su correo electrónico se mantiene privado. Los campos obligatorios están marcados *

© 2021 Sunlight Media LLC | 811 W 7th St. Nivel 12, Los Ángeles CA, 90017 | 323.868.3581