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

+
+ + diff --git a/Style2/Style2.css b/Style2/Style2.css new file mode 100644 index 0000000..835264f --- /dev/null +++ b/Style2/Style2.css @@ -0,0 +1,17 @@ +.style-2 { + color: black; + + font-family: "Arial Black", "Arial", sans-serif; + font-size: 36px; + letter-spacing: 0.06em; + transform: rotate(-15deg) skewX(-15deg) scaleY(2); +} + +.style-2.bold { + font-weight: bold; + transform: rotate(-15deg) skewX(-15deg) scaleY(2) scaleX(1.3); +} + +.style-2.italic { + font-style: italic; +} diff --git a/Style2/style2.html b/Style2/style2.html new file mode 100644 index 0000000..961e44d --- /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

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