CSS Image Effects #6: Infrared Photography
A tutorial on creating a faux infrared photography effect using CSS filters and blend modes, with step-by-step code examples.
Una Kravets is a web platform engineer and writer focused on modern CSS and UI capabilities. Her work explores cutting-edge features like container queries, anchor positioning, scroll-driven styling, and the future of web UI architecture.
107 articles from this blog
A tutorial on creating a faux infrared photography effect using CSS filters and blend modes, with step-by-step code examples.
A technical tutorial on recreating the vibrant, blurred Lomography photography aesthetic using CSS filters, blend modes, and gradients.
CSSgram is a lightweight CSS library for applying Instagram-style photo filters using CSS filters and blend modes.
A tutorial on recreating bokeh photography effects using CSS filters, blend modes, gradients, and Sass.
A technical tutorial exploring three different CSS methods to create a vignette effect on images, including inset box-shadow and radial gradients.
A technical tutorial on creating a 3D anaglyph image effect using CSS blend modes like darken and lighten.
A tutorial on creating a vintage photo washout effect using CSS blend modes and filters, focusing on the 'lighten' blend mode.
Explores how modern web technologies like HTTP2 and Flexbox evolved from early HTML hacks and workarounds to solve fundamental web limitations.
Strategies for involving designers in open source projects to improve diversity and project outcomes.
Practical tips for developers and tech professionals to improve their travel experience to tech conferences, covering seat selection, apps, and productivity.
Interview with IBM front-end developer Una Kravets on involving designers in open source projects and her OSCON talk.
Explains Atomic CSS, a utility-first CSS methodology that uses granular, reusable classes to keep stylesheets trim and efficient.
A developer explores the CSS :visited pseudo-class, its privacy limitations, and attempts to creatively style unread links on a blog.
A technical tutorial on using Sass list functions and box-shadow properties to generate pixel art, exploring advanced CSS techniques.
A beginner-friendly guide to overcoming terminal intimidation and learning essential Unix command line commands for developers and designers.
Explores five practical applications of Sass maps for organizing code, managing colors, and improving CSS architecture.
Explores the neuroscience behind web animations, explaining how sensory memory and cognitive load theory inform effective UI/UX design for SPAs.
Explores sketchnotes as a creative note-taking method for tech presentations, featuring techniques from designers and developers.
Explains Sass manifest files and introduces Sass Director, a tool to auto-generate project structure from a manifest.
A developer reflects on 2014's tech achievements and personal goals, and outlines plans for 2015 focused on JavaScript, open source, and community involvement.