• Stars
    star
    248
  • Rank 163,176 (Top 4 %)
  • Language
    CSS
  • Created over 10 years ago
  • Updated about 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Style and design the first, second or both halves of a character

#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