wanderer/ TEW-0x00
1
0
Fork 0
Code Issues Pull Requests Releases Activity

deleted redundant whitespace
All checks were successful
continuous-integration/drone/push Build is passing
Details

This commit is contained in:
surtur 2020-03-31 21:08:34 +02:00
parent f1c7dc998d
commit b1947bbaa4
Signed by: wanderer
GPG Key ID: 19CE1EC1D9E0486D
8 changed files with 9 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
2Dtransforms/index.html
View File

@ -19,14 +19,10 @@
<img class="logoimg" src="/media/logo.png">
</div>
</header>
<h3 class="title">2D transforms</h3>
<div id="divsection">
<p>CSS 2D transforms allow us to rotate, move, scale and skew elements</p>
<p>
Below is the famous "ascii shrug" (it's not actually ascii only I have been calling it that for a long time now)
<code class="language-shrug">¯\_(ツ)_/¯</code> inside a div that is slightly rotated <i>clockwise</i>.
</p>
<p>Below is the famous "ascii shrug" (it's not actually ascii only I have been calling it that for a long time now) <code class="language-shrug">¯\_(ツ)_/¯</code> inside a div that is slightly rotated <i>clockwise</i>.</p>
<div id=divtransform1>
<h1>¯\_(ツ)_/¯</h1>
</div>
@ -64,7 +60,6 @@
}</code></pre>
</div>
</div>
<footer class="copyright">
&copy; 2020 <a href="https://git.dotya.ml/wanderer" target="_blank">wanderer</a>
· <a href="https://tew0x00.dotya.ml/">tew-0x00</a>

2
3Dtransforms/index.html
View File

@ -20,7 +20,6 @@
<img class="logoimg" src="/media/logo.png">
</div>
</header>
<h3 class="title">3D transforms</h3>
<div id="divsection">
<p>CSS 3D transforms allow us to rotate elements in (so perceived) third dimension<br>All that is really needed is a simple transform method such as <code class="language-css">rotate{X,Y,Z}()</code> that takes exactly one argument - the amount of wanted rotation.<br></p>
@ -99,7 +98,6 @@
}</code></pre>
</div>
</div>
<footer class="copyright">
&copy; 2020 <a href="https://git.dotya.ml/wanderer" target="_blank">wanderer</a>
· <a href="https://tew0x00.dotya.ml/">tew-0x00</a>

2
animations/index.html
View File

@ -18,7 +18,6 @@
<img class="logoimg" src="/media/logo.png">
</div>
</header>
<h3 class="title">animations</h3>
<div id="divsection">
<div id=divanimate-shrug>
@ -158,7 +157,6 @@
}</code></pre>
</div>
</div>
<footer class="copyright">
&copy; 2020 <a href="https://git.dotya.ml/wanderer" target="_blank">wanderer</a>
· <a href="https://tew0x00.dotya.ml/">tew-0x00</a>

12
backgroundgradient/index.html
View File

@ -18,17 +18,13 @@
<img class="logoimg" src="/media/logo.png">
</div>
</header>
<h3 class="title">background gradient</h3>
<div id="divsection">
<div id="radialgradient">
<p>radial gradient</p>
</div>
<div class="divp">
<p>
Background gradient can be used to display a nice smooth transition between at least two colors.<br>
The one above is the example of <code class="language-highlight">radial gradient</code> - defined by its center and three colours.
</p>
<p>Background gradient can be used to display a nice smooth transition between at least two colors.<br>The one above is the example of <code class="language-highlight">radial gradient</code> - defined by its center and three colours.</p>
</div>
<div class="divcodeblock">
<pre class="language-css" data-lang="css"><code class="language-css">#radialgradient {
@ -53,10 +49,7 @@
<p>linear gradient</p>
</div>
<div class="divp">
<p>
This is <code class="language-highlight">linear gradient</code> - it's got a specific direction.<br>
In this case, value <code class="language-higlight">133deg</code> tells us where it's heading, we specified three colours and opacity.
</p>
<p>This is <code class="language-highlight">linear gradient</code> - it's got a specific direction.<br>In this case, value <code class="language-higlight">133deg</code> tells us where it's heading, we specified three colours and opacity.</p>
</div>
<div class="divcodeblock">
<pre class="language-css" data-lang="css"><code class="language-css">#lineargradient {
@ -78,7 +71,6 @@
}</code></pre>
</div>
</div>
<footer class="copyright">
&copy; 2020 <a href="https://git.dotya.ml/wanderer" target="_blank">wanderer</a>
· <a href="https://tew0x00.dotya.ml/">tew-0x00</a>

2
index.html
View File

@ -46,7 +46,5 @@
· WTFPL<br>
<a href="https://git.dotya.ml/wanderer/TEW-0x00" target="_blank" title="page source">source</a>
</footer>
<!-- <script src="" async defer></script> -->
</body>
</html>

15
roundedcorners/index.html
View File

@ -18,16 +18,10 @@
<img class="logoimg" src="/media/logo.png">
</div>
</header>
<h3 class="title">rounded corners</h3>
<div id="divsection">
<p>
Rounded corners is what we call the corners when they appearwell..rounded!<br>
This functionality, if I may call it that, is accessed via a css property <code class="language-css">border-radius</code> that allows us to <q>give any element rounded corners</q>, thus allowing us to thoughroughly shape the desired element.
</p>
<p>
Below is a <code class="language-html">div</code> element styled with a background colour and border of different colour.
</p>
<p>Rounded corners is what we call the corners when they appearwell..rounded!<br>This functionality, if I may call it that, is accessed via a css property <code class="language-css">border-radius</code> that allows us to <q>give any element rounded corners</q>, thus allowing us to thoughroughly shape the desired element.</p>
<p>Below is a <code class="language-html">div</code> element styled with a background colour and border of different colour.</p>
<div id=divroundedcorners></div>
<div class="divcodeblock">
<pre><code class="language-css">#divroundedcorners {
@ -38,9 +32,7 @@
margin: 0 3em;
}</code></pre>
</div>
<p>
In case we only want to <i>cut one corner</i>, we simply need to set the remaining corners to 0, like so:
</p>
<p>In case we only want to <i>cut one corner</i>, we simply need to set the remaining corners to 0, like so:</p>
<div id=divroundonecorner></div>
<div class="divcodeblock">
<pre><code class="language-css">#divroundonecorner {
@ -52,7 +44,6 @@
}</code></pre>
</div>
</div>
<footer class="copyright">
&copy; 2020 <a href="https://git.dotya.ml/wanderer" target="_blank">wanderer</a>
· <a href="https://tew0x00.dotya.ml/">tew-0x00</a>

19
shadows/index.html
View File

@ -18,16 +18,10 @@
<img class="logoimg" src="/media/logo.png">
</div>
</header>
<h3 class="title">shadows</h3>
<div id="divsection">
<div class="divp">
<p>
The logo "glow" is actually a CSS shadow.<br>
The <code class="language-css">box-shadow</code> values come as follows: horizontal and vertical offset, blur radius, spread and colour (or colours).<br>
When <code class="language-css">inset</code> is specified, the outer shadow is changed to inner shadow. Specifying more colours creates layers.<br>
Below is the logo shadow "evil glow" (so evil) code.
</p>
<p>The logo "glow" is actually a CSS shadow.<br>The <code class="language-css">box-shadow</code> values come as follows: horizontal and vertical offset, blur radius, spread and colour (or colours).<br>When <code class="language-css">inset</code> is specified, the outer shadow is changed to inner shadow. Specifying more colours creates layers.<br>Below is the logo shadow "evil glow" (so evil) code.</p>
</div>
<div class="divcodeblock">
<pre class="language-css" data-lang="css"><code class="language-css">.logoimg {
@ -42,16 +36,10 @@
}</code></pre>
</div>
<div class="divp">
<p>
Similar to <code class="language-css">box-shadow</code>, <code class="language-css">text-shadow</code> takes several values:<br>
Horizontal and vertical offset, blur radius and the shadow colour.<br>
This sequence can be specified multiple times to create a layered shadow.
</p>
<p>Similar to <code class="language-css">box-shadow</code>, <code class="language-css">text-shadow</code> takes several values:<br>Horizontal and vertical offset, blur radius and the shadow colour.<br>This sequence can be specified multiple times to create a layered shadow.</p>
</div>
<div id="divshadowz">
<p>
<h2 id="textshadow">Shadows used on text.</h2>
</p>
<p><h2 id="textshadow">Shadows used on text.</h2></p>
</div>
<div class="divcodeblock">
<pre class="language-css" data-lang="css"><code class="language-css">#textshadow {
@ -63,7 +51,6 @@
}</code></pre>
</div>
</div>
<footer class="copyright">
&copy; 2020 <a href="https://git.dotya.ml/wanderer" target="_blank">wanderer</a>
· <a href="https://tew0x00.dotya.ml/">tew-0x00</a>

2
transitions/index.html
View File

@ -20,7 +20,6 @@
<img class="logoimg" src="/media/logo.png">
</div>
</header>
<h3 class="title">transitions</h3>
<div id="divsection">
<p>CSS transitions give us the abilty to describe a change that is supposed to happen gradually over a given course of time<br></p>
@ -59,7 +58,6 @@
margin: 0 6em;
}</code></pre>
</div>
<footer class="copyright">
&copy; 2020 <a href="https://git.dotya.ml/wanderer" target="_blank">wanderer</a>
· <a href="https://tew0x00.dotya.ml/">tew-0x00</a>