From 18a35e56b6853377a46ceb265d896cf8c59759ac Mon Sep 17 00:00:00 2001 From: Andreas Friestad Date: Mon, 5 Apr 2021 16:08:11 +0200 Subject: [PATCH 1/4] Add style1 styles --- Style1/Style1.css | 25 +++++++++++++++++++++++++ Style1/style1.html | 20 ++++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 Style1/Style1.css create mode 100644 Style1/style1.html diff --git a/Style1/Style1.css b/Style1/Style1.css new file mode 100644 index 0000000..7c85960 --- /dev/null +++ b/Style1/Style1.css @@ -0,0 +1,25 @@ +.style-1 { + color: white; + --webkit-text-stroke: 1px black; + text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, + -1px -1px 0 #000, 0px 1px 0 #000, 0px -1px 0 #000, -1px 0px 0 #000, + 1px 0px 0 #000, 0.5px 0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px -0.5px 0 #000, + -0.5px -0.5px 0 #000, 0px 0.5px 0 #000, 0px -0.5px 0 #000, -0.5px 0px 0 #000, + 0.5px 0px 0 #000, 1px 0.5px 0 #000, -1px 0.5px 0 #000, 1px -0.5px 0 #000, + -1px -0.5px 0 #000, 0.5px 1px 0 #000, -0.5px 1px 0 #000, 0.5px -1px 0 #000, + -0.5px -1px 0 #000; + + font-family: "Arial Black", "Arial", sans-serif; + font-size: 36px; + letter-spacing: 0.06em; + transform: scaleY(2) scaleX(0.9); +} + +.style-1.bold { + font-weight: bold; + transform: scaleY(2) scaleX(1.1); +} + +.style-1.italic { + font-style: italic; +} diff --git a/Style1/style1.html b/Style1/style1.html new file mode 100644 index 0000000..7466f79 --- /dev/null +++ b/Style1/style1.html @@ -0,0 +1,20 @@ + + + + + +
+

WordArt-stil 1

+

WordArt-stil 1 fet

+

WordArt-stil 1 kursiv

+

WordArt-stil 1 fet kursiv

+
+ + From 947a1fde488486d313a16b196b24ce83e7deb707 Mon Sep 17 00:00:00 2001 From: Andreas Friestad Date: Mon, 5 Apr 2021 16:08:11 +0200 Subject: [PATCH 2/4] Add style2 --- Style2/Style2.css | 17 +++++++++++++++++ Style2/style2.html | 21 +++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 Style2/Style2.css create mode 100644 Style2/style2.html diff --git a/Style2/Style2.css b/Style2/Style2.css new file mode 100644 index 0000000..5695ca6 --- /dev/null +++ b/Style2/Style2.css @@ -0,0 +1,17 @@ +.style-1 { + color: black; + + font-family: "Arial Black", "Arial", sans-serif; + font-size: 36px; + letter-spacing: 0.06em; + transform: rotate(-15deg) skewX(-15deg) scaleY(2); +} + +.style-1.bold { + font-weight: bold; + transform: rotate(-15deg) skewX(-15deg) scaleY(2) scaleX(1.3); +} + +.style-1.italic { + font-style: italic; +} diff --git a/Style2/style2.html b/Style2/style2.html new file mode 100644 index 0000000..4f8cdf8 --- /dev/null +++ b/Style2/style2.html @@ -0,0 +1,21 @@ + + + + + +
+

WordArt-stil 2

+

WordArt-stil 2 fet

+

WordArt-stil 2 kursiv

+

WordArt-stil 2 fet kursiv

+
+ + From ce02990c275727d150268f706cdebbf22ae7fe14 Mon Sep 17 00:00:00 2001 From: Andreas Friestad Date: Mon, 5 Apr 2021 16:23:48 +0200 Subject: [PATCH 3/4] rename style2 class --- Style2/Style2.css | 6 +++--- Style2/style2.html | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/Style2/Style2.css b/Style2/Style2.css index 5695ca6..835264f 100644 --- a/Style2/Style2.css +++ b/Style2/Style2.css @@ -1,4 +1,4 @@ -.style-1 { +.style-2 { color: black; font-family: "Arial Black", "Arial", sans-serif; @@ -7,11 +7,11 @@ transform: rotate(-15deg) skewX(-15deg) scaleY(2); } -.style-1.bold { +.style-2.bold { font-weight: bold; transform: rotate(-15deg) skewX(-15deg) scaleY(2) scaleX(1.3); } -.style-1.italic { +.style-2.italic { font-style: italic; } diff --git a/Style2/style2.html b/Style2/style2.html index 4f8cdf8..961e44d 100644 --- a/Style2/style2.html +++ b/Style2/style2.html @@ -12,10 +12,10 @@ height: 100%; " > -

WordArt-stil 2

-

WordArt-stil 2 fet

-

WordArt-stil 2 kursiv

-

WordArt-stil 2 fet kursiv

+

WordArt-stil 2

+

WordArt-stil 2 fet

+

WordArt-stil 2 kursiv

+

WordArt-stil 2 fet kursiv

From c403f560aa2b0dcf1dcac9ad0cfb14475fd4ac2f Mon Sep 17 00:00:00 2001 From: Andreas Friestad Date: Mon, 5 Apr 2021 17:43:10 +0200 Subject: [PATCH 4/4] Add style3 (requires js import) --- Style3/Style3.css | 18 +++++++++++++ Style3/style3.html | 22 ++++++++++++++++ Style3/style3.js | 63 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 103 insertions(+) create mode 100644 Style3/Style3.css create mode 100644 Style3/style3.html create mode 100644 Style3/style3.js diff --git a/Style3/Style3.css b/Style3/Style3.css new file mode 100644 index 0000000..64cb495 --- /dev/null +++ b/Style3/Style3.css @@ -0,0 +1,18 @@ +.style-3-svg-text, +.style-3 { + color: black; + + font-family: "Arial Black", "Arial", sans-serif; + font-size: 36px; + letter-spacing: 0.02em; +} + +.style-3-svg-text.bold, +.style-3.bold { + font-weight: bold; +} + +.style-3-svg-text.italic, +.style-3.italic { + font-style: italic; +} diff --git a/Style3/style3.html b/Style3/style3.html new file mode 100644 index 0000000..6da70fe --- /dev/null +++ b/Style3/style3.html @@ -0,0 +1,22 @@ + + + + + +
+

WordArt-stil 3

+

WordArt-stil 3 fet

+

WordArt-stil 3 kursiv

+

WordArt-stil 3 fet kursiv

+
+ + + diff --git a/Style3/style3.js b/Style3/style3.js new file mode 100644 index 0000000..a9698b3 --- /dev/null +++ b/Style3/style3.js @@ -0,0 +1,63 @@ +function makeStyle3() { + let elementsToStyle = document.getElementsByClassName("style-3"); + console.log(elementsToStyle); + let index = 0; + for (let textElement of elementsToStyle) { + let height = textElement.clientHeight * 2; + let width = textElement.clientWidth + 50; + + let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svg.setAttributeNS(null, "id", "style-3-svg-" + index); + svg.setAttributeNS(null, "height", "" + height); + svg.setAttributeNS(null, "width", "" + width); + svg.setAttributeNS(null, "viewBox", "0 0 " + width + " " + height); + svg.setAttributeNS(null, "class", textElement.className); + + const pathId = "style-3-svg-" + index + "-path"; + let path = document.createElementNS("http://www.w3.org/2000/svg", "path"); + path.setAttributeNS(null, "id", pathId); + path.setAttributeNS(null, "fill", "none"); + const curve = + "M30," + + height + + " C" + + (30 + width / 5) + + "," + + (height - height / 3) + + " " + + (width - 30 - width / 5) + + "," + + (height - height / 3) + + " " + + (width - 30) + + "," + + height; + path.setAttributeNS(null, "d", curve); + + let text = document.createElementNS("http://www.w3.org/2000/svg", "text"); + text.setAttributeNS(null, "width", width); + text.setAttributeNS(null, "height", height); + + let textPath = document.createElementNS( + "http://www.w3.org/2000/svg", + "textPath" + ); + textPath.setAttributeNS(null, "alignment-baseline", "top"); + textPath.setAttributeNS(null, "href", "#" + pathId); + textPath.setAttributeNS(null, "fill", "black"); + //textPath.setAttributeNS(null, "class", "style-3-svg-text"); + + textPath.appendChild(document.createTextNode(textElement.textContent)); + text.appendChild(textPath); + + svg.appendChild(path); + svg.appendChild(text); + + textElement.replaceWith(svg); + + console.log(svg); + index++; + } +} + +window.onload = makeStyle3;