Articles on design engineering
Project case studies, thought processes & design thinking, front-end strategy, and techniques and best practices, focused on HTML, CSS, SVG, accessiblity, and everything in between.
-
Useful SVGO[ptimization] Tools
-
Using The CSS :target Selector To Create JavaScript-less UI Effects
-
Tips For Optimizing SVG Delivery For The Web
-
An Overview Of SVG Sprite Creation Techniques
-
Styling and Animating SVGs with CSS
-
A Guide to SVG Animations (SMIL)
-
Making SVGs Responsive With CSS
-
Understanding SVG Coordinate Systems and Transformations (Part 3) — Establishing New Viewports
-
Understanding SVG Coordinate Systems and Transformations (Part 2) — The transform Attribute
-
Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio
-
Clipping in CSS and SVG — The clip-path Property and <clipPath> Element
-
Structuring, Grouping, and Referencing in SVG — The<g>, <use>, <defs> and <symbol> Elements
-
Everything You Need To Know About The CSS will-change Property
-
Moving Forward With CSS Shapes
-
CSS Shapes 101
-
CSS Regions Matter
-
Animating CSS Shapes with CSS Animations and Transitions
-
Using CSS Regions With CSS Shapes For A Better Reading Experience
-
Techniques For Creating Textured Text
-
Techniques For Responsive Typography
-
CSS Overlay Techniques
-
Creating Non-Rectangular Layouts With CSS Shapes
-
Navicon Transformicons: Animated Navigation Icons with CSS Transforms
-
Draggable Metro App Showcase
-
Building A Circular Navigation With CSS Transforms
-
S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations
-
Creative Add/Remove Effects for List Items with CSS3 Animations
-
Horizontal Portfolio Layout with CSS3 Animations and jQuery
-
Lessons from the “Seductive Interaction Design” Book
-
How to Create Windows-8-like animations with CSS3 and jQuery