mirror of
https://github.com/andrewgioia/keyrune.git
synced 2024-12-22 23:49:56 +00:00
New example shows the css rarity gradient on Webkit browsers
This commit is contained in:
Andrew Gioia
parent
7745fff4b3
commit
646af51cd4
4
bower_components/keyrune/.bower.json
vendored
4
bower_components/keyrune/.bower.json
vendored
@ -18,11 +18,11 @@
|
|||||||
"*.json",
|
"*.json",
|
||||||
"*.md"
|
"*.md"
|
||||||
],
|
],
|
||||||
"_release": "f899d84794",
|
"_release": "8e89b507fb",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "branch",
|
"type": "branch",
|
||||||
"branch": "master",
|
"branch": "master",
|
||||||
"commit": "f899d84794bc720b1fb5cec5ecd0c96ad988beb5"
|
"commit": "8e89b507fbfd74b58fd33d8b1b4409ff4269a083"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/andrewgioia/keyrune.git",
|
"_source": "git://github.com/andrewgioia/keyrune.git",
|
||||||
"_target": "*",
|
"_target": "*",
|
||||||
|
|||||||
46
bower_components/keyrune/css/keyrune.css
vendored
46
bower_components/keyrune/css/keyrune.css
vendored
@ -41,16 +41,56 @@
|
|||||||
/**
|
/**
|
||||||
* Rarity colors */
|
* Rarity colors */
|
||||||
.ss-common {
|
.ss-common {
|
||||||
color: #333;
|
color: #1A1718;
|
||||||
|
}
|
||||||
|
.ss-common.ss-grad {
|
||||||
|
/* webkit outline/gradient */
|
||||||
|
background: -webkit-gradient(linear, left top, right top, color-stop(1%, #302b2c), color-stop(50%, #474040), color-stop(100%, #302b2c));
|
||||||
|
/* Chrome,Safari4+ */
|
||||||
|
background: -webkit-linear-gradient(left, #302b2c 1%, #474040 50%, #302b2c 100%);
|
||||||
|
/* Chrome10+,Safari5.1+ */
|
||||||
|
-webkit-text-stroke: 0.03em #000;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
.ss-uncommon {
|
.ss-uncommon {
|
||||||
color: #7795A1;
|
color: #707883;
|
||||||
|
}
|
||||||
|
.ss-uncommon.ss-grad {
|
||||||
|
/* webkit outline/gradient */
|
||||||
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5a6572), color-stop(50%, #9e9e9e), color-stop(100%, #5a6572));
|
||||||
|
/* Chrome,Safari4+ */
|
||||||
|
background: -webkit-linear-gradient(left, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
|
||||||
|
/* Chrome10+,Safari5.1+ */
|
||||||
|
-webkit-text-stroke: 0.03em #111;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
.ss-rare {
|
.ss-rare {
|
||||||
color: #A58E4A;
|
color: #A58E4A;
|
||||||
}
|
}
|
||||||
|
.ss-rare.ss-grad {
|
||||||
|
/* webkit outline/gradient */
|
||||||
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #876a3b), color-stop(50%, #dfbd6b), color-stop(100%, #876a3b));
|
||||||
|
/* Chrome,Safari4+ */
|
||||||
|
background: -webkit-linear-gradient(left, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
|
||||||
|
/* Chrome10+,Safari5.1+ */
|
||||||
|
-webkit-text-stroke: 0.03em #333;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
.ss-mythic {
|
.ss-mythic {
|
||||||
color: #A2472A;
|
color: #BF4427;
|
||||||
|
}
|
||||||
|
.ss-mythic.ss-grad {
|
||||||
|
/* webkit outline/gradient */
|
||||||
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #b21f0f), color-stop(50%, #f38300), color-stop(100%, #b21f0f));
|
||||||
|
/* Chrome,Safari4+ */
|
||||||
|
background: -webkit-linear-gradient(left, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
|
||||||
|
/* Chrome10+,Safari5.1+ */
|
||||||
|
-webkit-text-stroke: 0.03em #333;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* Fixed width */
|
* Fixed width */
|
||||||
|
|||||||
2
bower_components/keyrune/css/keyrune.min.css
vendored
2
bower_components/keyrune/css/keyrune.min.css
vendored
File diff suppressed because one or more lines are too long
51
bower_components/keyrune/index.html
vendored
Normal file
51
bower_components/keyrune/index.html
vendored
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
|
||||||
|
<title>Keyrune</title>
|
||||||
|
<link rel="stylesheet" href="css/keyrune.css" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||||
|
<style type="text/css">
|
||||||
|
body {
|
||||||
|
color: #333;
|
||||||
|
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
|
||||||
|
Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6em;
|
||||||
|
padding: 0 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Keyrune</h1>
|
||||||
|
<h2>Set Symbol Demos</h2>
|
||||||
|
<p>
|
||||||
|
This HTML file is for demo purposes and is not necessary for Keyrune installation or use. You can view a few of the set symbol font icons and the available examples below (some may only be available for specific browsers).
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<i class="ss ss-leg ss-3x ss-common ss-grad"></i>
|
||||||
|
<i class="ss ss-leg ss-2x ss-common"></i>
|
||||||
|
<i class="ss ss-leg ss-common"></i>
|
||||||
|
Common (Legends)
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<i class="ss ss-ons ss-3x ss-uncommon ss-grad"></i>
|
||||||
|
<i class="ss ss-ons ss-2x ss-uncommon"></i>
|
||||||
|
<i class="ss ss-ons ss-uncommon"></i>
|
||||||
|
Uncommon (Onslaught)
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<i class="ss ss-fut ss-3x ss-rare ss-grad"></i>
|
||||||
|
<i class="ss ss-fut ss-2x ss-rare"></i>
|
||||||
|
<i class="ss ss-fut ss-rare"></i>
|
||||||
|
Rare (Future Sight)
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<i class="ss ss-zen ss-3x ss-mythic ss-grad"></i>
|
||||||
|
<i class="ss ss-zen ss-2x ss-mythic"></i>
|
||||||
|
<i class="ss ss-zen ss-mythic"></i>
|
||||||
|
Mythic Rare (Worldwake)
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
48
bower_components/keyrune/less/rarities.less
vendored
48
bower_components/keyrune/less/rarities.less
vendored
@ -1,10 +1,50 @@
|
|||||||
/**
|
/**
|
||||||
* Rarity colors */
|
* Rarity colors */
|
||||||
|
|
||||||
.@{prefix}-common { color: #333; }
|
.@{prefix}-common {
|
||||||
|
color: #1A1718;
|
||||||
|
&.ss-grad {
|
||||||
|
/* webkit outline/gradient */
|
||||||
|
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#302b2c), color-stop(50%,#474040), color-stop(100%,#302b2c)); /* Chrome,Safari4+ */
|
||||||
|
background: -webkit-linear-gradient(left, #302b2c 1%,#474040 50%,#302b2c 100%); /* Chrome10+,Safari5.1+ */
|
||||||
|
-webkit-text-stroke: 0.03em #000;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.@{prefix}-uncommon { color: #7795A1; }
|
.@{prefix}-uncommon {
|
||||||
|
color: #707883;
|
||||||
|
&.ss-grad {
|
||||||
|
/* webkit outline/gradient */
|
||||||
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5a6572), color-stop(50%,#9e9e9e), color-stop(100%,#5a6572)); /* Chrome,Safari4+ */
|
||||||
|
background: -webkit-linear-gradient(left, #5a6572 0%,#9e9e9e 50%,#5a6572 100%); /* Chrome10+,Safari5.1+ */
|
||||||
|
-webkit-text-stroke: 0.03em #111;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.@{prefix}-rare { color: #A58E4A; }
|
.@{prefix}-rare {
|
||||||
|
color: #A58E4A;
|
||||||
|
&.ss-grad {
|
||||||
|
/* webkit outline/gradient */
|
||||||
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#876a3b), color-stop(50%,#dfbd6b), color-stop(100%,#876a3b)); /* Chrome,Safari4+ */
|
||||||
|
background: -webkit-linear-gradient(left, #876a3b 0%,#dfbd6b 50%,#876a3b 100%); /* Chrome10+,Safari5.1+ */
|
||||||
|
-webkit-text-stroke: 0.03em #333;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.@{prefix}-mythic { color: #A2472A; }
|
.@{prefix}-mythic {
|
||||||
|
color: #BF4427;
|
||||||
|
&.ss-grad {
|
||||||
|
/* webkit outline/gradient */
|
||||||
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b21f0f), color-stop(50%,#f38300), color-stop(100%,#b21f0f)); /* Chrome,Safari4+ */
|
||||||
|
background: -webkit-linear-gradient(left, #b21f0f 0%,#f38300 50%,#b21f0f 100%); /* Chrome10+,Safari5.1+ */
|
||||||
|
-webkit-text-stroke: 0.03em #333;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -162,7 +162,7 @@ blockquote {
|
|||||||
border-bottom: 1px solid #E0DCCD;
|
border-bottom: 1px solid #E0DCCD;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
padding: 20px 20px 18px;
|
padding: 20px 20px 18px;
|
||||||
margin: 20px 0;
|
margin: 20px 0 25px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -51,7 +51,7 @@
|
|||||||
<div class="explanation">
|
<div class="explanation">
|
||||||
<p>You can place Keyrune icons anywhere using the CSS classname prefix <code>ss</code> (for set symbol) and then the set icon's code. Inline elements like <code><i></code> and <code><span></code> are preferred, but any can be used.</p>
|
<p>You can place Keyrune icons anywhere using the CSS classname prefix <code>ss</code> (for set symbol) and then the set icon's code. Inline elements like <code><i></code> and <code><span></code> are preferred, but any can be used.</p>
|
||||||
<blockquote>
|
<blockquote>
|
||||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-zen"</span>></<span class="a">i</span>> ss-zen
|
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-zen"</span>></<span class="e">i</span>> ss-zen
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
</div>
|
||||||
<div class="clear"></div>
|
<div class="clear"></div>
|
||||||
@ -68,11 +68,11 @@
|
|||||||
<div class="explanation">
|
<div class="explanation">
|
||||||
<p>To conveniently increase the size of a set symbol you can append the classes <code>ss-2x</code>, <code>ss-3x</code>, <code>ss-4x</code>, <code>ss-4x</code>, and <code>ss-6x</code>. These classes increase the size by a factor equal to class name number.</p>
|
<p>To conveniently increase the size of a set symbol you can append the classes <code>ss-2x</code>, <code>ss-3x</code>, <code>ss-4x</code>, <code>ss-4x</code>, and <code>ss-6x</code>. These classes increase the size by a factor equal to class name number.</p>
|
||||||
<blockquote>
|
<blockquote>
|
||||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-2x"</span>></<span class="a">i</span>> ss-2x<br />
|
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-2x"</span>></<span class="e">i</span>> ss-2x<br />
|
||||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-3x"</span>></<span class="a">i</span>> ss-3x<br />
|
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-3x"</span>></<span class="e">i</span>> ss-3x<br />
|
||||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-4x"</span>></<span class="a">i</span>> ss-4x<br />
|
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-4x"</span>></<span class="e">i</span>> ss-4x<br />
|
||||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-5x"</span>></<span class="a">i</span>> ss-5x<br />
|
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-5x"</span>></<span class="e">i</span>> ss-5x<br />
|
||||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-6x"</span>></<span class="a">i</span>> ss-6x
|
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-6x"</span>></<span class="e">i</span>> ss-6x
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
</div>
|
||||||
<div class="clear"></div>
|
<div class="clear"></div>
|
||||||
@ -90,8 +90,8 @@
|
|||||||
<div class="explanation">
|
<div class="explanation">
|
||||||
<p>All of the set symbols are variable width by default, if you put them in a list they may stack irregularly. To fix their width just append the class <code>.ss-fw</code> and the set symbols will have a constant width and centered icon.</p>
|
<p>All of the set symbols are variable width by default, if you put them in a list they may stack irregularly. To fix their width just append the class <code>.ss-fw</code> and the set symbols will have a constant width and centered icon.</p>
|
||||||
<blockquote>
|
<blockquote>
|
||||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-inv ss-fw"</span>></<span class="a">i</span>> Invasion<br />
|
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-inv ss-fw"</span>></<span class="e">i</span>> Invasion<br />
|
||||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-nms ss-fw"</span>></<span class="a">i</span>> Nemesis
|
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-nms ss-fw"</span>></<span class="e">i</span>> Nemesis
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
</div>
|
||||||
<div class="clear"></div>
|
<div class="clear"></div>
|
||||||
@ -107,13 +107,23 @@
|
|||||||
<div class="explanation">
|
<div class="explanation">
|
||||||
<p>You can add a rarity color to each set symbol by appending the classes <code>ss-common</code>, <code>ss-uncommon</code>, <code>ss-rare</code>, and <code>ss-mythic</code>.</p>
|
<p>You can add a rarity color to each set symbol by appending the classes <code>ss-common</code>, <code>ss-uncommon</code>, <code>ss-rare</code>, and <code>ss-mythic</code>.</p>
|
||||||
<blockquote>
|
<blockquote>
|
||||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-common"</span>></<span class="a">i</span>> ss-common<br />
|
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-common"</span>></<span class="e">i</span>> ss-common<br />
|
||||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-uncommon"</span>></<span class="a">i</span>> ss-uncommon<br />
|
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-uncommon"</span>></<span class="e">i</span>> ss-uncommon<br />
|
||||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-rare"</span>></<span class="a">i</span>> ss-rare<br />
|
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-rare"</span>></<span class="e">i</span>> ss-rare<br />
|
||||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-mythic"</span>></<span class="a">i</span>> ss-mythic
|
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-mythic"</span>></<span class="e">i</span>> ss-mythic
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
</div>
|
||||||
<div class="clear"></div>
|
<div class="clear"></div>
|
||||||
|
<div class="example float-left">
|
||||||
|
<span class="each"><i class="ss ss-mor ss-rare ss-grad ss-3x"></i> ss-grad</span>
|
||||||
|
</div>
|
||||||
|
<div class="explanation">
|
||||||
|
<p>Webkit browsers suport the <code>background-clip: text</code> property which opens up some exciting options for rarities: true text gradients! Append the <code>.ss-grad</code> class to add a modern rarity gradient.</p>
|
||||||
|
<blockquote>
|
||||||
|
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-mor ss-rare ss-grad ss-3x"</span>></<span class="e">i</span>> ss-grad<br />
|
||||||
|
</blockquote>
|
||||||
|
<p><strong>Note:</strong> You will only see a gradient while using a Webkit browser (i.e., Chrome or Safari).</p>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user