Miles de consejos CSS, PHP, scripts. tutoriales y consejos útiles de vídeo

Aprendimos que una limitación de usar para insertar un poco de SVG es que no se pueden escribir selectores CSS compuestos que afecten allí. Por ejemplo: Eso "

Cuando usa SVG en línea, todo ese código SVG está directamente en el HTML y, por lo tanto, en el DOM. Puede diseñarlos como lo haría con, o cualquier otro HTML "

Aunque animar SVG con CSS puede ser más cómodo para la persona promedio de interfaz, SVG tiene otra forma de hacer la animación incorporada en el SVG "

Este consejo solo se aplica si tiene Adobe Illustrator CC (Creative Cloud). Confirmé que funciona en eso, o incluso en el CC 2014 más nuevo. Es tan simple como se puede "

El video fue eliminado en este. Lo volveré a disparar algún día pronto. Si estás leyendo esto y todavía no lo he hecho, no dudes en contactarme y molestarme "

Esto es un poco esotérico, solo necesitaba hacerlo yo mismo una vez y lo encontré confuso, así que pensé en hacer un video completo al respecto. La cosa es,"

Hay un elemento en SVG. No es una gran sorpresa: es para poner texto en el SVG. No contornos de formas de letras (aunque también puedes hacer eso) sino "

Una pequeña técnica de animación SVG popular es el dibujo de rutas. Si no puede imaginarlo, aquí hay una colección de un trillón de ejemplos que he creado. Esencialmente el "

Puede llegar un día en el que desee que un gráfico que tenía fuera SVG, pero solo lo tiene en formato rasterizado, como GIF, JPG.webp o PNG. En este video miramos un ejemplo "

Probablemente no haya un caso de uso tremendamente grande para esto, aparte del obvio: necesita un gráfico de trama, entre otras cosas, en un diseño SVG más grande ".

¿Quizás has oído hablar de los filtros CSS? Puede aplicarlos a cualquier elemento de CSS, como: .apply-css-filter (-webkit-filter: grayscale (0.5); filter: "

El concepto de recorte y enmascaramiento es bastante simple. Oculte ciertas partes de elementos y muestre otras. La diferencia real entre ellos es bastante simple "

JavaScript es la última de las formas que cubriremos sobre la animación de SVG. Analizamos CSS, que es genial y bastante cómodo, pero no puede hacer varios SVG "

Hay muchas cosas que puede hacer con SVG sin ningún software. Suponiendo que tenga una buena fuente de imágenes SVG en línea, podría usarlas directamente. Pero"

Hemos pasado mucho tiempo hablando sobre el uso de inline y el elemento. Puede crear un sistema de iconos con muchas ventajas. Puedes crear "

En este screencast profundizamos en el artículo de Léonie Watson sobre SVG accesible y esencialmente lo repasamos punto por punto. Disfruto que el primer punto "

Cuando usa en línea, todos los elementos están en el DOM, al igual que sy cualquier otro elemento HTML. Si tiene SVG como: y lo tiene: var rect = "

Gracias por ver a todos, significa todo para mí y para este sitio. Esta publicación de blog es una lista enorme de recursos para todo lo que cubrimos en esta serie "

Ya hablamos de optimizar SVG a mano. Tomar decisiones manualmente sobre los detalles y qué tipo de cosas se pueden combinar o eliminar. En esto"

Este rediseño no es un rediseño solo por rediseñar. Quiero mejorar el sitio en todas las formas imaginables que pueda mejorar un sitio. Uno de los"