loading...
Cover image for Yin and yang - Pure CSS, transparent, single element icon

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

astrit profile image Astrit ・2 min read

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:

  1. Single HTML tag
  2. No colored negative space, only transparent
  3. Scale Good
  4. No path
  5. 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.

GitHub logo astrit / css.gg

500+ CSS Icons. Customizable, Retina Ready with API & NPM

css.gg

Minimalistic Icon library Designed by code.
Customizable & Retina-Ready icons entirely built in CSS.

App: https://css.gg

css.gg GitHub package.json version npm GitHub last commit Website npm GitHub issues GitHub stars

css.gg

Features

  1. API endpoint
  2. Lightweight
  3. Accessible
  4. Agile
  5. Retina Ready
  6. Compilable

Getting started

Access all the icons as package:

Name Source
CLI npm i -S css.gg
CSS https://css.gg/c
JSON https://css.gg/json
XML https://css.gg/xml

This package CDN alternatives

JSON
https://unpkg.com/css.gg
https://cdn.jsdelivr.net/npm/css.gg
CSS
https://unpkg.com/css.gg/icons-compressed/icons.css
https://cdn.jsdelivr.net/npm/css.gg/icons-compressed/icons.css
XML
https://unpkg.com/css.gg/icons-xml/icons.xml
https://cdn.jsdelivr.net/npm/css.gg/icons-xml/icons.xml

Add icons in your project

1. Markup

The class name starts always with "gg-" followed by icon name.

<i class="gg-icon-name"></i>
Resizing

To resize an icon you just need to change the value of a css variable "--ggs" to any value you like if not specified it falls back to 1 or the actual size.

.gg-icon-name {
    /* This value will multiple the actual size  */
    --ggs: 10
}

The variable can be added to the parent, custom class,body or root…

Would love to see your approach on this with as less CSS as possible.

AM

Posted on Feb 7 by:

astrit profile

Astrit

@astrit

Front-end Developer, creator of https://css.gg

Discussion

markdown guide
 

You are crazy, and I love it !

 

Thanks for the explanation, Astrit! You achieve a lot by just using "3 elements" (1 element and 2 pseudo), is great! πŸ’–