tongChong
/
css-doodle
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update code samples

This commit is contained in:
yuanchuan 2017-02-25 10:18:51 +08:00
parent ddba29d562
commit b98a7c7b8c
3 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
README.md
View File

@ -4,28 +4,33 @@ A web component for drawing patterns with css.
![circles](screenshot/circles.png)
## Example
include [css-doodle.js](css-doodle.js) in your html:
```html
<css-doodle grid="5">
<script src="./css-doodle.js"></script>
```
drawing the above circles with css:
```html
<css-doodle grid="6">
:doodle {
width: 50vh;
height: 50vh;
border-radius: 50%;
overflow: hidden;
background: #f1ffd9;
background: #fafff1;
}
--size: @rand(200%);
width: var(--size);
height: var(--size);
border-radius: 50%;
background-color: hsla(
@rand(100), 80%, 50%, @rand(.8)
background: hsla(
@rand(360), 80%, 50%, @rand(.8)
);
</css-doodle>
```
## Usage
include css-doodle.js in your html:
```
<script src="./css-doodle.js"></script>
```

11
samples/circles.html
View File

@ -12,19 +12,22 @@
</head>
<body>
<div>
<css-doodle grid="5">
:host {
<css-doodle grid="6">
:doodle {
width: 50vh;
height: 50vh;
border-radius: 50%;
overflow: hidden;
background: #f1ffd9;
background: #fafff1;
}
--size: @rand(200%);
width: var(--size);
height: var(--size);
background: hsla(@rand(100), 80%, 50%, @rand(.8));
border-radius: 50%;
background: hsla(
@rand(360), 80%, 50%, @rand(.8)
);
</css-doodle>
</div>
</body>

BIN
screenshot/circles.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB