Sara Soueidan

Sara is a Lebanese freelance front-end web developer and speaker, specializing in semantic markup, CSS, SVG, and progressively enhanced, responsive design, with a strong focus on accessibility and performance. She is the author of our CSS Reference and has co-authored the Smashing Book 5, a book that covers time-saving, practical techniques for crafting fast, maintainable and scalable responsive websites. Sara also runs in-house workshops about SVG and about building accessible UI patterns. Her client list includes Netflix, The Royal Schiphol Group @ Amsterdam Airport, TELUS Digital, and more. Learn more about some of her work or hire her.

filter svg

SVG Filter Effects: Moving Forward

In Articles Feb 26, 2019

In this last article of our SVG Filter Effects series, we share a list of useful resources to learn more about SVG Filters.

feturbulence filter perlin-noise svg texture

SVG Filter Effects: Creating Texture with <feTurbulence>

In Articles Feb 19, 2019

Learn how you can use the powerful SVG filter primitive <feTurbulence> to create your own textures and distortion effects.

filter svg

SVG Filter Effects: Conforming Text to Surface Texture with <feDisplacementMap>

In Articles Feb 12, 2019

Learn how to make text conform to the texture of a surface using feDisplacementMap in this fifth article of our SVG Filter series.

duotone filter photoshop svg typography

SVG Filter Effects: Duotone Images with <feComponentTransfer>

In Articles Feb 5, 2019

This fourth article in our SVG Filter series will show you how to use feComponentTransfer to create a duotone filter effect.

fecomponenttransfer filter posterize svg

SVG Filter Effects: Poster Image Effect with <feComponentTransfer>

In Articles Jan 29, 2019

Learn how feComponentTransfer works and how you can posterize images with this powerful SVG filter primitive.

femorphology filter outline svg typography

SVG Filter Effects: Outline Text with <feMorphology>

In Articles Jan 22, 2019

In this second part of our SVG Filter series you’ll learn all about the feMorphology filter, how it works and how you can use it to create interesting effects.

blur filter svg

SVG Filters 101

In Articles Jan 15, 2019

The first article in a series on SVG filters. This guide will help you understand what they are and show you how to use them to create your own visual effects.

shadow-dom svg symbol use

Styling SVG <use> Content with CSS

In Articles Jul 16, 2015

An in-depth article on how to style the contents of the SVG <use> element and overcome some challenges it brings.

Introducing the Codrops CSS Reference

In Articles Feb 3, 2015

We’ve released a new section on Codrops: the CSS Reference. Discover more about it and what features we’ve added to make learning CSS more easy and practical.

svg

Making SVGs Responsive with CSS

In Tutorials Aug 19, 2014

An article on how to make embedded SVGs cross-browser responsive. We’re going to cover embedding techniques, how to apply the “Padding Hack” and how to use inline media queries to make SVGs adaptive.

background-clip canvas svg texture typography

Techniques for Creating Textured Text

In Tutorials Dec 2, 2013

In this article we’ll explore all the current techniques for creating image or texture filled text and show you how to apply them.

rwd typography

Techniques for Responsive Typography

In Articles Nov 19, 2013

When it comes to responsive type on the web, there’s more to do than just resizing the text’s container and having the text reflow inside of it. This in-depth article covers various techniques for making text responsive.