commit: b5a75d952cf7a12b65445518d7c2a6622eb91781 parent 536e4f13804026a350f50004d76da1206d02105d Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me> Date: Fri, 20 Oct 2023 08:44:42 +0200 notes/css-cursors-demo: NewDiffstat:
| A | notes/css-cursors-demo.css | 36 | ++++++++++++++++++++++++++++++++++++ |
| A | notes/css-cursors-demo.sh | 76 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | notes/css-cursors-demo.xhtml | 54 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
3 files changed, 166 insertions(+), 0 deletions(-)diff --git a/notes/css-cursors-demo.css b/notes/css-cursors-demo.css@@ -0,0 +1,36 @@ +#cursors-auto { cursor: auto; } +#cursors-default { cursor: default; } +#cursors-none { cursor: none; } +#cursors-context-menu { cursor: context-menu; } +#cursors-help { cursor: help; } +#cursors-pointer { cursor: pointer; } +#cursors-progress { cursor: progress; } +#cursors-wait { cursor: wait; } +#cursors-cell { cursor: cell; } +#cursors-crosshair { cursor: crosshair; } +#cursors-text { cursor: text; } +#cursors-vertical-text { cursor: vertical-text; } +#cursors-alias { cursor: alias; } +#cursors-copy { cursor: copy; } +#cursors-move { cursor: move; } +#cursors-no-drop { cursor: no-drop; } +#cursors-not-allowed { cursor: not-allowed; } +#cursors-grab { cursor: grab; } +#cursors-grabbing { cursor: grabbing; } +#cursors-e-resize { cursor: e-resize; } +#cursors-n-resize { cursor: n-resize; } +#cursors-ne-resize { cursor: ne-resize; } +#cursors-nw-resize { cursor: nw-resize; } +#cursors-s-resize { cursor: s-resize; } +#cursors-se-resize { cursor: se-resize; } +#cursors-sw-resize { cursor: sw-resize; } +#cursors-w-resize { cursor: w-resize; } +#cursors-ew-resize { cursor: ew-resize; } +#cursors-ns-resize { cursor: ns-resize; } +#cursors-nesw-resize { cursor: nesw-resize; } +#cursors-nwse-resize { cursor: nwse-resize; } +#cursors-col-resize { cursor: col-resize; } +#cursors-row-resize { cursor: row-resize; } +#cursors-all-scroll { cursor: all-scroll; } +#cursors-zoom-in { cursor: zoom-in; } +#cursors-zoom-out { cursor: zoom-out; }diff --git a/notes/css-cursors-demo.sh b/notes/css-cursors-demo.sh@@ -0,0 +1,76 @@ +#!/bin/sh + +CURSORS=' +auto +default +none +context-menu +help +pointer +progress +wait +cell +crosshair +text +vertical-text +alias +copy +move +no-drop +not-allowed +grab +grabbing +e-resize +n-resize +ne-resize +nw-resize +s-resize +se-resize +sw-resize +w-resize +ew-resize +ns-resize +nesw-resize +nwse-resize +col-resize +row-resize +all-scroll +zoom-in +zoom-out' + +WORKDIR="$(dirname "$0")" + +for cur in ${CURSORS}; do +printf '#cursors-%s { cursor: %s; }\n' "$cur" "$cur" +done >| "${WORKDIR}/css-cursors-demo.css" + +( +printf \ +'<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xi="http://www.w3.org/2001/XInclude" xml:lang="en" lang="en"> + <head> +<!--#include file="/templates/head.shtml" --> + <title>CSS cursors demo</title> + <link rel="stylesheet" href="css-cursors-demo.css" /> + </head> + <body> +<!--#include file="/templates/en/nav.shtml" --> + <main> + <h1>CSS cursors demo</h1> + <p>You can hover on each word to get it"s corresponding cursor property</p> + <ul> +' + + for cur in ${CURSORS}; do + printf \ +' <li id="cursors-%s">%s</li> +' "$cur" "$cur" + done + +printf \ +' </ul> + </main> +<!--#include file="/templates/en/footer.shtml" --> + </body> +</html>\n' +) >| "${WORKDIR}/css-cursors-demo.xhtml"diff --git a/notes/css-cursors-demo.xhtml b/notes/css-cursors-demo.xhtml@@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xi="http://www.w3.org/2001/XInclude" xml:lang="en" lang="en"> + <head> +<!--#include file="/templates/head.shtml" --> + <title>CSS cursors demo</title> + <link rel="stylesheet" href="css-cursors-demo.css" /> + </head> + <body> +<!--#include file="/templates/en/nav.shtml" --> + <main> + <h1>CSS cursors demo</h1> + <p>You can hover on each word to get it"s corresponding cursor property</p> + <ul> + <li id="cursors-auto">auto</li> + <li id="cursors-default">default</li> + <li id="cursors-none">none</li> + <li id="cursors-context-menu">context-menu</li> + <li id="cursors-help">help</li> + <li id="cursors-pointer">pointer</li> + <li id="cursors-progress">progress</li> + <li id="cursors-wait">wait</li> + <li id="cursors-cell">cell</li> + <li id="cursors-crosshair">crosshair</li> + <li id="cursors-text">text</li> + <li id="cursors-vertical-text">vertical-text</li> + <li id="cursors-alias">alias</li> + <li id="cursors-copy">copy</li> + <li id="cursors-move">move</li> + <li id="cursors-no-drop">no-drop</li> + <li id="cursors-not-allowed">not-allowed</li> + <li id="cursors-grab">grab</li> + <li id="cursors-grabbing">grabbing</li> + <li id="cursors-e-resize">e-resize</li> + <li id="cursors-n-resize">n-resize</li> + <li id="cursors-ne-resize">ne-resize</li> + <li id="cursors-nw-resize">nw-resize</li> + <li id="cursors-s-resize">s-resize</li> + <li id="cursors-se-resize">se-resize</li> + <li id="cursors-sw-resize">sw-resize</li> + <li id="cursors-w-resize">w-resize</li> + <li id="cursors-ew-resize">ew-resize</li> + <li id="cursors-ns-resize">ns-resize</li> + <li id="cursors-nesw-resize">nesw-resize</li> + <li id="cursors-nwse-resize">nwse-resize</li> + <li id="cursors-col-resize">col-resize</li> + <li id="cursors-row-resize">row-resize</li> + <li id="cursors-all-scroll">all-scroll</li> + <li id="cursors-zoom-in">zoom-in</li> + <li id="cursors-zoom-out">zoom-out</li> + </ul> + </main> +<!--#include file="/templates/en/footer.shtml" --> + </body> +</html>