Author: | ZeroSpree |
---|---|
Views Total: | 128 views |
Official Page: | Go to website |
Last Update: | February 29, 2020 |
License: | MIT |
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);