692 lines
21 KiB
HTML
692 lines
21 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title><css-doodle /></title>
|
||
<meta name="keywords" content="css, web components">
|
||
<meta name="description" content="A web component for drawing patterns with css">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="stylesheet" href="lib/codemirror/style.css">
|
||
<link rel="stylesheet" href="style.css?b0aa4878c23ec">
|
||
<script src="lib/css-doodle.min.js?b0aa4878c23ec"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="cover">
|
||
<css-doodle grid="1, 12" flags>
|
||
transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1) @rand(800ms);
|
||
transform: scaleX(@rand(1, 4, .1));
|
||
background-color: hsla(
|
||
@rand(120, 180, 10), 70%, 61.8%, @rand(.2, .8)
|
||
);
|
||
clip-path: polygon(0 0, 100% 0, @rand(40%, 60%) @rand(30%, 100%));
|
||
</css-doodle>
|
||
|
||
<header>
|
||
<h1>< <em>css-doodle</em> /> </h1>
|
||
<p>A web component for drawing patterns with css.</p>
|
||
<nav>
|
||
<a href="#usage">Usage</a>
|
||
<a href="https://github.com/yuanchuan/css-doodle">Github</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<div class="wrap">
|
||
<div class="playground">
|
||
<div class="doodle" front> <!-- insert dynamicly --> </div>
|
||
<div class="source"> <!-- insert dynamicly --> </div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="docs">
|
||
|
||
<!-- intro -->
|
||
<section>
|
||
<div class="wrap">
|
||
<h2> Introduction </h2>
|
||
<p>
|
||
css-doodle is based on
|
||
<a href="http://w3c.github.io/webcomponents/spec/shadow/">Shadow DOM v1</a> and
|
||
<a href="https://html.spec.whatwg.org/multipage/scripting.html#custom-elements">Custom Elements v1</a>.
|
||
Right now you can use it on latest <em>Chrome</em> and <em>Safari</em> without polyfills.
|
||
</p>
|
||
<p>
|
||
The component simply generates a grid of divs painted by its own content. Sometimes even the simpliest rule will
|
||
compose out a beautiful result. Check out this collection I built with those grids: <a href="http://yuanchuan.name/css-shapes-patterns/">CSS Shapes Patterns</a>.
|
||
</p>
|
||
<p>
|
||
One great thing about web components is that it's just like other HTML elements，which can be easily styled or controlled using CSS, or manipulated dynamically by javascript with familiar DOM APIs.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- getting started -->
|
||
<section>
|
||
<div class="wrap">
|
||
<h2>Getting Started</h2>
|
||
<p>
|
||
Download <a href="https://raw.githubusercontent.com/yuanchuan/css-doodle/master/css-doodle.min.js">css-doodle.js</a> and put it into your web page.
|
||
</p>
|
||
<p>
|
||
<textarea code>
|
||
<script src="css-doodle.js"></script>
|
||
|
||
<css-doodle>
|
||
/* it's ready to use */
|
||
</css-doodle>
|
||
</textarea>
|
||
</p>
|
||
<p>You can also install from <em><a href="http://npmjs.org/package/css-doodle">npm</a></em> and import the module in javascript:
|
||
<p>
|
||
<textarea code>
|
||
npm install css-doodle
|
||
</textarea>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- example -->
|
||
<section class="example">
|
||
<div class="container">
|
||
<css-doodle grid="8">
|
||
:doodle {
|
||
size: 100vmax;
|
||
background: #2a2e31;
|
||
overflow: hidden;
|
||
}
|
||
transition: .2s ease @rand(500ms);
|
||
border-radius: 24%;
|
||
border: 1px solid hsla(
|
||
calc(36 * @index()), 80%, 80%, .7
|
||
);
|
||
transform: rotate(@pick(60deg, -60deg)) scale(1.2);
|
||
</css-doodle>
|
||
</div>
|
||
<textarea code></textarea>
|
||
</section>
|
||
|
||
<!-- usage -->
|
||
<section>
|
||
<div class="wrap">
|
||
<h2><a name="usage"></a>Usage</h2>
|
||
<p>
|
||
The syntax of css-doodle is no different from CSS, except for convenience sake, it provided several extra utility functions.
|
||
</p>
|
||
|
||
<ul class="nav">
|
||
<li> <a href="#grid">Grid</a></li>
|
||
<li> <a href="#selectors">Selectors</a></li>
|
||
<li> <a href="#functions">Functions</a> </li>
|
||
</ul>
|
||
|
||
<div class="sep"></div>
|
||
|
||
<article>
|
||
<h3><a name="grid"></a>Grid</h3>
|
||
|
||
<p>The size of the grid is defined by the <em>"grid"</em> attribute on the element, range from <em>1</em> to <em>16</em>. If no size or 0 is given,
|
||
the size is set to 1x1.
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
<css-doodle grid="5">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
background: rebeccapurple;
|
||
border: 1px solid #fff;
|
||
</css-doodle>
|
||
</textarea>
|
||
<css-doodle grid="5">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
background: rebeccapurple;
|
||
border: 1px solid #fff;
|
||
</css-doodle>
|
||
</p>
|
||
|
||
<p>
|
||
The following formats of size are recognizable:
|
||
</p>
|
||
<div class="list-items">
|
||
<ul>
|
||
<li><code>grid = "0"</code></li>
|
||
<li><code>grid = "5"</code></li>
|
||
<li><code>grid = "20"</code></li>
|
||
<li><code>grid = "5x7"</code></li>
|
||
<li><code>grid = "5 x 7"</code></li>
|
||
<li><code>grid = "5，7"</code></li>
|
||
<li><code>grid = "5,7"</code></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</article>
|
||
|
||
<div class="sep"></div>
|
||
|
||
<article>
|
||
<h3><a name="selectors"></a>Selectors</h3>
|
||
|
||
<section>
|
||
<h4>:doodle</h4>
|
||
<p>The <code>:doodle</code> or <code>:host</code> is a special selector indicates to the component element itself. The styles can be over-written by your normal css files outside.
|
||
<span class="tip">(try to hover on the doodle)</span>
|
||
</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
:doodle {
|
||
size: 7em;
|
||
transition: .2s ease;
|
||
}
|
||
:doodle(:hover) {
|
||
transform: scale(.9);
|
||
}
|
||
background: rebeccapurple;
|
||
border: 1px solid #fff;
|
||
</textarea>
|
||
<css-doodle grid="5">
|
||
:doodle {
|
||
size: 7em;
|
||
transition: .2s ease;
|
||
}
|
||
:doodle(:hover) {
|
||
transform: scale(.9);
|
||
}
|
||
background: rebeccapurple;
|
||
border: 1px solid #fff;
|
||
</css-doodle>
|
||
</p>
|
||
|
||
</section>
|
||
|
||
<section>
|
||
<h4>@even</h4>
|
||
<p> Select cells like <code> :nth-child(even)</code> but shorter.</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
@even {
|
||
background: rebeccapurple;
|
||
}
|
||
</textarea>
|
||
<css-doodle grid="5">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
@even {
|
||
background: rebeccapurple;
|
||
:after {
|
||
content: '@index()';
|
||
font-size: .7em;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</css-doodle>
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h4>@odd</h4>
|
||
<p> Select cells like <code> :nth-child(odd)</code>.</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
@odd {
|
||
background: rebeccapurple;
|
||
}
|
||
</textarea>
|
||
<css-doodle grid="5">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
@odd {
|
||
background: rebeccapurple;
|
||
:after {
|
||
content: '@index()';
|
||
font-size: .7em;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</css-doodle>
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h4>@nth(n)</h4>
|
||
<p> Select the nth cell like <code> :nth-child(n)</code>.</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
@nth(9) {
|
||
background: rebeccapurple;
|
||
}
|
||
</textarea>
|
||
<css-doodle grid="5">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
background: #f5f5f5;
|
||
border: 1px solid #fff;
|
||
@nth(9) {
|
||
background: rebeccapurple;
|
||
:after {
|
||
content: '@index()';
|
||
font-size: .7em;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</css-doodle>
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h4>@at(x, y)</h4>
|
||
<p> Select by coordinate.</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
@at(4, 2) {
|
||
background: rebeccapurple;
|
||
}
|
||
</textarea>
|
||
<css-doodle grid="5">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
background: #f5f5f5;
|
||
border: 1px solid #fff;
|
||
@at(4, 2) {
|
||
background: rebeccapurple;
|
||
:after {
|
||
content: '@row(), @col()';
|
||
font-size: .5em;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</css-doodle>
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h4>@row(n)</h4>
|
||
<p> Select the nth row of the grid.</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
@row(3) {
|
||
background: rebeccapurple;
|
||
}
|
||
</textarea>
|
||
<css-doodle grid="5">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
background: #f5f5f5;
|
||
border: 1px solid #fff;
|
||
@row(3) {
|
||
background: rebeccapurple;
|
||
:after {
|
||
content: '@row()';
|
||
font-size: .7em;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</css-doodle>
|
||
</p>
|
||
<p>
|
||
The <code>odd</code> and <code>even</code> is supported.
|
||
</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
@row(even) {
|
||
background: rebeccapurple;
|
||
}
|
||
</textarea>
|
||
<css-doodle grid="5">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
background: #f5f5f5;
|
||
border: 1px solid #fff;
|
||
@row(even) {
|
||
background: rebeccapurple;
|
||
:after {
|
||
content: '@row()';
|
||
font-size: .7em;
|
||
color: #fff;
|
||
}
|
||
}
|
||
@row(even) {
|
||
:after {
|
||
content: '@row()';
|
||
font-size: .7em;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</css-doodle>
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h4>@col(n)</h4>
|
||
<p> Select the nth column of the grid.</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
@col(3) {
|
||
background: rebeccapurple;
|
||
}
|
||
</textarea>
|
||
<css-doodle grid="5">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
background: #f5f5f5;
|
||
border: 1px solid #fff;
|
||
@col(3) {
|
||
background: rebeccapurple;
|
||
:after {
|
||
content: '@col()';
|
||
font-size: .7em;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</css-doodle>
|
||
</p>
|
||
<p>
|
||
You can use <code>odd</code> and <code>even</code> too.
|
||
</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
@col(odd) {
|
||
background: rebeccapurple;
|
||
}
|
||
</textarea>
|
||
<css-doodle grid="5">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
background: #f5f5f5;
|
||
border: 1px solid #fff;
|
||
@col(odd) {
|
||
background: rebeccapurple;
|
||
:after {
|
||
content: '@col()';
|
||
font-size: .7em;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</css-doodle>
|
||
</p>
|
||
</section>
|
||
</article>
|
||
|
||
<div class="sep"></div>
|
||
|
||
<article>
|
||
<h3><a name="functions"></a>Functions</h3>
|
||
<section>
|
||
<h4>@index()</h4>
|
||
<p> Returns the current index value of the cell.</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
:after {
|
||
content: '@index()';
|
||
}
|
||
</textarea>
|
||
<css-doodle grid="5">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
background: rebeccapurple;
|
||
border: 1px solid #fff;
|
||
:after {
|
||
content: '@index()';
|
||
color: #fff;
|
||
font-size: .7em;
|
||
}
|
||
</css-doodle>
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h4>@row()</h4>
|
||
<p> Returns the current row number of the cell.</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
:after {
|
||
content: '@row()';
|
||
}
|
||
</textarea>
|
||
<css-doodle grid="5">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
background: rebeccapurple;
|
||
border: 1px solid #fff;
|
||
:after {
|
||
content: '@row()';
|
||
color: #fff;
|
||
font-size: .7em;
|
||
}
|
||
</css-doodle>
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h4>@col()</h4>
|
||
<p> Returns the current column number of the cell.</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
:after {
|
||
content: '@col()';
|
||
}
|
||
</textarea>
|
||
<css-doodle grid="5">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
background: rebeccapurple;
|
||
border: 1px solid #fff;
|
||
:after {
|
||
content: '@col()';
|
||
color: #fff;
|
||
font-size: .7em;
|
||
}
|
||
</css-doodle>
|
||
</p>
|
||
|
||
<p>
|
||
These numbers can be used to generate dynamic values together with <code>calc()</code>.
|
||
</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
background: hsla(
|
||
calc(180 + @row() * @col() * 5),
|
||
80%, 80%, 1
|
||
);
|
||
</textarea>
|
||
<css-doodle grid="5">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
border: 1px solid #fff;
|
||
background: hsla(
|
||
calc(180 + @row() * @col() * 5),
|
||
80%,
|
||
80%,
|
||
1
|
||
);
|
||
</css-doodle>
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h4>@pick(v1, v2,...)</h4>
|
||
<p>
|
||
Randomly pick a value from the given list.
|
||
<br/><span class="tip">(try to click on the doodle)</span>
|
||
</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
:after {
|
||
content: '@pick(+, *, ., -)';
|
||
color: rebeccapurple;
|
||
}
|
||
</textarea>
|
||
<css-doodle grid="5" class="click-to-update">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
:after {
|
||
content: '@pick(+, *, ., -)';
|
||
color: rebeccapurple;
|
||
}
|
||
</css-doodle>
|
||
</p>
|
||
<p>
|
||
Alias: <code>@any</code>
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h4>@rand(start [,stop] [,step])</h4>
|
||
<p>
|
||
Returns a random value from the range of numbers.
|
||
<br/><span class="tip">(try to click the doodle)</span>
|
||
</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
background: rgba(102, 51, 153, @rand(.9));
|
||
transition: .2s ease @rand(200ms);
|
||
transform: rotate(@rand(360deg));
|
||
clip-path: polygon(
|
||
@rand(100%) 0, 100% @rand(100%), 0 @rand(100%)
|
||
);
|
||
</textarea>
|
||
<css-doodle grid="5" class="click-to-update">
|
||
:doodle {
|
||
width: 7em;
|
||
height: 7em;
|
||
}
|
||
background: rgba(102, 51, 153, @rand(.9));
|
||
transition: .2s ease @rand(200ms);
|
||
will-change: transform;
|
||
transform: rotate(@rand(360deg));
|
||
clip-path: polygon(
|
||
@rand(100%) 0, 100% @rand(100%), 0 @rand(100%)
|
||
);
|
||
</css-doodle>
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h4>@shape(name [,v1, v2,...])</h4>
|
||
<p>
|
||
Return a css shape based on <code> polygon() </code>
|
||
<br/><span class="tip">(try to click the doodle)</span>
|
||
</p>
|
||
<p class="has-preview">
|
||
<textarea code>
|
||
clip-path: @shape(
|
||
hypocycloid, @pick(3, 4, 5, 6)
|
||
);
|
||
</textarea>
|
||
<css-doodle grid="2" class="click-to-update">
|
||
:doodle {
|
||
size: 7em;
|
||
}
|
||
transition: .2s ease @rand(200ms);
|
||
transform: rotate(@rand(-90deg, 90deg));
|
||
will-change: transform;
|
||
background: rgba(102, 51, 153, @rand(.3, .9));
|
||
clip-path: @shape(
|
||
hypocycloid, @pick(3, 4, 5, 6)
|
||
);
|
||
</css-doodle>
|
||
</p>
|
||
|
||
<div class="shapes-list">
|
||
<h5> All shapes </h5>
|
||
<div class="shapes">
|
||
<!-- shapes -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</article>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<css-doodle grid="16" docs-bg>
|
||
width: .8em;
|
||
height: .8em;
|
||
background: hsla(calc(360 / 60 * @index()), 80%, 80%, .4);
|
||
clip-path: polygon( 50% 0, 100% 100%, 0 100%);
|
||
transform:
|
||
rotate(@rand(360deg))
|
||
scale(@rand(.6, 1, .1))
|
||
translate(
|
||
@rand(-10em, 10em),
|
||
@rand(-10em, 10em)
|
||
)
|
||
</css-doodle>
|
||
</div>
|
||
|
||
<footer>
|
||
<!-- example -->
|
||
<section class="example">
|
||
<div class="container">
|
||
<css-doodle grid="8">
|
||
:doodle {
|
||
size: 100vmax;
|
||
background: #000;
|
||
overflow: hidden;
|
||
}
|
||
clip-path: @shape(clover, @pick(3, 4));
|
||
background: hsla(
|
||
calc(5 * @index()), 70%, 60%, @rand(.5)
|
||
);
|
||
transform:
|
||
rotate(@rand(360deg))
|
||
scale(@rand(.5, 2.4))
|
||
translate(@rand(-50%, 50%), @rand(-50%, 50%));
|
||
</css-doodle>
|
||
</div>
|
||
<textarea code></textarea>
|
||
</section>
|
||
|
||
<div class="about"><div class="wrap">
|
||
<p>
|
||
Made with
|
||
<css-doodle>
|
||
:doodle {
|
||
vertical-align: middle;
|
||
display: inline-block;
|
||
size: .8em;
|
||
background: rgba(255, 87, 34, 0.6);
|
||
clip-path: @shape(heart);
|
||
}
|
||
</css-doodle>
|
||
by <a href="http://yuanchuan.name">yuanchuan</a>. <br />
|
||
MIT Licensed.
|
||
</p>
|
||
</div></div>
|
||
|
||
<css-doodle grid="1, 12" flags>
|
||
transform: scaleX(@rand(1, 4, .1));
|
||
background-color: hsla(@rand(120, 180, 10), 70%, 61.8%, @rand(.2, .8));
|
||
clip-path: polygon(0 100%, 100% 100%, @rand(40%, 60%) @rand(40%, 80%));
|
||
</css-doodle>
|
||
</footer>
|
||
|
||
<script src="lib/codemirror/core.js"></script>
|
||
<script src="lib/codemirror/lang/css.js"></script>
|
||
<script src="main.js?b0aa4878c23ec"></script>
|
||
<script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||
ga('create', 'UA-26487610-4', 'auto');
|
||
ga('send', 'pageview');
|
||
</script>
|
||
</body>
|
||
</html>
|