Videos

SVG Tutorial: With CSS Animation

SVG Tutorial: With CSS Animation

2 years ago
What is a vector graphic and how can we animate one? Learn by following along with this video. Link to my new premium course (with coupon): www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=19-FORYOUTUBE Link to cat drawing SVG: codepen.io/anon/pen/YppjQq Add me on Twitter for webDev updates and cat pics: twitter.com/learnwebcode

What Deep Dream sees — LazyWeb #12

3 years ago
The LazyWeb Show is a recap of the past week’s current events on the web platform. This week: CLICK “”””SHOW MORE”””” FOR LINKS TO EVERYTHING Jafar Husain explains the power of ES6 Generators and async functions, Marcy Sutton shows off semi-automated and fully automated tools for testing accessibility, Chris Coyier teaches the rainbow of awesome […]
CSS-Tricks Screencast #135: Three Ways to Animate SVG

CSS-Tricks Screencast #135: Three Ways to Animate SVG

3 years ago
CSS-Tricks Screencast #113: Using a Custom Icon Font

CSS-Tricks Screencast #113: Using a Custom Icon Font

6 years ago
As we’ve said around here many times: icon fonts are awesome. They are efficient in the same way CSS sprites are efficient: lots of images usable for different areas/purposes in one single download. But they are even more awesome than sprites because they are vector and so can scale to any size, be shadowed, change […]
CSS-Tricks Screencast #134: A Tour of an In-Progress Site

CSS-Tricks Screencast #134: A Tour of an In-Progress Site

4 years ago
Built with Jekyll, Grunt, Sass, an SVG System, and More… Article link: css-tricks.com/video-screencasts/screencast-134-tour-site-progress-built-jekyll-grunt-sass-svg-system/
CSS-Tricks Screencast #137: SVG is for Everybody

CSS-Tricks Screencast #137: SVG is for Everybody

3 years ago
Not really a screencast! My talk at BlendConf on SVG

SVG and GreenSock for Complex Animation – Forward 4 Web Summit

2 years ago
SVG is a strong part of the future of the web-based imagery. Because it is written in math not rigid pixels, it reduces our large Front-End testing matrix and allows for interesting solutions to common web problems. When we animate SVG, we can guide our viewers with informative UX patterns, as well as create engaging […]

CSSconf EU 2015 | Lea Verou: The Missing Slice

3 years ago
Think of the humble pie chart. Simple and ubiquitous, yet surprisingly difficult to create with Web technologies in a flexible, maintainable way. Faced with this simple goal, Lea will take you on a colorful interactive journey through several aspects of CSS and SVG and will sweep you off your feet with clever ways to use […]

Custom icons with Iron Iconsets — Polycasts #22

3 years ago
Today we’re traveling back in time to update one of our old episodes. The iron-iconset-svg element lets you build your own custom icon sets which can be SUPER important if you want to make sure your site is as small and performant as possible. Demo source github.com/Polymer/polycasts/tree/master/ep22-update-iron-iconset-svg/app iron-iconset-svg docs elements.polymer-project.org/elements/iron-iconset-svg Behaviors — Polycasts #21 Iron […]

WAPG 6 SVG Animation Programming SMIL JavaScript CSS

11 months ago
Learn SVG animation techniques using animation elements(SMIL), JavaScript and CSS. Lesson Code: www.developphp.com/video/JavaScript/WAPG-6-SVG-Animation-Programming-SMIL-JavaScript-CSS
Sarah Drasner: Functional Animation – CSSConf.Asia 2016

Sarah Drasner: Functional Animation – CSSConf.Asia 2016

1 year ago
Animation is captivating. Our brains are trained to respond most intently to movement. For this reason, animation in a user experience is extremely important, and also very easy to overdo. Carefully considered animation can compose spatial maps to guide users. Animations can be responsive, resolution-independent, and make a site function intuitively. In this session Sarah […]
Developer Diary #Day4

Developer Diary #Day4

2 years ago
Day 4 and Paul decides to crack the mast head images for the Chrome Dev Summit site. Easier said then done right? Right! With angular cut offs on all the images, Paul has been experimenting with SVG and found a load of ways for the images look wrong on the site. Can he find the […]