This website is Brian Treese's Angular Development Blog. The site provides practical, hands-on tutorials and resources for developers who use the Angular framework. The tutorials cover modern Angular techniques including Signals, Components, Forms, Animations, CDK (Component Dev Kit), and Styling. Each tutorial includes code examples, video demonstrations, and step-by-step instructions to help you build Angular applications.
CSS custom properties excel at theming and color systems, but adding alpha transparency to custom property colors requires special syntax. The modern CSS rgba() function with custom properties enables dynamic opacity adjustments without duplicating color values. This tutorial demonstrates how to use custom properties with rgba() to create flexible color systems that support transparency variations.
When you need to react to viewport resize events or get viewport dimensions programmatically, the Angular CDK Viewport Ruler is the tool you need. This utility provides a clean, Angular-friendly way to monitor window resize events, get viewport size and scroll position, and handle responsive behavior that goes beyond CSS media queries. In this guide, you'll learn how to use the Viewport Ruler to close modals on resize, sync component state with viewport changes, and access viewport dimensions in your TypeScript code. All examples work with Angular v19+ and standalone components.
Replacing images with HTML and CSS improves maintainability and accessibility, but making HTML elements scale proportionally like images requires responsive techniques. CSS Container Queries enable elements to respond to their container's dimensions rather than the viewport, creating truly responsive components. This tutorial demonstrates how to build an HTML/CSS ad that scales proportionally like an image, adapting to different container sizes automatically.
Angular's new control flow syntax replaces the old structural directives (*ngIf, *ngFor, and ngSwitch) with a cleaner, more intuitive template syntax that doesn't require imports or wrapper elements. In this guide, you'll learn how to use @if, @for, and @switch to build modern Angular templates, understand when and why to migrate from the old directives, and discover the performance benefits of built-in tracking. All examples work with Angular v19+ and demonstrate production-ready patterns.
Scroll-driven animations create engaging, interactive experiences that respond to scroll position, but implementing them with JavaScript requires complex event listeners, performance optimizations, and manual calculations. CSS Scroll-Driven Animations eliminate this complexity by binding animations directly to scroll containers using the animation-timeline property and view() function. This tutorial demonstrates how to create scroll-triggered animations with pure CSS, no JavaScript required.
Animating components as they enter and leave the DOM is a common requirement, but CSS alone can't handle this. Angular's animation framework provides :enter and :leave transitions that work perfectly for this scenario. In this tutorial, you'll learn how to use @HostBinding to automatically animate components when they're added or removed, handle animation callbacks with @HostListener, and create reusable animated components that work anywhere in your app. All examples work with Angular v19+ and modern component patterns.
Truncating text with an ellipsis sounds simple, until you need to support multiple lines, responsive layouts, and real production browsers. In this guide, you'll learn how to implement single-line and multi-line text truncation using pure CSS, including modern techniques that work across today's browsers. We'll cover text-overflow, -webkit-line-clamp, and layout constraints that make or break truncation in the real world. If you've ever struggled to keep overflowing text under control without JavaScript, this guide will give you clean, reliable solutions.
When CSS media queries aren't enough, when you need to change component logic, toggle functionality, or conditionally render based on viewport size, the Angular CDK Breakpoint Observer is your solution. This utility lets you monitor media queries programmatically and react to breakpoint changes in your TypeScript code. In this tutorial, you'll learn how to use the Breakpoint Observer to sync JavaScript behavior with CSS breakpoints, share breakpoint values between CSS and TypeScript, and leverage Material Design's predefined breakpoints. All examples work with Angular v19+ and standalone components.
CSS Grid provides powerful layout capabilities beyond simple two-dimensional grids, enabling centering, stacking, complex layouts, and even animating to unknown heights without JavaScript. This tutorial demonstrates advanced CSS Grid techniques that solve common layout challenges, showing how grid's unique features simplify complex design requirements.
CSS masks solve design challenges that seem impossible with standard CSS properties, enabling fade effects, irregular shapes, and complex image transformations without JavaScript or extra markup. This tutorial demonstrates three practical CSS mask techniques: creating fade-out effects on scrolling containers, adding irregular edge shapes to banners, and transforming square images into hexagonal shapes. You'll learn how CSS masks work and when to use them instead of alternatives like gradients or clip-path.
Event handling in Angular requires choosing the right approach for each scenario: template event bindings for simple interactions, Renderer2 for global events, host event bindings for component-level events, and output() for component communication. This tutorial demonstrates four common event listening patterns in Angular, showing when to use each approach and how to avoid common pitfalls. You'll learn how to handle clicks, input changes, focus events, and global document events effectively.
Conditionally adding CSS classes is one of the most common tasks in Angular, and also one of the most misunderstood. Between [class], [class.someClass], ngClass, and now modern signal-driven patterns, it's easy to end up with unreadable templates or brittle styling logic. In this article, you'll learn the four class binding patterns you should actually be using in Angular in 2025, when to use each one, and how to avoid the most common performance and readability pitfalls. All examples work with Angular v19+ and modern component patterns.
Irregular text paths typically require images, creating maintenance issues, accessibility problems, and SEO limitations. Inline SVG with CSS provides a better solution, enabling dynamic, responsive, and accessible text-on-path effects directly in HTML. This tutorial demonstrates how to create curved and shaped text using SVG and CSS, ensuring designs remain editable, scalable, and accessible.
Default HTML radio buttons look outdated and inconsistent across browsers, but styling them directly is impossible due to browser limitations. This tutorial demonstrates how to create custom-styled radio buttons using CSS, hiding the native input and creating accessible, visually appealing alternatives that work across all browsers and maintain full functionality.
For the longest time we’ve been stuck with boxes and it makes things that are common yet beautiful in the print world difficult if not impossible on the web. CSS shapes change this, leveling the playing field allowing us to create much more engaging layouts and designs on the web.
I was lucky enough to get the invite from Matt West, founder/organizer of CodeSLO, via my coworker @schwarty to give a presentation at the CodeSLO meetup "HTML and CSS - Part 3 - Modern Web Design" meet up. This was a good time. I got to get out and talk shop with a great group of people who were excited to learn about design and the role it plays on the web. My talk went a little over thirty minutes and covered the basic principles of good design: contrast, repetition, proximity, alignment, layout, typography, color, and more. For those that were unable to attend, feel free to take a look at the slides to see what you missed...
Sometimes it's necessary to have a link that contains some children elements. Say, for example, you have a link that contains some text and an inline SVG icon that's styled using CSS. This set up allows you to style the icon for all of the link states `:hover`, `:visited`, and `:active` right? Well yes, with the exception of the `:active` state in Internet Explorer. Well, not without a work around at least.
layout: post title: “Oh Wow That’s Neat - 20: Dimensions Toolkit” date: “2014-06-06” tags: “Accessibility” “CSS” “JavaScript”—
You've likely seen CSS animations and transitions in various web applications out there where they just didn't work well. They are choppy and freeze along with a bunch of other issues. This occurs because they are not taking advantage of the device GPU and hardware acceleration, but are instead using the browsers' built in rendering engine.
For those of us who are used to working with XHTML this is going to seem a little odd but, with HTML5, we no longer need to add a trailing slash on self closing tags like images and inputs.