Articles about design and code
An Introduction To CSS Scroll-Driven Animations Work Blog Talks RSS ← 11 December 2024 An Introduction To CSS Scroll-Driven Animations Scroll And View Progress Timelines #css #animation #english Quick Introduction It’s been 10 years since scroll-driven animations were introduced in a spec proposal, and after five years in development, we’re finally beginning to see pop up in websites. There are…
6 common SVG fails and how to fix them Work Blog Talks RSS ← 23 February 2023 6 common SVG fails and how to fix them #svg #tutorial #english Someone recently asked me how I approach debugging inline SVGs. Because it is part of the DOM, we can inspect any inline SVG in any browser DevTools. And because of that, we have the ability to scope things out and uncover any potential issues or…
8 tricks for SVG optimization Work Blog Talks RSS ← 23 August 2022 8 tricks for SVG optimization #svg #optimization #english Many online tools help us optimize SVG files before getting the code into our projects. But what if I tell you that the way we draw every element has an impact on the exported code? Understanding the code generated from graphic software will help us gain more control over…
6 fallas comunes en SVG y cómo solucionarlas Work Blog Talks RSS ← 23 February 2023 6 fallas comunes en SVG y cómo solucionarlas #svg #tutorial #espanol Alguien me preguntó recientemente cómo debuggeo SVGs inline. Debido a que son parte del DOM, podemos inspeccionar cualquier SVG inline en cualquier navegador con las DevTools. Gracias a eso, tenemos la capacidad de analizar los elementos y…
8 trucos para optimizar SVG Work Blog Talks RSS ← 23 August 2022 8 trucos para optimizar SVG #svg #optimization #espanol Muchas herramientas online nos ayudan a optimizar archivos SVG antes de incluir el código en nuestros proyectos. Pero, ¿qué pasa si te digo que la forma en que dibujamos cada elemento tiene un impacto en el código exportado? Comprender el código generado por el programa que…
How to Add a Double Border to SVG Shapes Work Blog Talks RSS ← 11 April 2021 How to Add a Double Border to SVG Shapes Exploring 7 different ways with CSS and SVG syntax. #svg #tutorial #english Let’s say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you can’t use any graphic editor — they need to be generated at runtime — so you have to solve it with…
How to Simplify SVG Code Using Basic Shapes Work Blog Talks RSS ← 29 September 2020 How to Simplify SVG Code Using Basic Shapes DIY SVG Icons #svg #tutorial #english Read the Chinese version here . Translated by Rotten orange 腐烂的橘子 *** There are different ways to work with icons, but the best solution always includes SVG, either inline or linked up as a file. Sometimes the icons we download (or…
Adding value to our client's platform and brand Work Blog Talks RSS ← 6 Oct 2018 Adding value to our client's platform and brand How to make a brand thrive along with the site #branding #svg #css #case-study #english Not every brand guidelines include definitions for the usage of photography, illustrations, or image styles. Far from being a problem, this could mean a great opportunity for a…
Agregar doble borde a formas SVG Work Blog Talks RSS ← 11 April 2021 Agregar doble borde a formas SVG Explorando 7 formas diferentes con sintaxis CSS y SVG. #svg #tutorial #espanol Supongamos que alguien te pide que agregues un borde doble a algunas formas geométricas en SVG aleatorias. Por algun motivo, no podes usar ningún editor gráfico, deben generarse en tiempo de ejecución, por lo que tenes…
Agregar valor a la plataforma y la marca de nuestro cliente Work Blog Talks RSS ← 6 Oct 2018 Agregar valor a la plataforma y la marca de nuestro cliente Cómo hacer que una marca prospere junto con el sitio #branding #svg #css #case-study #espanol No todas las pautas de marca incluyen definiciones para el uso de fotografías, ilustraciones o estilos de imagen. Lejos de ser un problema, esto podría…
Building an SVG virtual stand Work Blog Talks RSS ← 22 September 2021 Building an SVG virtual stand A responsive illustrated website with CSS Grid. #branding #svg #grid #english Nerdearla is an annual conference with talks and workshops about technology and science here in Buenos Aires. As sponsors of the event with Leniolabs , we used to have a stand where people could come by and say hi, play…
Comfort Shatter Prototipo de App Work Blog Talks RSS ← 5 October 2018 Comfort Shatter Prototipo de App Prototipo de App #branding #case-study #espanol Diseño de UI/UX para prototipo de aplicación móvil “La mayoría de las personas viven en un círculo restringido de potencial”. -Guillermo James ¿Para quién es la aplicación? Nuestros dispositivos móviles se han convertido en una parte indispensable…
Comfort Shatter App prototype Work Blog Talks RSS ← 5 October 2018 Comfort Shatter App prototype App prototype #branding #case-study #english UI/UX design for mobile app prototype “Most people live in a restricted circle of potential.” -William James Who is the app for? Our mobile devices have become an indispensable part of our lives: we carry them everywhere we go, so why not use them for a bit…
Cómo hice un generador para loaders SVG con opciones Sass y SMIL Work Blog Talks RSS ← 11 November 2021 Cómo hice un generador para loaders SVG con opciones Sass y SMIL Generador loaders personalizable y gratuito #svg #tutorial #espanol Mientras aprendía Vue.js , comencé a crear herramientas web gratuitas que involucraban la exploración de SVG, ¡con el objetivo de aprender algo sobre ambos!…
Cómo simplificar código SVG usando formas básicas Work Blog Talks RSS ← 29 September 2020 Cómo simplificar código SVG usando formas básicas Iconos SVG DIY #svg #tutorial #espanol Lea la versión en chino aquí . Traducido por Rotten orange 腐烂的橘子 *** Hay diferentes formas de trabajar con íconos, pero la mejor solución siempre incluye SVG, ya sea inline o vinculado como un archivo. A veces, los íconos…
SVG interactions to improve your UX with UI Work Blog Talks RSS ← 6 December 2019 SVG interactions to improve your UX with UI Contact form with animated feedback #svg #js #ui #tutorial #english Animations are the best way to bring life to our websites: they help us tell stories and communicate what is happening at that moment. They naturally catch our attention so it’s important to learn how and…
Dominar el atributo de SVG stroke-miterlimit Work Blog Talks RSS ← 11 June 2022 Dominar el atributo de SVG stroke-miterlimit Un atributo SVG pasado por alto #svg #tutorial #espanol SVG tiene este atributo de presentación stroke-miterlimit . Probablemente lo hayan visto al exportar un SVG desde un programa de edición de gráficos, o tal vez descubran que pueden eliminarlo sin notar ningún cambio en…
Interacciones SVG para mejorar tu UX con UI Work Blog Talks RSS ← 6 December 2019 Interacciones SVG para mejorar tu UX con UI Formulario de contacto con comentarios animados #svg #js #ui #tutorial #espanol Las animaciones son la mejor manera de darle vida a nuestros sitios web: nos ayudan a contar historias y comunicar lo que está pasando en ese momento. Llaman naturalmente nuestra atención, por…
How I Made a Generator for SVG Loaders With Sass and SMIL Options Work Blog Talks RSS ← 11 November 2021 How I Made a Generator for SVG Loaders With Sass and SMIL Options Free customizable loader generator #svg #tutorial #english While learning Vue.js , I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let’s take a look at one…
Going beyond automatic SVG compression with <use> Work Blog Talks RSS ← 3 March 2020 Going beyond automatic SVG compression with <use> Reduce your file size and improve your code. #svg #tutorial #english Leer versión en español acá . *** If you draw your own SVG files or if you download them from the internet, tools like this SVG-Editor or SVGOMG are your friends. Compressing the files with those…
Leniolabs brand & web redesign Work Blog Talks RSS ← 26 October 2018 Leniolabs brand & web redesign The internal process of creating and developing our own site. #branding #case-study #english Proposal We wanted to build a site that reflects and communicates our identity in every way possible. We saw an opportunity to apply what we had learned in the last years, to make something personal, unique,…
Leniolabs Brand and Website Redesign Work Blog Talks RSS ← 02 December 2021 Leniolabs Brand and Website Redesign Redefining our new identity #branding #case-study #english Three years after redesigning our brand and site , we decided it was time for a change. Not only the world is moving dramatically fast. The tech industry is rising as our company keeps growing in many different ways, making us…
Leniolabs rediseño de marca y web Work Blog Talks RSS ← 26 October 2018 Leniolabs rediseño de marca y web El proceso interno de creación y desarrollo de nuestro propio sitio. #branding #case-study #espanol Propuesta Queríamos construir un sitio que reflejara y comunicara nuestra identidad de todas las formas posibles. Vimos una oportunidad de aplicar lo que habíamos aprendido en los últimos años,…
Leniolabs rediseño de branding Work Blog Talks RSS ← 02 December 2021 Leniolabs rediseño de branding Redefiniendo nuestra nueva identidad #branding #case-study #espanol Tres años después de rediseñar nuestra marca y sitio , decidimos que era hora de un cambio. No solo el mundo se está moviendo dramáticamente rápido. La industria de la tecnología está creciendo a medida que nuestra empresa sigue…
SVG más allá de la compresión automática con el elemento “use” Work Blog Talks RSS ← 3 March 2020 SVG más allá de la compresión automática con el elemento “use” Reducí el tamaño de tus archivos y mejorá tu código #svg #tutorial #espanol Read the english version here . *** Si dibujas tus propios SVG o si los descargas de internet, herramientas como este editor de SVG o SVGOMG son tus amigos.…
Un stand virtual con SVG Work Blog Talks RSS ← 22 September 2021 Un stand virtual con SVG Un sitio web ilustrado receptivo con CSS Grid. #branding #svg #grid #espanol Nerdearla es una conferencia anual con charlas y talleres sobre tecnología y ciencia aquí en Buenos Aires. Como patrocinadores del evento con Leniolabs , solíamos tener un puesto donde la gente podía venir y saludarnos, jugar con…
Mastering SVG's stroke-miterlimit Attribute Work Blog Talks RSS ← 11 June 2022 Mastering SVG's stroke-miterlimit Attribute An overlooked SVG attribute #svg #tutorial #english So, SVG has this stroke-miterlimit presentation attribute. You’ve probably seen it when exporting an SVG from a graphic editor program, or perhaps you find out you could remove it without noticing any change to the visual…
Usar y reusar todo en SVG … ¡Incluso animaciones! Work Blog Talks RSS ← 10 March 2020 Usar y reusar todo en SVG … ¡Incluso animaciones! Cómo crear y optimizar SVG y animaciones CSS #svg #css #tutorial #espanol Read the english version here . *** Si estás familiarizado con SVG y animaciones CSS, o empezaste a trabajar con ellas a menudo, acá hay algunas ideas a tener en cuenta antes de comenzar a…
How to use and reuse everything in SVG… even animations Work Blog Talks RSS ← 10 March 2020 How to use and reuse everything in SVG… even animations Build and optimize SVG and CSS animations. #svg #css #tutorial #english Leer versión en español acá . *** If you are familiar with SVG and CSS animations and starting to work with them often, here are some ideas you might want to keep in mind before…