Search

Nalezeno "SVG": 113

Fractional SVG stars with CSS


Some ⭐️⭐️⭐️⭐️⭐️ star rating systems aren’t always exactly even stars. Say you want to support rating something 2.25 stars. To do that you could “fill” the shape of the stars partially. I like this idea by Samuel...

Which SVG technique performs best for way too many icons?


Tyler Sticka digs in here in the best possible way: by making a test page and literally measuring performance. Maybe 1,000 icons is a little bit of an edge case, but hey, 250 rows of data with four icons in … The post Which SVG technique performs best for way too many icons? appeared first...

Favicons: How to Make Sure Browsers Only Download the SVG Version


Šime Vidas DM’d me the other day about this thread from subzey on Twitter. My HTML for favicons was like this: <!-- Warning! Typo! --<link rel="icon" href="/favicon.ico" size="any"<link rel="icon" href="/favicon.svg" type="image/svg+xml" The attribute size is a typo there...

Collective #685


CookLang * Next.js 12 * Building an effective Image Component * Flatmap * Obsidian The post Collective #685 appeared first on Codrops

Grainy Gradients


Browse through Dribbble or Behance, and you’ll find designers using a simple technique to add texture to an image: noise. Adding noise makes otherwise solid colors or smooth gradients, such as shadows, more realistic. But despite designers’ affinity for texture, … The post Grainy Gradients...

How I Made a Generator for SVG Loaders With Sass and SMIL Options


While learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let’s take a look at one of those tools: a generator that makes SVG loaders and … The post How I Made a Generator for SVG Loaders With Sass and SMIL...

Cutouts


Ahmad Shadeed dug into shape “cutouts” the other day. Imagine a shape with another smaller shape carved out of it. In his typical comprehensive way, Ahmad laid out the situation well—looking at tricky situations that complicate things. The first thing … The post Cutouts appeared...

Superhero Animation Effect with SVG Filters


Learn how to create an interactive superhero-like illustration effect for the web using SVG filters and masks. The post Superhero Animation Effect with SVG Filters appeared first on Codrops

SVG Gobbler


Great little project from Ross Moody: SVG Gobbler is a browser extension that finds the vector content on the page you’re viewing and gives you the option to download, optimize, copy, view the code, or export it as an image. … The post SVG Gobbler appeared first on CSS-Tricks....

My Struggle to Use and Animate a Conic Gradient in SVG


The wonderful company I work for, Payoneer, has a new logo, and my job was to recreate it and animate it for a loader component in our app. I’ll explain exactly how I did it, share the problems I … The post My Struggle to Use and Animate a Conic Gradient in SVG appeared first on CSS-Tricks....

How to Create CSS Charts With Interesting Shapes, Glyphs and Emoji


Let’s forego the usual circles and bars we typically see used in charts for more eccentric shapes. With online presentations more and more common today, a quick way to spruce up your web slides and make them stand out is … The post How to Create CSS Charts With Interesting Shapes, Glyphs...

Adding Shadows to SVG Icons With CSS and SVG Filters


Why would we need to apply shadows to SVG? Shadows are a common design feature that can help elements, like icons, stand out. They could be persistent, or applied in different states (e.g. :hover, :focus, or :active) … The post Adding Shadows to SVG Icons With CSS and SVG Filters appeared...

svg-loader: A Different Way to Work With External SVG


SVGs are awesome: they are small, look sharp on any scale, and can be customized without creating a separate file. However, there is something I feel is missing in web standards today: a way to include them as an external … The post svg-loader: A Different Way to Work With External...

Swipey Image Grids


I hope people think of SVG as a vector format that is good for drawing things. There is plenty more to know, but here’s one more: SVG is good for composition. You draw things at very specific coordinates … The post Swipey Image Grids appeared first on CSS-Tricks. You can support...

How to Add a Double Border to SVG Shapes


Let’s say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you can’t use any graphic editor — they need to be generated at runtime — so you have to solve it … The post How to Add a Double Border to SVG Shapes appeared first on CSS-Tricks. You...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace