136 lines
3.8 KiB
HTML
136 lines
3.8 KiB
HTML
<!doctype html>
|
|
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
|
|
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
|
|
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
|
|
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
|
|
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
|
|
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
|
<title>Lettering.js Examples</title>
|
|
<meta name="description" content="A jQuery Plugin that allows you to style each individual letter and more.">
|
|
<meta name="author" content="Dave Rupert">
|
|
|
|
<meta name="viewport" content="width=device-width; initial-scale=1.0">
|
|
<link rel="stylesheet" href="style.css" type="text/css" media="screen"></link>
|
|
|
|
<style type="text/css" media="screen">
|
|
.demo {
|
|
padding: 50px;
|
|
border:1px solid #ccc;
|
|
font-weight:bold;
|
|
color: red;
|
|
background:#d0d0d0;
|
|
font-size:20px;
|
|
line-height:1.5;
|
|
text-align:center;
|
|
}
|
|
|
|
.demo h1 { font-size:72px; text-transform:uppercase; margin-bottom:0px;}
|
|
.char2,
|
|
#demo2 .word2,
|
|
.line2 { color: orange; }
|
|
.char3,
|
|
.word3,
|
|
.line3 { color: yellow; }
|
|
.char4,
|
|
.line4 { color: blue; }
|
|
.char5 { color: green; }
|
|
.char6 { color: indigo; }
|
|
.char7 { color: violet; }
|
|
</style>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
|
|
<script src="../jquery.lettering.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$("#demo1 h1").lettering();
|
|
$("#demo2 h1").lettering('words');
|
|
$("#demo3 p").lettering('lines');
|
|
$("#demo4 h1").lettering('words').children("span").lettering();
|
|
$("#demo5 h1").lettering().children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="container">
|
|
<header>
|
|
<h1 id="thebrand">Lettering.JS</h1>
|
|
<p>The following are some hokey examples of how you can implement LETTERING.JS.
|
|
</header>
|
|
|
|
<article id="main">
|
|
<section id='lettering-demo'>
|
|
<h2>Letters</h2>
|
|
<h4>The HTML</h4>
|
|
<pre><code> <div id="demo1" class="demo">
|
|
<h1>Rainbow</h1>
|
|
</div>
|
|
</code></pre>
|
|
|
|
<h4>The jQuery</h4>
|
|
<pre><code>$(document).ready(function() {
|
|
$("#demo1 h1").lettering();
|
|
});
|
|
</code></pre>
|
|
|
|
<h4>The Result</h4>
|
|
<div id="demo1" class="demo">
|
|
<h1>Rainbow</h1>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section id='words-demo'>
|
|
<h2>Words</h2>
|
|
<code><pre>$("#demo2 h1").lettering('words');</pre></code>
|
|
|
|
<h4>The Result</h4>
|
|
<div id="demo2" class="demo">
|
|
<h1>Hi, Multi Color</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<section id='lines-demo'>
|
|
<h2>Lines</h2>
|
|
<code><pre>$("#demo3 p").lettering('lines');</pre></code>
|
|
|
|
<h4>The Result</h4>
|
|
<div id="demo3" class="demo">
|
|
<p>This is an amazing<br/> Revolution in Typography. <br/> The possibilities are endless: <br/> Coloring, Vertical spacing, and Kerning.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id='advanced1-demo'>
|
|
<h2>Advanced #1: Chaining 2 Methods</h2>
|
|
<code><pre>$("#demo4 h1").lettering('words').children("span").lettering();</pre></code>
|
|
<h4>The Result</h4>
|
|
<div id="demo4" class="demo">
|
|
<h1>Double Rainbow</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<section id='advanced2-demo'>
|
|
<h2>Advanced #2: Chaining and Styling</h2>
|
|
<code><pre>$("#demo5 h1").lettering()
|
|
.children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});</pre></code>
|
|
<h4>The Result</h4>
|
|
<div id="demo5" class="demo">
|
|
<h1>WOOOoo!</h1>
|
|
</div>
|
|
</section>
|
|
|
|
</article>
|
|
|
|
<footer>
|
|
<p>©2010 Dave Rupert <a href="http://daverupert.com">http://daverupert.com</a>
|
|
</footer>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|