Skip to content
Style and design the first, second or both halves of a character
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
CoffeeScript
css
js
scss
README.md

README.md

#Splitchar.js - Website ###style and design the first, second or both halves of a character

Splitchar is an easy to use jQuery plugin that allows you to style half of a character

##Usage

<!-- Split horizontal - 2 colors -->
<h1 class="splitchar horizontal">Splitchar</h1>
<!-- Split horizontal - 3 colors -->
<h1 class="splitchar horizontal-tri">Splitchar</h1>
<!-- Split vertical - 2 colors -->
<h1 class="splitchar vertical">Splitchar</h1>
<!-- Split vertical - 3 colors -->
<h1 class="splitchar vertical-tri">Splitchar</h1>
<link rel="stylesheet" type="text/css" href="css/splitchar.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/splitchar.js"></script>
$(document).ready(function(){
    $(".splitchar").splitchar();
});

##Customization

/* Horizontal */
.horizontal { /* Base CSS - e.g font-size */ }
.horizontal:before { /* CSS for the left half */ }
.horizontal:after { /* CSS for the right half */ }

/* Horizontal Tripple */
.horizontal-tri { /* Base CSS + Middle style */ }
.horizontal-tri:before { /* CSS for the left side */ }
.horizontal-tri:after { /* CSS  for the right side */ }

/* Vertical */
.vertical { /* Base CSS */ }
.vertical:before { /* CSS for the upper half */ }
.vertical:after { /* CSS for the lower half */ }

/* Vertical Tripple */
.vertical-tri { /* Base CSS + Lower half */ }
.vertical-tri:before { /* CSS for the middle part */ }
.vertical-tri:after { /* CSS for the upper part */ }

##License

##Changelog

  • v1.1.0 - Multiple Split Styles
  • v1.0.0 - First Release

##Author

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.