DEV Community: Astrit

Config 2023 - auto layout wrap, developer mode, prototyping & variables

Astrit — Thu, 22 Jun 2023 08:02:21 +0000

Yesterday's Config 2023 update brought long-awaited features such as wrapped auto layout and variables. Here's a short recap from me.

👉 https://www.youtube.com/watch?v=qfp4gqrI-Mg

A deep dive into the CSS color-mix() function and future of colors on the web.

Astrit — Sat, 01 Apr 2023 16:54:56 +0000

I have always been fascinated by the power of colors in shaping the visual appeal of websites even tho I always considered a very hard problem to tacle scientifically. With the upcoming CSS color-mix() function, I am excited to share my insights and experiments with this groundbreaking feature that is set to change the way we work with colors in our projects and especially design systems.

In this detailed and personal exploration, I will discuss the color-mix() function from my perspective, delving into various color spaces, such as HSL, RGB, LCH, and sRGB, and providing in-depth examples to showcase the versatility and potential of this innovative addition to the CSS specification. Furthermore, we will explore the benefits of incorporating the color-mix() function into design systems with tokens, along with examples showcasing how to work with colors and their alpha values, as well as using CSS custom properties on the :root element.

The Science Behind the CSS `color-mix()` Function

The color-mix() function is an upcoming addition to the CSS Color Module Level 5 specification. Its primary purpose is to blend two or more colors together, generating a new color based on specified ratios. The blending process is dependent on the color space in which the colors are combined.

Color Spaces: A Brief Overview

A color space is a specific organization of colors that allows for reproducible representations of these colors in both digital and physical mediums. There are several color spaces used in web design, each with its own unique characteristics:

RGB: The Red-Green-Blue color space is an additive color model in which red, green, and blue light are combined in various ways to produce a broad range of colors. It is the most commonly used color space for digital images and web design.
HSL: The Hue-Saturation-Lightness color space represents colors using three components: hue, saturation, and lightness. This color model is designed to be more intuitive and perceptually relevant than the RGB model.
LCH: The Lightness-Chroma-Hue color space is a cylindrical representation of the CIELAB color space, which is designed to be perceptually uniform. LCH aims to provide a more accurate representation of how humans perceive color differences.
sRGB: The standard Red-Green-Blue color space is a widely-used RGB color space that provides consistent color reproduction across various devices and platforms.

Delving into the Syntax

The syntax for the color-mix() function is as follows:

color-mix(<colorspace>, <color> <percentage>, <color> <percentage>, ...);

<colorspace>: The color space in which the blending will occur. It can be one of the following: srgb, display-p3, lab, or lch.
<color>: The colors to be mixed together. These can be specified using various color models, such as RGB, HSL, or LCH.
<percentage>: The weight of each color in the mix. The sum of all percentages must equal 100%.

A Comprehensive Exploration of Examples

To better understand the power and versatility of the color-mix() function, let's examine examples across various color spaces and color models.

Example 1: Blending RGB Colors in sRGB Color Space

:root {
  --cm-color-red: rgb(0 145 255);
  --cm-color-blue: rgb(0, 0, 255);
}

.rgb-srgb-mix {
  background-color: color-mix(
    srgb,
    var(--cm-color-red) 50%,
    var(--cm-color-blue) 50%
  );
}

In this example, we're blending equal parts saturated azure and blue (50% each) in the sRGB color space. The resulting color will be a neon blue.

Example 2: Blending HSL Colors in LCH Color Space

:root {
  --cm-color-red: hsl(0, 100%, 50%);
  --cm-color-blue: hsl(240, 100%, 50%);
}

.hsl-lch-mix {
  background-color: color-mix(
    lch,
    var(--cm-color-red) 70%,
    var(--cm-color-blue) 30%
  );
}

Here, we're blending 70% red and 30% blue, represented in HSL, in the LCH color space. The resulting color will be a vibrant shade of pinkish-purple.

Example 3: Blending LCH Colors in LCH Color Space

:root {
  --cm-color-one: lch(50% 100 0);
  --cm-color-two: lch(50% 100 180);
}

.lch-lch-mix {
  color: color-mix(lch, var(--cm-color-one) 60%, var(--cm-color-two) 40%);
}

In this example, we're blending 60% of an LCH color with a lightness of 50%, chroma of 100, and hue of 0 degrees, with 40% of another LCH color with a lightness of 50%, chroma of 100, and hue of 180 degrees. The resulting color will be a bright shade of greenish-cyan.

Example 4: Working with Colors and Their Alpha Values

.alpha-mix {
  background-color: color-mix(
    srgb,
    rgba(255, 0, 0, 0.5) 50%,
    rgba(0, 0, 255, 0.5) 50%
  );
}

In this example, we're blending equal parts red and blue with 50% alpha values in the sRGB color space. The resulting color will be a semi-transparent shade of purple.

Example 5: Using CSS Custom Properties on the `:root`

:root {
  --cm-brand-accent: lightseagreen;
  --cm-color: hsla(96, 78%, 45%, 1);
  --cm-color-a10: color-mix(in srgb, var(--cm-color), transparent 90%);
  --cm-color-a20: color-mix(in srgb, var(--cm-color), transparent 80%);
  --cm-color-a30: color-mix(in srgb, var(--cm-color), transparent 70%);
  --cm-color-a40: color-mix(in srgb, var(--cm-color), transparent 60%);
  --cm-color-a50: color-mix(in srgb, var(--cm-color), transparent 50%);
  --cm-color-a60: color-mix(in srgb, var(--cm-color), transparent 40%);
  --cm-color-a70: color-mix(in srgb, var(--cm-color), transparent 30%);
  --cm-color-a80: color-mix(in srgb, var(--cm-color), transparent 20%);
  --cm-color-a90: color-mix(in srgb, var(--cm-color), transparent 10%);
  --cm-color-dark: color-mix(in hsl, var(--cm-brand-accent), blue 10%);
}

.cm-a10 { color: var(--cm-color-a10) }
.cm-a20 { color: var(--cm-color-a20) }
.cm-a30 { color: var(--cm-color-a30) }
.cm-a40 { color: var(--cm-color-a40) }
.cm-a50 { color: var(--cm-color-a50) }
.cm-a60 { color: var(--cm-color-a60) }
.cm-a70 { color: var(--cm-color-a70) }
.cm-a80 { color: var(--cm-color-a80) }
.cm-a90 { color: var(--cm-color-a90) }
.cm-a00 { color: var(--cm-color) }

In this example, we're using CSS custom properties to define our base colors on the :root element. We then use the color-mix() function to change the transaprency based from the HSL color space, but it can be any color for that matter.

Examole 6: Using calc function

The relative color syntax allows you to use channel keywords in any position for various purposes, such as creating a simple grayscale approximation of a color:

:root {
  --cm-color: red;
  --cm-red-to-gray: rgb(
    from var(--color) calc(r * 0.3 + g * 0.59 + b * 0.11) calc(
        r * 0.3 + g * 0.59 + b * 0.11
      ) calc(r * 0.3 + g * 0.59 + b * 0.11)
  );
}

.cm-red-gray {
  color: var(--cm-red-to-gray);
}

This method converts colors like red to rgb(30% 30% 30%), lime to rgb(59% 59% 59%), and blue to rgb(11% 11% 11%). However, this approach is not entirely accurate as it uses gamma-encoded space and obsolete NTSC color space weighting factors.

A more accurate and simpler way to grayscale a color is to use the oklch() function, which is better suited to human perception:

:root {
  --cm-color: red;
  --cm-oklch: oklch(from var(--color) l 0 h);
}

.cm-oklch {
  color: var(--cm-oklch);
}

This method preserves the lightness while zeroing out the chroma, which determines the colorfulness of the color.

Leveraging the Color-Mix Function in Design Systems with Tokens and Figma Integration

Design systems are essential for maintaining visual consistency and streamlining the design process across large-scale projects. By incorporating the color-mix() function into a design system, we can enhance the flexibility and adaptability of color management.

Benefits of Incorporating the Color-Mix Function into a Design System

Incorporating the color-mix() function into a design system can significantly improve the design process and provide various benefits for designers. Here are some advantages:

Dynamic color manipulation: The color-mix() function allows designers to create a wide range of color variations based on predefined color tokens. This flexibility makes it easier to manage and adjust colors within the design system, reducing the need for manual color adjustments.
Adaptive color themes: The color-mix() function can be used to generate color themes that adapt to different contexts, such as light and dark modes, by blending base colors with varying ratios. This adaptability simplifies the creation of context-aware designs and ensures visual consistency across different environments.
Improved color consistency: Using the color-mix() function to blend colors ensures consistency across the design system, as colors are derived from a set of predefined tokens. This consistency makes it easier for designers to maintain a cohesive visual language throughout the project.
Efficient color exploration: The color-mix() function enables designers to quickly explore various color combinations and find the perfect balance for their designs. This efficiency reduces the time spent on trial and error, allowing designers to focus on other aspects of the design process.
Easier collaboration: By integrating the color-mix() function into a design system, designers can share and collaborate on color schemes more effectively. This integration promotes a unified approach to color management and helps maintain visual coherence across large-scale projects involving multiple designers.

In conclusion, incorporating the color-mix() function into a design system can greatly enhance the design process, making it easier for designers to manage colors, create adaptive themes, and maintain visual consistency. By leveraging this powerful function, designers can focus on delivering a more polished and cohesive user experience.

Browser Support for the CSS Color-Mix Function

As the color-mix() function is a relatively new addition to the CSS specification, it's important to be aware of the current state of browser support. Ensuring compatibility across different browsers is crucial for providing a consistent user experience.

Current Browser Support

At the time of writing (knowledge cutoff in September 2021), the color-mix() function is not yet widely supported by major browsers. However, browser vendors are actively working on implementing this feature, and support is expected to improve over time.

To stay up-to-date with the latest browser support information, you can refer to resources such as Can I use and the MDN Web Docs. These platforms provide accurate and current details on browser compatibility for various web technologies, including the color-mix() function.

Strategies for Handling Limited Browser Support

While waiting for broader browser support, you can employ several strategies to ensure your designs remain functional and visually consistent for users on unsupported browsers:

Fallback styles: Provide alternative color definitions for browsers that do not support the color-mix() function. Use the @supports rule in your CSS to detect support for the function and apply fallback styles accordingly.

   .example {
     background-color: purple; /* Fallback color for unsupported browsers */
   }

   @supports (background-color: color-mix(srgb, red 50%, blue 50%)) {
     .example {
       background-color: color-mix(srgb, red 50%, blue 50%);
     }
   }

Progressive enhancement: Design your website with a basic color scheme that works well on all browsers, and then enhance the design with the color-mix() function for browsers that support it. This approach ensures that all users have a functional and visually appealing experience, regardless of their browser's capabilities.
Polyfills: Although there aren't any widely-used polyfills for the color-mix() function at the moment, you can keep an eye out for future developments in this area. Polyfills can help bridge the gap in browser support by providing a JavaScript-based implementation of the function for unsupported browsers.

Conclusion

While browser support for the CSS color-mix() function is currently limited, it's essential to keep track of the latest developments in browser compatibility. By employing strategies such as fallback styles and progressive enhancement, you can ensure that your designs remain visually consistent and functional across different browsers. As support for the color-mix() function improves, it's expected to become an invaluable tool for web designers and developers in creating dynamic and adaptable color schemes.

Ref:

CSS Color Module Level 5 — MDN color-mix() — Browser Support

Follow me: Github — Youtube

Full Page: 20 Advanced CSS & HTML techniques: clip-path, @property, aspect-ratio and blend-mode

Astrit — Sat, 20 Mar 2021 23:32:57 +0000

https://www.youtube.com/watch?v=PpheLuPbP5Y

🔴 CSS Battle #13 - Live March 18, 20:00 CET

Astrit — Wed, 17 Mar 2021 16:24:01 +0000

Tomorrow, Thu 18 - 20:00 CET
The new #13 CSSBattle.dev is going down live.

🔴 https://a.st/live

Don't let this one flop be there and don't forget to "SET REMINDER"

Let's show Dev Ed, Kevin Powell, Jh3y how this is done 💪

This is Spartaaaa !!!

😅 not really Jh3y especially would make those pixels bleed.

Full Page: 20 Advanced CSS & HTML techniques: clip-path, @property, aspect-ratio and blend-mode

Astrit — Sat, 06 Mar 2021 15:58:45 +0000

Today I am sharing with you this advanced CSS & HTML tutorial where we are going to go through some of the best techniques to achieve the effect that you see on this landing page like mix-blend-mode, clip-path, position: sticky, css grid and what not.

This is a 2hr long tutorial where I explain how I build that demo landing page start to finnish and along the way you can find some very interesting things.

We are going to build an entire landing page with a hero, gallery, list, object rotation and the final section position sticky horizontally.

Note that time to time I might have mixed the words but please don't mind me this has been a very long tutorial and just my second video.

Source:

https://github.com/astrit/youtube

Demo:
https://css.gg/epic/index.html

CSS.GG + Vercel & Updates

Astrit — Wed, 24 Feb 2021 12:52:21 +0000

Hello everyone,

Long time no see. Short update.

First of all thank you to every single one of you who has contributed for this project to be where it is, with a single like, star or using it on your project.

So far this has been incredible
7,140 Stars on Github
17,000 Figma copies

And much more that I can't even track

Thank you.

astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

Demo - Figma - Twitter

Open-source CSS, SVG and Figma UI Icons
Available in SVG Sprite, styled-components, NPM & API

New in 2.0

🥳 200 New Icons

🚀 SVG Icons

🔥 SVG Sprite

💅 Styled Components

⚛️ React Local Styled Components

🦄 Figma Components

🔮 Adobe XD Components

View on GitHub

Now to the fun stuff.

I have been working on the new version and trying to listen to the feedback that people got and also checking the analytics on what people are using most.

As a conclusion the SVG version naturally is being used more, after that the Figma version mainly by UI Designers.

Based on this I decided to do the new version on SVG primarily with the CSS version being there as a downloadable option.

Also I have been developing some other modules* that are going to be part of the project so stay tuned for this when I announce on twitter and youtube

🍒 And the cherry on top.

Getting sponsored by Vercel.

I totally forgot to announce since I was working on the project and wanted to do it on the release but not here we go.

So I would like to personally thank Guillermo from Vercel for making this happen and enabling me to use my favourite framework and platform on the new version.

Plug:
As you might already know I have started to create videos on youtube and if you like my work or you want to learn how to do CSS animations please make sure to subscribe

CSS Animation: translate3d, backdrop-filter and custom tags

Astrit — Thu, 18 Feb 2021 19:31:09 +0000

Hello everyone,

On this tutorial we are going to learn on how to create a smooth animation using CSS transform translate3d prop, why to use cubic-bezier transition timing function and its benefits.

How and why to use custom tags. And if you watch the video by the end I also did a bonus tip using backdrop-filter to have some frost/blur style on background.

Topics:

Why and how to use the translate3d
Why and how to use cubic-bezier
Using custom tags
Apply color by using currentColor
Using backdrop-filter

Don't forget to subscribe ✌️

Source:

https://github.com/astrit/youtube

Demos:
Blackhole: https://codepen.io/astrit/pen/KKMjZEz

Links:
https://github.com/astrit
https://twitter.com/astritmalsija
https://codepen.io/astrit

css.gg 2.0

Astrit — Thu, 23 Apr 2020 11:29:16 +0000

css.gg 2.0 is out now
700 UI Icons in Pure CSS, SVG & Figma

🔥 200 New Icons
🔥 SVG Icons by figma.com/@lona
🔥 SVG Sprite by figma.com/@lona
🔥 Styled Components - ⚛ React JS
🔥 Local Styled Components
🔥 Figma Components - css.gg/fig
🔥 Adobe XD Components - css.gg/xd

astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons, 6000+ glyphs, patterns, colors and layouts.

CSS＊GG

A comprehensive, open-source CSS icons library.
Featuring Vanilla CSS, SVG and Figma UI icons

Now also a collection of well organised 6000 Unique Glyphs,
easy copy paste and available on the raycast extension.

Update 2024-08-26

The new version is live on the website, with a new design and a new way to browse the icons.
Soon to be released as a Figma plugin and the new version of the library.

Other resources: YouTube, Figma, Raycast, GLYF＊APP

Support

If you want to support further development of this project consider becoming a sponsor

Github Sponsor — github.com/sponsors/astrit

View on GitHub

Pure CSS & SVG text cursor

Astrit — Tue, 24 Mar 2020 17:11:44 +0000

Hello friends 👋,

I just made this little tutorial on how to create a custom cursor with text using only CSS and SVG.

Check it out:

500 ⭐'s on Github - css.gg

Astrit — Wed, 26 Feb 2020 14:39:15 +0000

css.gg just reached 500 ⭐️ on Github.

Thank you very much from the bottom of my ❤️ to every single one of you who supported me all this time.

Cheers 🎉🍾🥂🥳

astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

Demo - Figma - Twitter

Open-source CSS, SVG and Figma UI Icons
Available in SVG Sprite, styled-components, NPM & API

New in 2.0

🥳 200 New Icons

🚀 SVG Icons

🔥 SVG Sprite

💅 Styled Components

⚛️ React Local Styled Components

🦄 Figma Components

🔮 Adobe XD Components

View on GitHub

Pure CSS outlined triangle using only borders △△△△△△△

Astrit — Thu, 20 Feb 2020 00:06:05 +0000

Doing the new icons for css.gg has been more difficult than I expected because I am reaching the limits of what I can do purely on CSS, as it is well known you can't create a Triangle on CSS without hacks such as border and nonetheless a outlined one.

Knowing that this could be a bit harder for beginners and in fact to share with you guys my approach I decided to create this mini tutorial.

First

Create the box with transparent borders on the side to create the angle which we will use later, for sake of demonstration will show side borders as semi transparent, on final step side borders should be transparent.

Border style breakdown



.gg-shape-triangle {
    display: block ;
    position: relative;
    box-sizing: border-box;
    width: 22px ;
    height: 17px;

    /*  01  */
    border-left-width: 3px;    
    border-left-style: solid;
    border-left-color: transparent;

    /*  02  */
    border-right-width: 3px;
    border-right-style: solid;
    border-right-color: transparent;

    /*  03  */
    border-down-width: 3px;
    border-down-style: solid;
    border-down-color: initial

}

Now will use pseudo selector "::before" to build a rectangle with left & top border, rotate it and skew so it can fit exactly with the bottom border of the parent it will look like this:



.gg-shape-triangle::before {
    content: "";
    display: block;
    position: absolute;
    box-sizing: border-box;
    width: 20px;
    height: 20px;

    /*  Left Border */
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: initial;

    /*  Top Border */
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: initial;

    /*  Bottom Border */
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: transparent;

    /*  Rotate it to 45deg and skew  */
    transform: rotate(45deg) skew(10deg,10deg);

    /*  Position it until you meet the corners  */
    left: -2px;
    bottom: -13px
}

This is how the borders will overlap

The final style



.gg-shape-triangle {
    position: relative;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 17px;
    border-left: 3px solid transparent;
    border-bottom: 3px solid
}
.gg-shape-triangle,
.gg-shape-triangle::before {
    display: block;
    box-sizing: border-box;
    border-right: 3px solid transparent
}
.gg-shape-triangle::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-left: 3px solid;
    border-top: 3px solid;
    border-bottom: 3px solid transparent;
    transform: rotate(45deg) skew(10deg,10deg);
    left: -2px;
    bottom: -13px
}

Benefits are that you can scale it with transform or use units such as "em".
Also use it over any background.

Stay tuned for the update.
Will share all what I learn along the way.

For more check the repo with all the icons:

astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons, 6000+ glyphs, patterns, colors and layouts.

CSS＊GG

A comprehensive, open-source CSS icons library.
Featuring Vanilla CSS, SVG and Figma UI icons

Now also a collection of well organised 6000 Unique Glyphs,
easy copy paste and available on the raycast extension.

Update 2024-08-26

The new version is live on the website, with a new design and a new way to browse the icons.
Soon to be released as a Figma plugin and the new version of the library.

Other resources: YouTube, Figma, Raycast, GLYF＊APP

Support

If you want to support further development of this project consider becoming a sponsor

Github Sponsor — github.com/sponsors/astrit

View on GitHub

Inspired by:
https://dev.to/adriantwarog/learn-how-to-make-a-triangle-in-css-once-and-for-all-2pfe

Yin and yang - Pure CSS, transparent, single element icon

Astrit — Fri, 07 Feb 2020 02:04:45 +0000

As you might already know I have created recently css.gg a pure CSS Icon library.
So now on the v2 I am trying to add 200 more icons for a 700 total.

This library has some restrictions such as:

Single HTML tag
No colored negative space, only transparent
Scale Good
No path
No data-uri PNG or SVG

So everything is harder as if I would do it on multiple tags and not transparent.

So here is my approach.

Step 1

First I created as usual a circle with 2px border and note how I do not specify when not needed the color so it inherits from the parent, when is a must I use currentColor.

.gg-yinyang {
  box-sizing: border-box;
  position: relative;
  display: block;
  /* ^ this is only to contain the icon as box is applied on all icons */

  width: 20px;
  height: 20px;
  border: 2px solid;
  border-radius: 22px
}

Step 2

Now second step to create pseudo elements with half of the parent width minus the border and positioned center vertically. I do always fixed pixels to contain it and for better cross-browser support.


.gg-yinyang::after,
.gg-yinyang::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  top: 4px
}

Step 3

The ::before pseudo selector needs to be on the left and with standard border

.gg-yinyang::before {
  border: 2px solid;
  left: 0
}

Step 4

Now comes the most challenging, tricky & ugly part where I cover the rest of the area with the box shadow of the ::after pseudo selector

.gg-yinyang::after {
  border: 2px solid transparent;
  right: 0;
  box-shadow:
    inset 0 0 0 4px,
    0 -3px 0 1px,
    -2px -4px 0 1px,
    -8px -5px 0 -1px,
    -11px -3px 0 -2px,
    -12px -1px 0 -3px,
    -6px -6px 0 -1px
}

Final Result

Animated

This version also has as unit em where I am looking to switch for all the icons, better performance specially on animation.

For more please check the current icons on github and give it a ⭐ if you like it.

astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

Demo - Figma - Twitter

Open-source CSS, SVG and Figma UI Icons
Available in SVG Sprite, styled-components, NPM & API

DEV Community: Astrit

Config 2023 - auto layout wrap, developer mode, prototyping & variables

A deep dive into the CSS color-mix() function and future of colors on the web.

The Science Behind the CSS color-mix() Function

Color Spaces: A Brief Overview

Delving into the Syntax

A Comprehensive Exploration of Examples

Example 1: Blending RGB Colors in sRGB Color Space

Example 2: Blending HSL Colors in LCH Color Space

Example 3: Blending LCH Colors in LCH Color Space

Example 4: Working with Colors and Their Alpha Values

Example 5: Using CSS Custom Properties on the :root

Examole 6: Using calc function

Leveraging the Color-Mix Function in Design Systems with Tokens and Figma Integration

Benefits of Incorporating the Color-Mix Function into a Design System

Browser Support for the CSS Color-Mix Function

Current Browser Support

Strategies for Handling Limited Browser Support

Conclusion

Ref:

Follow me: Github — Youtube

Full Page: 20 Advanced CSS & HTML techniques: clip-path, @property, aspect-ratio and blend-mode

🔴 CSS Battle #13 - Live March 18, 20:00 CET

Full Page: 20 Advanced CSS & HTML techniques: clip-path, @property, aspect-ratio and blend-mode

CSS.GG + Vercel & Updates

astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

Demo - Figma - Twitter

New in 2.0

🥳 200 New Icons

🚀 SVG Icons

🔥 SVG Sprite

💅 Styled Components

⚛️ React Local Styled Components

🦄 Figma Components

🔮 Adobe XD Components

Table of Contents

CSS Animation: translate3d, backdrop-filter and custom tags

css.gg 2.0

astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons, 6000+ glyphs, patterns, colors and layouts.

CSS＊GG

Update 2024-08-26

Support

Github Sponsor — github.com/sponsors/astrit

Pure CSS & SVG text cursor

Check it out:

500 ⭐'s on Github - css.gg

astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

Demo - Figma - Twitter

New in 2.0

🥳 200 New Icons

🚀 SVG Icons

🔥 SVG Sprite

💅 Styled Components

⚛️ React Local Styled Components

🦄 Figma Components

🔮 Adobe XD Components

Table of Contents

Pure CSS outlined triangle using only borders △△△△△△△

First

The final style

astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons, 6000+ glyphs, patterns, colors and layouts.

CSS＊GG

Update 2024-08-26

Support

Github Sponsor — github.com/sponsors/astrit

Yin and yang - Pure CSS, transparent, single element icon

Step 1

Step 2

Step 3

Step 4

Final Result

Animated

astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

Demo - Figma - Twitter

New in 2.0

The Science Behind the CSS `color-mix()` Function

Example 5: Using CSS Custom Properties on the `:root`