Screencasts de video 2024, Diciembre
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"
¡Bienvenida! Este será un gran viaje y, como todos los viajes, este comienza con un solo paso. Nuestro primer paso es hacer un inventario de un poco de "
Diseñar en el navegador es genial y todo, pero comenzar en Photoshop me mantiene en mi momento más creativo cuando más lo necesito: cuando estoy frente al lienzo en blanco ".
Esta es una grabación de audio de una llamada de Skype entre Erin Kissane y yo. Erin escribió el libro sobre estrategia de contenido, así que tuve la suerte de obtener su ayuda y "
Todo el sitio se basará en "módulos". Cada pequeña cosa estará literalmente en una caja (tanto visualmente como en el código, en última instancia). Nosotros"
Agregamos algunas capas adicionales debajo del encabezado principal / cuadro de marca para darle el aspecto de "pila de papeles". No es una gran metáfora ni nada por el estilo, solo agrega algo visual "
Comenzamos a diseñar la navegación de nivel superior (principal) del sitio. Comenzamos con la pantalla del tamaño de un escritorio (con un ancho ciertamente arbitrario) pero estamos
Ciertamente no hemos "terminado" en Photoshop para siempre para este diseño, pero tenemos suficiente trabajo para comenzar a crear este diseño en el navegador. Después"
Comenzamos a colocar el texto en la navegación principal, solo para ver cómo encaja, trabajar en el tamaño, los colores, etc. Parte del texto se ajusta bastante "
Mientras miramos nuestra maqueta de Photoshop, escribimos, comenzamos a escribir HTML para describir lo que estamos viendo. Por supuesto, usamos HTML5 siempre que hace "
Eliminar el CSS del agente de usuario (predeterminado) de la mayoría de los elementos suele ser una buena idea. Esto se ha hecho durante mucho tiempo mediante reinicios "universales" o cosas como Eric "
Utilizamos algunos trucos de posicionamiento para alinear el borde izquierdo del logotipo y el área de contenido principal, mientras que el encabezado toca el borde izquierdo del "
Hasta ahora, el sitio web real no se parece mucho a nuestro diseño de Photoshop. En este screencast nos enfocamos en hacer precisamente eso, comenzando desde la parte superior con "
Probablemente sepa por qué es bueno usar el control de versiones. En caso de que no lo esté, lo repaso rápidamente en este video. Entonces entramos en "
Configuramos un nuevo kit en Typekit para v10. Para la marca, usaremos Proxima Nova Soft por ahora y algunas otras fuentes que se parecen mucho a las fuentes HF&J en nuestro "
Pasamos una hora entera mirando un diseño de Photoshop y escribiendo un marcado HTML5 que describe lo que vemos. Intentamos ser lo más semánticos posible y debatimos "
Comenzamos ajustando un poco el tipo de logotipo, pero luego saltamos a agregar íconos en la navegación principal. Cuando estábamos diseñando la navegación en Photoshop (Video "