CSS

Every Way to Style an Angular Component (but funny)😂

Angular gives you so many ways to add styles to a component because, apparently, developers love too many choices and unnecessary suffering.

Angular Component Styling: Every Way to Add Styles (Complete Guide)

Angular offers multiple ways to add styles to components, each with different use cases and trade-offs. From inline styles in the decorator to external stylesheets, from programmatic styling with Renderer2 to CSS custom properties, choosing the right approach impacts maintainability and performance. This comprehensive guide walks through every styling method available in Angular, helping you make informed decisions for your components.

Angular Theming... A Stand Up Special No One Asked For

You ever try to theme an Angular component? Yeah… it sounds easy. Just tweak some colors, maybe adjust a layout, how hard could it be? Well, let me tell you, by the time you're done battling :host, :host-context(), and CSS variables, you'll start questioning everything.

Angular Component Theming: CSS Custom Properties and :host-context

Component theming in Angular requires understanding how styles cascade and how to adapt components to different contexts. This tutorial demonstrates multiple theming strategies using CSS :host and :host-context selectors, along with CSS custom properties. You'll learn how to create flexible components that adapt their appearance based on where they're used, whether in a sidebar, main content area, or different color schemes. Each approach has trade-offs that we'll explore in detail.

Styling in Angular and other life lessons

Ever tried styling a component in Angular? It’s not just CSS—it’s an event! From class binding to ::ng-deep, from ViewEncapsulation to the mystical powers of !important, this is the wild world of Angular styling!

Components are Just Tiny Digital Apartments 😂

Angular folks, this one’s for you! Ever feel like your components are just tiny digital apartments trying to live their best life? Well, let’s talk about it—Seinfeld style!

Untagged Template Literals... The Upgrade You Didn’t Know You Needed!

Dynamic class and style bindings in Angular templates often become complex, mixing string concatenation, ternary operators, and multiple bindings that are hard to read and maintain. Angular's template literal syntax provides a cleaner way to handle dynamic expressions, allowing you to use JavaScript template literals directly in templates for classes, styles, and complex interpolations. This tutorial demonstrates how to use template literals to simplify dynamic bindings and improve template readability.

Angular :host and :host-context: Style Component Host Elements

Styling Angular components can be tricky, especially with encapsulated styles. But :host and :host-context let you target a component’s root element and adapt styles based on its context—without global CSS hacks. In this guide, you'll learn how to apply, modify, and control styles using these selectors, making your components smarter and more flexible. Let’s dive in!

Angular ::ng-deep Alternatives Part 2: CSS Custom Properties and View Encapsulation

Replacing ::ng-deep requires understanding CSS Custom Properties, View Encapsulation modes, and component architecture patterns. This follow-up tutorial addresses common misconceptions about avoiding ::ng-deep and provides specific, production-ready examples using CSS Custom Properties and View Encapsulation settings. You'll learn why ::ng-deep is discouraged by the Angular team and practical alternatives that maintain component boundaries while allowing necessary style customization.

Angular SVG Components: Create Dynamic Interactive Graphics

SVG components in Angular unlock powerful possibilities for data visualization and interactive graphics. Unlike static images, SVG components can respond to data changes, user interactions, and state updates in real time. This tutorial shows you how to transform basic lists into dynamic, interactive SVG charts using Angular's component system, signal-based reactivity, and template binding. You'll learn how to create scalable, data-driven visualizations that update automatically.

Angular Deferred Loading with Animations: Performance and UX (v19+)

Loading content users never see wastes bandwidth and slows initial page loads, hurting performance metrics and user experience. Angular's deferred loading feature lets you load components only when they're needed, reducing initial bundle size and improving Core Web Vitals. This tutorial demonstrates how to combine deferred loading with animations, creating smooth transitions as components enter the viewport. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular ::ng-deep Alternatives: Modern Styling Approaches

The deprecated ::ng-deep selector was Angular's way to break style encapsulation, but it causes maintenance issues, breaks encapsulation principles, and is no longer supported. Modern Angular provides better alternatives using CSS Custom Properties and View Encapsulation settings that maintain component boundaries while allowing necessary style overrides. This tutorial shows you how to replace ::ng-deep with maintainable, future-proof styling approaches that work with Angular's component architecture.

Angular Expand/Collapse Animation: Animate Height Changes (Deprecated Module)

Expand and collapse animations make Angular UIs feel polished and professional. This tutorial demonstrates how to animate height changes using Angular's deprecated animations module. While this approach still works, modern Angular (v19+) offers better alternatives using CSS animations and DOM events. You'll learn the legacy approach here, but for new projects, consider using pure CSS transitions or Angular's new enter/leave animation API.

Angular Content Toggle: Show/Hide Content with Buttons

Building toggle buttons in Angular doesn't have to be complicated. Whether you need to show/hide content with CSS classes or conditionally render elements, this tutorial covers multiple approaches. You'll learn how to create reusable toggle buttons that control content visibility, handle state management with signals, and implement smooth transitions. By the end, you'll have several patterns you can use in any Angular project.

Angular Crossfade Animation: Fade Between Content (Deprecated Module)

Crossfade animations create smooth transitions between content changes, image carousels, and tab switches, eliminating jarring instant replacements. While CSS transitions can handle simple fades, coordinating simultaneous fade-out and fade-in effects requires careful timing and state management. This tutorial demonstrates how to create crossfade animations using Angular's animation framework, ensuring smooth transitions between content states. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Flip Animation: Create Card Flip Effects (Deprecated Module)

Flip animations create engaging card interactions, reveal effects, and 3D transformations that feel natural and intuitive. Implementing flip animations requires careful coordination of transforms, perspective, and timing to create convincing 3D effects. This tutorial demonstrates how to create flip animations using Angular's animation framework, including proper perspective setup and smooth transitions. Note: This uses Angular's deprecated animations module—modern alternatives are available.

CSS Shapes: The Reference Box

CSS Shapes require a reference box to establish a coordinate system for drawing and positioning shapes. The reference box determines how shapes are calculated relative to the element's box model (margin, border, padding, or content box). This tutorial explains how reference boxes work, which box model values to use, and how they affect shape positioning and content flow.

CSS Shapes: Fundamentals

CSS Shapes solve a fundamental web layout limitation: content wrapping around custom shapes. Before CSS Shapes, floated elements always created rectangular float areas, preventing content from flowing around circles, polygons, or transparent images. This tutorial explains what CSS Shapes are, how they control content flow without rendering visual shapes, and the core concepts needed to use them effectively.

CSS Shapes: What are They?

CSS Shapes control how content flows around floated elements, but they don't actually render visual shapes—they define float areas. Understanding this distinction is crucial: CSS Shapes determine where content wraps, not what shapes appear on the page. This tutorial explains what CSS Shapes are, how they differ from visual CSS shapes created with borders or clip-path, and why floated elements still create rectangular float areas without the CSS Shapes module.

CSS Shapes: Introduction

Web layouts have been trapped in rectangular boxes for decades, limiting designers to grid-based structures that can't match the creative freedom of print design. CSS Shapes changes everything by allowing content to flow around custom shapes, creating magazine-style layouts with text wrapping around circles, polygons, and custom paths. This comprehensive guide teaches you how to break free from rectangular constraints and build sophisticated, editorial-style layouts that were previously impossible on the web.

Angular Slide Animation: Slide-in/Slide-out Effects (Deprecated Module)

Slide-in and slide-out animations are essential for modals, sidebars, and dynamic content, creating smooth transitions that guide user attention. While CSS transitions work for simple show/hide scenarios, Angular's animation framework provides better control over timing, easing, and coordination with component lifecycle. This tutorial demonstrates how to create professional slide animations using Angular's animation framework. Note: This uses Angular's deprecated animations module—modern alternatives are available.

3 Ways to Add Dynamic CSS Custom Properties in Angular

Dynamic CSS custom properties enable data-driven styling in Angular components, allowing you to create responsive charts, themed components, and dynamic layouts based on runtime values. Angular provides multiple ways to set custom properties programmatically, each with different use cases and trade-offs. This tutorial compares three approaches: template style binding, Renderer2's setStyle method, and host element binding, helping you choose the right method for your scenario.

Angular Custom Loading Screen: Replace Blank Bootstrap Screen

Blank screens during Angular app bootstrap create poor first impressions and make applications feel slow, even when they're loading quickly. Custom loading screens improve perceived performance, provide visual feedback, and enhance brand consistency. This tutorial shows you how to replace Angular's default blank bootstrap screen with a custom loading animation that displays while your app initializes. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Host Element Binding: Replace @HostBinding and @HostListener (v19+)

Angular's @HostBinding and @HostListener decorators are deprecated, existing only for backwards compatibility. Modern Angular uses host element bindings in the component decorator and host event bindings in templates, providing better type safety, clearer syntax, and improved performance. This tutorial demonstrates how to migrate from deprecated decorators to modern host binding patterns, updating real-world examples and modernizing component code along the way.

Using @HostBinding with Signals

If you’re building apps with Angular, you’re probably using signals more and more every day. This can definitely be a challenge at times because it’s such a different way of working. And, there are things that just don’t quite work with signals yet, like @HostBinding for example. Well in this post, I’m going to demonstrate how we can actually use the @HostBinding decorator with signals, pretty easily right now even though the decorator was not originally built to support them directly. Alright, let’s get to it.

Angular Host Attribute Token: Replace Static Inputs with inject() (v18+)

Static string inputs that never change create unnecessary overhead in Angular components, triggering change detection and adding complexity. Angular's HostAttributeToken provides a more efficient way to handle static values by reading them directly from HTML attributes, eliminating the need for inputs and improving performance. This tutorial demonstrates how to replace static signal inputs with HostAttributeToken and the inject() function, showing when and why to use this optimization.

Angular Animations: Animate to Unknown Height (Deprecated Module)

Animating to an unknown height is impossible with pure CSS—you can't transition to auto or 100%, and max-height workarounds require arbitrary values that break in edge cases. Angular's animation framework solves this by calculating the actual height at runtime and animating to that value, creating smooth expand/collapse effects for accordions, dropdowns, and dynamic content. This tutorial demonstrates how to animate elements to their natural height, regardless of content size. Note: This uses Angular's deprecated animations module.

Angular Animations: Keyframe Animations (Deprecated Module)

Complex multi-step animations require precise control over intermediate states, something CSS keyframes can handle but Angular's keyframes() function makes easier to coordinate with component state and lifecycle. Angular's keyframes function integrates seamlessly with the animation framework, allowing you to create sophisticated sequences that respond to component data and user interactions. This tutorial demonstrates how to use keyframes() to create complex animation sequences. Note: This uses Angular's deprecated animations module.

Angular Animations: Enter and Leave Transitions (Deprecated Module)

Animating elements as they enter and leave the DOM is impossible with pure CSS, but Angular's animation framework provides :enter and :leave transitions that handle this automatically. These transitions create smooth fade-ins, slide-ins, and scale effects when items are added or removed from lists, modals, and dynamic content. This tutorial demonstrates how to use :enter and :leave aliases to create professional enter/leave animations. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Animations: Learn the Basics (Deprecated Module)

Animations transform static Angular UIs into engaging, intuitive experiences, but CSS alone can't handle complex scenarios like animating elements as they enter/leave the DOM or coordinating multiple animations. Angular's animation framework provides powerful features beyond CSS, including state-based animations, enter/leave transitions, and programmatic control. This tutorial covers the basics of Angular animations, from enabling the module to creating your first state-based animation. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular CDK Overlay Animations: Animate Open and Close Transitions (v19+)

Adding smooth open and close animations to Angular CDK Overlays requires Angular's animation framework. CSS transitions alone won't work because overlays are dynamically inserted and removed from the DOM. In this tutorial, you'll learn why :enter/:leave animations fail for overlays, how to use state-based animations instead, coordinate animation completion with overlay detachment, and leverage transform-origin for more natural animations. This guide builds on CDK Overlay basics, positioning, and scroll strategies. All examples work with Angular v19+.

Angular CDK Overlay Positioning: Custom Positions, Fallbacks, and Viewport Handling (v19+)

Mastering Angular CDK Overlay positioning is essential for building professional dropdowns, tooltips, and popovers, but the connected overlay's positioning system can be overwhelming at first. In this guide, you'll learn how to create custom position strategies with fallback options, handle viewport edge cases, and ensure your overlays always display correctly regardless of screen size or scroll position. This article builds on the CDK Overlay basics and shows production-ready techniques for controlling overlay placement in Angular v19+. If you've ever struggled with overlays getting cut off or appearing in the wrong location, this guide will give you the tools to fix it.

Angular CDK Overlay: Build Floating Panels the Right Way (v19+)

Angular's CDK Overlay is the foundation behind dialogs, tooltips, dropdowns, and floating panels, but most developers only interact with it indirectly through Angular Material. In this guide, you'll learn how to use the Angular CDK Overlay directly to create fully custom floating UI elements with precise positioning, layering, and lifecycle control. This article is updated for Angular v19+ and shows the modern, production-ready way to create overlays without relying on deprecated patterns. If you've ever needed a custom popup, context menu, or floating panel, this is the missing piece.

3 Modern CSS Techniques for Centering Items

Centering elements in CSS used to require complex hacks, but modern CSS provides multiple reliable methods. Each approach—positioning, flexbox, and grid—has different use cases and trade-offs. This tutorial demonstrates three modern centering techniques, helping you choose the right method for your layout needs and understand when each approach works best.

New CSS Features in Angular 17: Component Style Improvements

Angular 17 introduced simplified component styling options that reduce boilerplate and improve developer experience. Instead of requiring arrays for inline styles, you can now use single strings, and external stylesheet imports are more flexible. This tutorial demonstrates Angular 17's new styling features, showing how they simplify component style definitions and improve code readability.

Alpha Transparency in CSS Custom Properties

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.

HTML: How to Resize Markup Like an Image With CSS Container Queries!

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.

Look ma... no JavaScript!

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.

Angular Host Binding Animations: Animate Components on Enter/Leave (v19+)

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.

CSS Text Truncation: Single-Line and Multi-Line Ellipsis (Complete Guide)

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.

Angular CDK Breakpoint Observer: Monitor Media Queries Programmatically

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.

Things You Didn’t Know CSS Grid Could Do

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 Guide: Solutions to Common Design Challenges

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.

Crafting Dynamic Text Paths with HTML, SVG, and CSS: A Guide to Responsive and Accessible Graphics

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.

How to Style HTML Radio Buttons: A Step-by-Step Guide

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.

CSS Shapes Bring Rich Editorial Design Features to the Web

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.

Good Design Comes From... CRAP - CodeSLO Presentation

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...

Fixing the :active Pseudo Class Selector in Internet Explorer

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.

How to Force Hardware Acceleration to Improve CSS Animations

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.

Oh Wow That’s Neat – 19: Responsive Boilerplate

With all of the great frameworks popping up it can be difficult to choose the "right" one. Besides doing some really great things, probably the two most popular frameworks [Twitter Bootstrap](http://getbootstrap.com/2.3.2/) and [Zurb Foundation](http://foundation.zurb.com/), can be a little overreaching at times when it comes to theming them. You may find that you have to overwrite and undo many styles to make them look unique. This is where web developer [James South's](https://twitter.com/James_M_South) [Responsive Boilerplate](http://responsivebp.com/) may prove to be that "right" one.

Alter Browser Default Panning and Zooming Behavior With CSS touch-action

Now that there are so many people accessing the sites we build through touch devices many of us will see that we need to alter the default panning and zooming behavior of the browser when touching them.

Quick Tip - 18: Automatically Update Placed Files in Adobe Illustrator

If you use Illustrator for interface design you probably take advantage of using placed files for some of your design elements. I've started using the heck out of them in order to make updating items across files much easier and quicker. As I started doing this I quickly realized that it's monotonous to update the placed files manually after making edits to them. Well, there's good news, you can set Illustrator to automatically updated them for you.

Oh Wow That’s Neat – 18: Morphing Buttons Concept

It used to be that websites and their interactions were much different than those from native software applications. Well this is not so much the case anymore. [Mary Lou](http://tympanus.net/codrops/author/crnacura/), a freelance web designer and developer from [tympanus.net](http://tympanus.net/), wrote an interesting article discussing a few different morphing buttons concepts that showcase some amazing possibilities for web interactions.

Quick Tip – 17: How to Diff CSS Live Edits in Chrome DevTools

If you're reading my blog I'll assume that you are familiar with how to live edit code within all browser developer tools. I use them all the time and can hardly remember what it was like without them. Chrome DevTools tend to be my favorite but FireFox and Internet Explorer continue to improve.

Oh Wow That’s Neat – 17: Open Source Ampersands

Paul Irish created and maintains a site devoted to Ampersands. The site is a collection of open source web fonts that only contain the ampersand character. He created it based off an [article from 2008](http://simplebits.com/notebook/2008/08/14/ampersands-2/) regarding the usage of ampersands and the fact that certain variants of the character in some fonts are more interesting than others. The article also points out that the ampersand character is often used only for display purposes and not in content so there is no reason not to use more interesting versions.

Using CSS Generated Content

Back in the good ol' days, CSS was much more limited than it is today. If we needed to style something it had to be in the page which, in turn, led to bloated markup simply for design purposes. Luckily we are no longer in those days.

Quick Tip - 15: How to Fix ng-cloak Flicker in AngularJS

The ng-cloak directive was added to Angular in order to prevent the flickering of elements before your application has fully loaded. It then removes ng-cloak once it has had a chance to compile your views. However, there is still a flicker issue that occurs between when the view is first loaded and before Angular has had a chance to run.

Oh Wow That’s Neat – 15: The Magic of CSS

We pick up lots of pieces of knowledge over time when working with CSS and then if we don't use them often we can forget how to use them and then have to spend time either looking it up again or looking for where we used them in other projects.

SVGs are So Fresh to Defs

No, this is not a hip hop song about SVGs, sorry to those of you who were expecting that. This is another post about good ol' SVG graphics. So most of us know that there is a lot that you can do with SVGs and it can all be done in many different ways. The SVG `defs` element can be used to make SVG code simpler, cleaner, and better.

Quick Tip - 14: Centering the Grid in Illustrator

When you create a new Illustrator document the grid will always be aligned based off the upper left corner of the art board. Personally, I always want it to be aligned to the top center. How do you do that? Well, the simplest way that I've found is to actually just center the art board.

Oh Wow That’s Neat – 14: flexboxgrid.com

If you're ready to build out your next site using flexbox you are probably going to want to use a grid. Well, you're in luck because [Kristofer Joseph](https://twitter.com/dam) has created [Flexbox Grid](http://flexboxgrid.com/) with many of the features that you're used to with other div based grids and more.

What the :root Pseudo Class is and Why You Might Use it

The :root pseudo class, at first glance, is a little odd. It seems like it's simply a replacement for using the HTML tag as a CSS selector. There's a little bit more to it than that and in this article I will explain what the :root pseudo class is and why you might use it.

Oh Wow That's Neat - 13: subtlepatterns.com

Subtlepatterns.com is a great free resource for high quality repeating backgrounds for use in your designs. It was created and is actively maintained by Atle Mo.

Things You May Not Know About CSS Backgrounds

I have been using CSS background properties for quite a few years and have only used what I have needed. There are some pretty cool things that can be done with backgrounds that I was not so familiar with. In this article I'll highlight some of these not so common options.

Quick Tip – 12: Rounding Corners in Illustrator

Ever needed to quickly and precisely round corners on vector shapes and typography already added to your designs in illustrator? Well, it's pretty easy to do nowadays.

Oh Wow That’s Neat – 12: SVG Optimiser

If you've ever created an SVG image in Adobe Illustrator you've seen some pretty crazy code. Just like all other code we write, it should be simple, clean, and lean. Also, like any other image type we want to make sure that it is optimized and has the highest quality with the smallest file size.

AngularJS Overview for Web Designers

AngularJS is a newer JavaScript framework geared towards the creation and maintenance of single page web applications. It is considered to be a “toolset for building the framework most suited to your application development” meaning that, for the most part, you can choose the elements that you want to use and swap out those that you don’t want with other libraries/frameworks of your choice. It is built and maintained by Google and is open source with an MIT license.

Quick Tip – 11: Text Wrapping in Illustrator

Often when creating a web design mock-up you'll have the need to wrap text around objects. Illustrator makes this very quick and easy to do.

Oh Wow That’s Neat – 11: Whatfont Bookmarklet

Do you ever use browser developer tools just to figure out what fonts and font styles are being applied on your site and perhaps others? Well, there's an easier way thanks to Chengyin Liu an engineer at Backplane. He has created the Whatfont Bookmarklet extension for Chrome.

Quick Tip – 10: Using Global Swatches in Illustrator

Ever wish that you could create high fidelity design mock-ups with the ability to make global color changes? Well, with Illustrator you can do exactly that.

Quick Tip – 09: Placing PhotoShop Documents Within Other PhotoShop Documents

You can now place PhotoShop documents within other PhotoShop documents. This is awesome when you are in the process of mocking up large scale applications consisting of common components like site headers, footers, navigation, etc. It also helps to keep these design elements consistent when developing with a team of designers.

Pseudo-Classes vs. Pseudo-Elements

For the longest time the only pseudo selectors that we could use were :link, :hover, :visited and :active and they could only be applied to a tags. As long as we were intending to support ie6 that was all we could do. As we've adopted philosophies like progressive enhancement, graceful degradation, or dropped support for ie6, 7, and 8 we have seen the landscape of CSS selectors change dramatically.

Quick Tip - 08: Highlight Search Results With the HTML5 Mark Tag

The HTML5 mark tag was created in order to highlight text within a document that is relative to another context. This is perfect for highlighting the search term in a list of results.

Oh Wow That’s Neat – 08: Cubic-Bezier.com

I don't really come across much about the use of CSS3 cubic-bezier() functions for easing in animations. It is a timing function that can be used in place of the easing keyword for CSS animations.

Modern Web Typography: Kerning

Kerning is a very important aspect when it comes to setting type. Unfortunately, until more recent times, it has been left out when it comes to the web.

How to Use CSS Filter Effects

Quick Tip - 06: Use the Four-Value Syntax to Properly Position Background Images

After writing my post Use CSS Calc to Properly Position Background Images I had some folks point out that you can now use the new Four-Value syntax for the background-position property to achieve the same effect. I was absolutely blown away when I saw that this was finally possible. I'm mean, this just makes sense and it's something that I've wanted for years.

Oh Wow That's Neat - 06: www.fontwalk.de

www.fontwalk.de is a site that was created as a marketing tool for www.fontshop.com. I'm not so interested in their fonts, although it looks like they have a nice selection. I am more interested in the great design ideas behind the Font Walk site.

Make it Count with CSS Counters

Often I've found myself in a spot where I've needed to style an ordered list in a way that I just couldn't do with CSS. So I either had to live with it as it was or get tricky with JavaScript or something to create a custom list with the necessary markup. Then I stumbled across CSS Counters and that all changed.

Quick Tip - 05: Small Caps Using font-variant

Ever needed to use small caps in a website? They can add a really nice typographic touch in certain circumstances, but I've never really taken advantage of them with CSS.

Oh Wow That's Neat - 05: Perspective Page View Navigation

Navigation can be a hard thing to master. Handling it intuitively and in a usable fashion is even more challenging with the wide variety of devices and screen resolutions available. Most sites tend to just shove all of their menu items under some three bar icon and expand the menu when clicked. Seems to work pretty well, but what If your were to think of navigation in a whole new way?

How and Why to Use the CSS Clip Property

The CSS Clip property is an odd one. I've been building websites for a long time and didn't know about it even though it's been around for a while. In this article I am going to explore how and why to use the CSS Clip property.

Quick Tip - 04: Create Drop Caps With CSS

CSS drop caps came up in a discussion with a co-worker the other day. I don't use drop caps in web sites I design, but there's really no reason why I shouldn't.

Oh Wow, That’s Neat – 04: Ink - Responsive Email Templates

Anyone who's ever had to create HTML emails knows that it sucks. You have to write old, crappy, code and inline style everything. You have to use tables because more modern float layouts just don't work consistently across the bagillion email clients that are out there. Overall, I would say that they are probably my least favorite part of the Job. But, they don't have to be. Thanks to the great folks at [ZURB](http://zurb.com/) we can hit the ground running when developing HTML emails.

The Difference Between CSS box-shadow and filter: drop-shadow();

Normally when I need to add a drop shadow to an element I will use CSS box-shadow. There's another way that I can handle this though. I can use CSS filters. They allow me to do many different things like apply gray-scale, apply sepia, blur, adjust brightness, adjust contrast, adjust hue, invert colors, saturate colors, and alter opacity.

Oh Wow, That's Neat - 03: Myth.io

CSS Preprocessors like LESS, SASS, and Stylus are all the rage now-a-days and rightfully so. They all do some great stuff allowing us to write CSS in a more programmatic way where we repeat ourselves less and operate at a higher efficiency level. With all the good that they provide for us they do add a layer of complexity.

Understanding CSS Regions

Some of my favorite parts of CSS3 are those concerning layout. So far I've explored Flexbox and Columns, but today I'm going to dig into CSS Regions.

Quick Tip - 02: Use CSS Calc to Properly Position Background Images

If you would have asked me about the CSS Calc function six months or so ago I would have said "What's That?". But luckily for me I stumbled across some blog post highlighting the coolest new CSS stuff that's available for us to use and CSS Calc was one of them. It's really a pretty useful item to have at our disposal.

Oh Wow, That’s Neat – 02: iconmelon.com, svg Icons Lib for the Web

There are many pros and cons to using icon fonts and SVGs for icons in your designs. I had been under the impression that icon fonts were the more effective of the two but have had some reservations. For one, what happens if you need a multi-color icon? Remember, they are simply fonts so they have to be a solid color. The only way around that is to get all hacky and build the various components using other elements. The sizing of things is also a little odd since they are fonts they have to be sized with font-size and line-height which doesn't necessarily feel right. Using animations with them is also very limited when compared to SVG. And one last thing, they cant be set to scale at a percentage of their containing elements like SVGs can.

All You Need to Know About CSS3 Multiple Columns

Layout has traditionally been a pretty difficult thing to get right when it comes to building web sites. With CSS3, however, it looks like things are getting a bit easier. I've written "Flexbox: Modern Web Layouts Simplified" which covered Flexbox layout techniques. That was cool, but there are other great layout features provided for us in CSS3, In this article I'm covering CSS3 Multiple Columns.

Oh Wow, That's Neat - 01: Snap.svg

For those of you that have read my post "SVGs are Cool & You Should Start Using Them, If You’re Not Already" you know that I am a fan of SVGs. In fact, now that I know a little more about them I feel that they are very under used in modern web development. They are light weight, resolution independent, and they really open up the door to so many possibilities for enhancing user experiences.

How to Use 2D and 3D CSS Transforms

Most of the time when using HTML and CSS we are simply drawing flat rectangles, rounded rectangles, or circles within 2D space. CSS Transforms allow us to alter the shape, position, rotation, and scale of html elements within both 2D and 3D space. When combined with CSS transitions, transforms can really enhance the user experience although that topic will require its own post.

Flexbox: Modern Web Layouts Simplified

New in the world of web layouts is the CSS3 "Flexible Box Layout Module" known as Flexbox. It is so new in fact that at the time of writing this post it is still just a W3C Recommendation and is still in flux with different browsers implementing things a little differently. That being said, it actually has been around since 2009 although the syntax was different. The most recent version of the module seems to be fairly stable with solid support among the latest versions of all major browsers.

SVGs are Cool & You Should Start Using Them, If You're Not Already

Up until a couple of months ago I had no idea that there was even such a thing as an inline SVG. Once I found out I realized that I need to learn more about them. First off SVG stands for "Scalable Vector Graphics" which literally means just what it says. It's simply an image format containing XML code that describes vector graphics which can be resized large or small without affecting quality.