Generate Geometric Art Text With CSSans Pro

Preview:

Description:

CSSans Pro is a CSS font library to create colorful geometric art text using JavaScript or pure CSS.

How to use it:

1. Load the core stylesheet in the document.

<!-- For Modern Browsers -->
<link href="dist/cssans.min.css" rel="stylesheet" />
<!-- For Legacy Browsers (IE) -->
<link href="dist/cssans.min.ie.css" rel="stylesheet" />

2. Insert characters to a ‘word’ container. That’s it.

<div class="cssans">
  <div class="cssans__word">
    <b class="cssans:C"></b>
    <b class="cssans:S"></b>
    <b class="cssans:S"></b>
    <b class="cssans:S"></b>
    <b class="cssans:C"></b>
    <b class="cssans:R"></b>
    <b class="cssans:I"></b>
    <b class="cssans:P"></b>
    <b class="cssans:T"></b>
    <b class="cssans:."></b>
    <b class="cssans:C"></b>
    <b class="cssans:O"></b>
    <b class="cssans:M"></b>
  </div>
</div>

3. Make your text fully accessible via by adding the ‘cssans__accessible’ class to the container.

<div class="cssans">
  <div class="cssans__accessible">CSSScript.COM</div>
  <div class="cssans__word">
    <b class="cssans:C"></b>
    <b class="cssans:S"></b>
    <b class="cssans:S"></b>
    <b class="cssans:S"></b>
    <b class="cssans:c"></b>
    <b class="cssans:r"></b>
    <b class="cssans:i"></b>
    <b class="cssans:p"></b>
    <b class="cssans:t"></b>
    <b class="cssans:."></b>
    <b class="cssans:C"></b>
    <b class="cssans:o"></b>
    <b class="cssans:m"></b>
  </div>
</div>

4. Align your text.

<div class="cssans cssans--center">
  ...
</div>
<div class="cssans cssans--right">
  ...
</div>

5. Make your text slanted (italic).

<div class="cssans cssans--slanted">
  ...
</div>

6. You can also implement the library via JavaScript.

<link href="dist/cssans.min.css" rel="stylesheet" />
<script src="dist/cssans.min.js"></script>

<div id="example" class="cssans--slanted">CSSScript.Com</div>

var element = document.getElementById('example');
var text = element.innerText;
CSSans(element, text);