Skip to main content

This is a release candidate of the next SmashingMag. Report a bug on GitHub or via email. Beware of cats.

Sara Soueidan

Sara Soueidan will run a workshop on

The CSS & SVG Power Combo

Full-day workshop • June 25th

The workshop with the strongest punch of creativity. The CSS+SVG Power Combo is where you(r team) will learn about the latest, cutting-edge CSS and SVG techniques to create creative crisp and beautiful interfaces.

We will also be looking at all and any existing browser inconsistencies as well as performance considerations to keep in mind. And there will be lots of exercises (it’s called a workshop for a reason) and practical examples that can be taken and directly applied in real life projects.

You’ll learn how to:

  • Creating and implementing SVG icon systems and styling them with CSS Variables.
  • Cropping and scaling images using CSS, as well as using SVG. (Special focus on the SVG viewBox and preserveAspectRatio attributes and understanding how they work is included.)
  • Styling and manipulating images and applying creative effects to images using CSS and SVG filters and blend modes.
  • Creating non-rectangular layouts and components using clipping and masking in CSS and SVG.
  • Taking user interactions to the next level by leveraging the flexibility and possibilities of SVG shapes in conjunction with CSS animations.

Attendees will be challenged with a series of creative exercises, implying all the above techniques to solve real-world design challenges — satisfaction guaranteed!

Whom is it for

Designers and front-end developers with at least basic knowledge of CSS and SVG. Please bring your laptop to the workshop.

Time & Location

This workshop will be running from 9:00am to 5:00pm on Monday, June 25th. We’ll let you know the location at least one month before the event.

Save $100 when signing up for the conference and a workshop!

Register for the workshop →

You can save $100 by getting a conference + workshop ticket. Or by becoming one of us.

Location:
TBA
Google Maps
Schedule:
  • Doors, open, Registration
  • Introduction & Kick-off
  • Coffee break
  • Lunch
  • Afternoon Session
  • Coffee break
  • The end, networking
Workshop includes:
  • Lunch and Snacks
  • Coffee, tea
  • Paper and pen