diff --git a/docs/index.html b/docs/index.html index dca8b89..3852756 100644 --- a/docs/index.html +++ b/docs/index.html @@ -7,8 +7,8 @@ - - + + @@ -19,12 +19,9 @@ background-color: hsla( @rand(120, 180, 10), 70%, 61.8%, @rand(.2, .8) ); - --polygon: polygon( - 0 0, 100% 0, @rand(40%, 60%) @rand(30%, 100%) - ); - -webkit-clip-path: var(--polygon); - clip-path: var(--polygon); + clip-path: polygon(0 0, 100% 0, @rand(40%, 60%) @rand(30%, 100%)); +

< css-doodle />

A web component for drawing patterns with css.

@@ -75,9 +72,13 @@

-

You can also install from npm and require the module in javascript: +

You can also install from npm and import the module in javascript:

@@ -115,67 +115,91 @@ The syntax of css-doodle is no different from CSS, except for convenience sake, it provided several extra utility functions.

+ +
-

Grid size

+

Grid

-

The size of the grid is defined by the "grid" attribute on the element. Range from 1 to 16. If no size or 0 is given, +

The size of the grid is defined by the "grid" attribute on the element, range from 1 to 16. If no size or 0 is given, the size is set to 1x1.

- - :doodle { - width: 7em; - height: 4em; - } - background: rebeccapurple; - border: 1px solid #fff; - -

-
- -
-

:doodle

-

The :doodle or :host is a special selector indicates to the component element itself. The styles can be over-written by your normal css files outside. - (try to hover on the doodle) -

-

- :doodle { - width: 7em; height: 7em; - transition: .2s ease; - } - :doodle(:hover) { - transform: scale(.9); + size: 7em; } background: rebeccapurple; border: 1px solid #fff;

+ +

+ The following formats of size are recognizable: +

+
+
    +
  • grid = "0"
    • +
  • grid = "5"
    • +
  • grid = "20"
    • +
  • grid = "5x7"
    • +
  • grid = "5 x 7"
    • +
  • grid = "5，7"
    • +
  • grid = "5,7"
    • +
+
+
+
+
-

Conditional Selectors

+

Selectors

+ +
+

:doodle

+

The :doodle or :host is a special selector indicates to the component element itself. The styles can be over-written by your normal css files outside. + (try to hover on the doodle) +

+

+ + + :doodle { + size: 7em; + transition: .2s ease; + } + :doodle(:hover) { + transform: scale(.9); + } + background: rebeccapurple; + border: 1px solid #fff; + +

+ +

@even

@@ -188,8 +212,7 @@ :doodle { - width: 7em; - height: 7em; + size: 7em; } @even { background: rebeccapurple; @@ -214,8 +237,7 @@ :doodle { - width: 7em; - height: 7em; + size: 7em; } @odd { background: rebeccapurple; @@ -240,8 +262,7 @@ :doodle { - width: 7em; - height: 7em; + size: 7em; } background: #f5f5f5; border: 1px solid #fff; @@ -268,8 +289,7 @@ :doodle { - width: 7em; - height: 7em; + size: 7em; } background: #f5f5f5; border: 1px solid #fff; @@ -296,8 +316,7 @@ :doodle { - width: 7em; - height: 7em; + size: 7em; } background: #f5f5f5; border: 1px solid #fff; @@ -322,8 +341,7 @@ :doodle { - width: 7em; - height: 7em; + size: 7em; } background: #f5f5f5; border: 1px solid #fff; @@ -357,8 +375,7 @@ :doodle { - width: 7em; - height: 7em; + size: 7em; } background: #f5f5f5; border: 1px solid #fff; @@ -383,8 +400,7 @@ :doodle { - width: 7em; - height: 7em; + size: 7em; } background: #f5f5f5; border: 1px solid #fff; @@ -401,6 +417,8 @@
+
+

Functions

@@ -414,8 +432,7 @@ :doodle { - width: 7em; - height: 7em; + size: 7em; } background: rebeccapurple; border: 1px solid #fff; @@ -439,8 +456,7 @@ :doodle { - width: 7em; - height: 7em; + size: 7em; } background: rebeccapurple; border: 1px solid #fff; @@ -464,8 +480,7 @@ :doodle { - width: 7em; - height: 7em; + size: 7em; } background: rebeccapurple; border: 1px solid #fff; @@ -489,8 +504,7 @@ :doodle { - width: 7em; - height: 7em; + size: 7em; } border: 1px solid #fff; background: hsla( @@ -504,7 +518,7 @@
-

@any(v1, v2,...)

+

@pick(v1, v2,...)

Randomly pick a value from the given list.
(try to click on the doodle) @@ -512,23 +526,22 @@

:doodle { - width: 7em; - height: 7em; + size: 7em; } :after { - content: '@any(+, *, ., -)'; + content: '@pick(+, *, ., -)'; color: rebeccapurple; }

- Alias: @pick + Alias: @any

@@ -554,17 +567,47 @@ } background: rgba(102, 51, 153, @rand(.9)); transition: .2s ease @rand(200ms); - --polygon: polygon( + will-change: transform; + transform: rotate(@rand(360deg)); + clip-path: polygon( @rand(100%) 0, 100% @rand(100%), 0 @rand(100%) ); - will-change: transform; - -webkit-clip-path: var(--polygon); - clip-path: var(--polygon); - transform: - rotate( @rand(360deg))

+ +
+

@shape(name [,v1, v2,...])

+

+ Return a css shape based on polygon() +

+

+ + + :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) + ); + +

+ +
+
All shapes
+
+ +
+
+
@@ -574,15 +617,7 @@ width: .8em; height: .8em; background: hsla(calc(360 / 60 * @index()), 80%, 80%, .4); - - --polygon: polygon( - 50% 0, - 100% 100%, - 0 100% - ); - -webkit-clip-path: var(--polygon); - clip-path: var(--polygon); - + clip-path: polygon( 50% 0, 100% 100%, 0 100%); transform: rotate(@rand(360deg)) scale(@rand(.6, 1, .1)) @@ -596,7 +631,17 @@

- Made with ♥ by yuanchuan.
+ Made with + + :doodle { + vertical-align: middle; + display: inline-block; + size: .8em; + background: rgba(255, 87, 34, 0.6); + clip-path: @shape(heart); + } + + by yuanchuan.
MIT Licensed.

@@ -605,15 +650,13 @@ transform: scaleX(@rand(1, 4, .1)); background-color: hsla(@rand(120, 180, 10), 70%, 61.8%, @rand(.2, .8)); - --polygon: polygon(0 100%, 100% 100%, @rand(40%, 60%) @rand(40%, 80%)); - -webkit-clip-path: var(--polygon); - clip-path: var(--polygon); + clip-path: polygon(0 100%, 100% 100%, @rand(40%, 60%) @rand(40%, 80%)); - +