Sara Soueidan — Independent web UI developer, author, speaker, and educator working at the intersection of design and code, helping front-end designers and developers build innovative, inclusive, and accessible web experiences using modern HTML, CSS, and SVG.
70 articles from this blog
A final comparison article summarizing various CSS and SVG techniques for web design, with links to detailed resources.
Compares CSS and SVG techniques for creating non-rectangular UI components like circular menus, exploring their capabilities and trade-offs.
A tutorial on creating a circular navigation menu using the CSS clip-path property and SVG paths for modern web interfaces.
Compares CSS and SVG techniques for creating graphical text effects, focusing on background-clip, masks, and pattern fills.
A case study on embedding, art-directing, and providing accessible fallback for an SVG infographic using the HTML object element.
A guide to using the SVG viewBox attribute for art-directing and cropping SVG images, with tips and a call for a CSS viewBox property.
A deep dive into CSS background-position property, explaining edge offset values and visual positioning techniques.
Explains why SVG is superior to CSS for creating circular navigation menus, providing an overview of the concepts and code behind a circular menu generator.
Explains the CSS currentColor variable, its benefits for maintaining consistent color schemes, and how it works within the cascade.
Explains how to use the HTML <picture> element for better SVG fallback and art direction, replacing JavaScript-based methods.
Explains CSS compositing and blending modes for creating visual effects like those in Photoshop, with examples and technical details.
![Useful SVGO[ptimization] Tools](https://alldevblogs.blob.core.windows.net/thumbs/article-d5dd0f779056-full-9d9b58a5.webp)
Introduces SVGOMG, a GUI tool for previewing and optimizing SVGs with SVGO plugins, preventing broken animations.
A comprehensive guide to creating animations using SVG and the SMIL specification, featuring syntax explanations and demos.
A guide to making embedded SVG images responsive across browsers using CSS techniques like the Padding Hack and inline media queries.
Explains how to establish new viewports and coordinate systems in SVG using nested SVGs and elements like 'symbol' for better control and flexibility.
Explains the SVG transform attribute, covering translation, scaling, rotation, and skewing functions and their interaction with SVG coordinate systems.
Explains the fundamentals of SVG coordinate systems, focusing on the viewport, viewBox, and preserveAspectRatio attributes.
Explains how to use the clip-path property in CSS and the <clipPath> element in SVG to create non-rectangular clipping regions for web elements.
Explains how to use SVG's <g>, <use>, <defs>, and <symbol> elements for grouping and reusing graphical components to create cleaner, more maintainable code.
A comprehensive guide to the CSS will-change property, covering usage, performance, and best practices for web developers.
