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, including:
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 full-day workshop will be hosted at the Ivey Tangerine Leadership Centre and will take place before the two days of Smashing Conference. The workshop will be running from 9:30am to 5:30pm on Monday, June 25th.
Schedule for Monday, June 25th
9:00 – Doors open, Registration
9:30 – Introduction & Kick-off
11:00 – Coffee Break
13:00 – Lunch
14:00 – Afternoon Session
15:30 – Coffee Break
17:30 – The End, Networking
Save $100 when signing up for the conference and a workshop!