Here’s an idea! Let’s make an an HTML
Link: https://css-tricks.com/responsive-knockout-text-with-looping-video/
Mastering SVG Available for Pre-Order
Creating a Panning Effect for SVG
Earlier this month on the Animation at Work Slack, we had a discussion about finding a way to let users pan inside an SVG.
I made this demo below to show how I’d approach this question:
See the Pen Demo – SVG Panning by Louis Hoebregts (@Mamboleoo) on CodePen.
Here are the four steps to make the above demo work:
Get mouse and touch events from the user
Calculate the mouse offsets from its origin
Save
…
The post Creating a Panning Effect for SVG appeared first on CSS-Tricks.
Link: https://css-tricks.com/creating-a-panning-effect-for-svg/
How to Create a Component Library From SVG Illustrations
I’ve recently published my first ever open source npm package! It makes SVG illustrations from unDraw into customizable React components.
Here’s a GIF that shows what I mean:
What’s unDraw?
While unDraw is still fairly new, its open source nature means that it’s being used by a range of products already. Here it is on the newly launched design mentoring site called MentorOla, alongside a language site I’ve been working on myself called Little Lingua:
Left: MentorOla…
The post How to Create a Component Library From SVG Illustrations appeared first on CSS-Tricks.
Link: https://css-tricks.com/how-to-create-a-component-library-from-svg-illustrations/
Animated SVG Radial Progress Bars
Dave Rupert shows us all how to animate radial progress bars in SVG with a tiny script alongside the stroke-dasharray and stroke-dashoffset properties:
For a client project we tasked ourselves with building out one of those cool radial progress bars. In the past, we’ve used entire Canvas-based charting libraries (156k/44k gzip), but that seemed like overkill. I looked at Airbnb’s Lottie project where you export After Effects animations as JSON. This is cool for complex animations, but the dependencies seemed …
The post Animated SVG Radial Progress Bars appeared first on CSS-Tricks.
Link: https://daverupert.com/2018/03/animated-svg-radial-progress-bars/
Scooped Corners in 2018
When I saw Chris’ article on notched boxes, I remembered that I got a challenge a while ago to CSS a design like it, but with rounded, scooped corners instead. So, let’s see how we can do it that way instead and expand it to multiple corners while being mindful of browser support.
The post Scooped Corners in 2018 appeared first on CSS-Tricks.
CSS Techniques and Effects for Knockout Text
Knockout text is a technique where words are clipped out of an element and reveal the background. In other words, you only see the background because the letters are knocking out holes. It’s appealing because it opens up typographic styles that we don’t get out of traditional CSS properties, like color.
While we’ve seen a number of ways to accomplish knockout text in the past, there are some modern CSS properties we can use now and even enhance the …
The post CSS Techniques and Effects for Knockout Text appeared first on CSS-Tricks.
Link: https://css-tricks.com/css-techniques-and-effects-for-knockout-text/
Using CSS Clip Path to Create Interactive Effects
Do you remember being a kid, cutting out pictures from magazines? Did you glue them onto paper to create your own collages? This post is about cutting out images on the web using the CSS property clip-path. We will discuss how to do the cutting and how we can use these cut-out parts to create some interesting effects, combining these cut-out parts with the original image.
I’ll use the following photo as an example. The flower stands out from …
Using CSS Clip Path to Create Interactive Effects is a post from CSS-Tricks
Link: https://css-tricks.com/using-css-clip-path-create-interactive-effects/
Get Your SVGs Out of Your HTML
After this holiday season, many of us would like to lose a little weight, page weight that is. In my app, CodeTriage, I make extensive use of SVG elements for images, the logo, and icons. Until recently, I’ve been rendering the SVG elements directly in the HTML. This was the easiest thing to do. As you might guess by my intro sentence, I’ve been working on decreasing page weight by removing SVG elements from the HTML. How well did it work? Before making changes the homepage was 14kb (77kb unzipped). After the change, the homepage is 6kb (30kb unzipped). That’s a 57% reduction in “over the wire" bytes per page load. What exactly did I do, and what were the trade-offs I made to get to a smaller page? Let’s look at how I was previously using SVG.
Here’s the raw SVG:
Using SVG to Create a Duotone Effect on Images
Creatives everywhere welcomed the 2016 new year with the spark of a colorizing technique popularized by Spotify’s 2015 Year in Music website (here is last year’s) which introduced bold, duotone images to their brand identity.
Well, thanks to the potentially life-saving powers of SVG, we can create these Photoshop-like “adjustment layers” with SVG filters.
Using SVG to Create a Duotone Effect on Images is a post from CSS-Tricks
Link: https://css-tricks.com/using-svg-to-create-a-duotone-image-effect/