edited preformated code rendering in subpages
* turned out it was displayed wrong because of redundant whitespace (that I left there)
This commit is contained in:
parent
d40cf236a7
commit
5debb11ddf
GPG Key ID:
19CE1EC1D9E0486D
@ -33,23 +33,19 @@
|
||||
<h1>¯\_(ツ)_/¯</h1>
|
||||
</div>
|
||||
<div class="divcodeblock">
|
||||
<pre>
|
||||
<code class="language-css">
|
||||
#divtransform1 {
|
||||
border: 2px solid whitesmoke;
|
||||
border-radius: 30px;
|
||||
padding: 5px;
|
||||
width: 150px;
|
||||
min-height: 50px;
|
||||
margin: 2em 10em;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
-webkit-transform: rotate(20deg);
|
||||
-ms-transform: rotate(20deg);
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
<pre><code class="language-css">#divtransform1 {
|
||||
border: 2px solid whitesmoke;
|
||||
border-radius: 30px;
|
||||
padding: 5px;
|
||||
width: 150px;
|
||||
min-height: 50px;
|
||||
margin: 2em 10em;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
-webkit-transform: rotate(20deg);
|
||||
-ms-transform: rotate(20deg);
|
||||
transform: rotate(20deg);
|
||||
}</code></pre>
|
||||
</div>
|
||||
<p>
|
||||
Skew parameter does exactly what the name says - skews whatever element you throw at it.<br>
|
||||
@ -59,23 +55,19 @@
|
||||
<h1>¯\_(ツ)_/¯</h1>
|
||||
</div>
|
||||
<div class="divcodeblock">
|
||||
<pre>
|
||||
<code class="language-css">
|
||||
#divtransform2 {
|
||||
border: 2px solid whitesmoke;
|
||||
border-radius: 30px;
|
||||
padding: 10px;
|
||||
width: 150px;
|
||||
min-height: 50px;
|
||||
margin: 2em 10em;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
-webkit-transform: skew(20deg, 10deg);
|
||||
-ms-transform: skew(20deg, 10deg);
|
||||
transform: skew(20deg, 20deg);
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
<pre><code class="language-css">#divtransform2 {
|
||||
border: 2px solid whitesmoke;
|
||||
border-radius: 30px;
|
||||
padding: 10px;
|
||||
width: 150px;
|
||||
min-height: 50px;
|
||||
margin: 2em 10em;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
-webkit-transform: skew(20deg, 10deg);
|
||||
-ms-transform: skew(20deg, 10deg);
|
||||
transform: skew(20deg, 20deg);
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -89,4 +81,4 @@
|
||||
|
||||
<script src="../scripts/prism.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -34,26 +34,22 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="divcodeblock">
|
||||
<pre class="language-css" data-lang="css">
|
||||
<code class="language-css">
|
||||
#radialgradient {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0em;
|
||||
min-height: 13em;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
background: rgb(2,0,36);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(2,0,36,1) 0%,
|
||||
rgba(9,9,121,1) 52%,
|
||||
rgba(0,212,255,1) 100%
|
||||
);
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
<pre class="language-css" data-lang="css"><code class="language-css">#radialgradient {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0em;
|
||||
min-height: 13em;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
background: rgb(2,0,36);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(2,0,36,1) 0%,
|
||||
rgba(9,9,121,1) 52%,
|
||||
rgba(0,212,255,1) 100%
|
||||
);
|
||||
}</code></pre>
|
||||
</div>
|
||||
<div id="lineargradient">
|
||||
<p>
|
||||
@ -67,27 +63,23 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="divcodeblock">
|
||||
<pre class="language-css" data-lang="css">
|
||||
<code class="language-css">
|
||||
#lineargradient {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0em;
|
||||
min-height: 13em;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
height: 250px;
|
||||
background-image: linear-gradient(
|
||||
133deg,
|
||||
#deadbeef 0%,
|
||||
#3fa8eb 51%,
|
||||
#2cb5fd 75%
|
||||
);
|
||||
opacity: 0.95;
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
<pre class="language-css" data-lang="css"><code class="language-css">#lineargradient {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0em;
|
||||
min-height: 13em;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
height: 250px;
|
||||
background-image: linear-gradient(
|
||||
133deg,
|
||||
#deadbeef 0%,
|
||||
#3fa8eb 51%,
|
||||
#2cb5fd 75%
|
||||
);
|
||||
opacity: 0.95;
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -101,4 +93,4 @@
|
||||
|
||||
<script src="../scripts/prism.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -33,17 +33,13 @@
|
||||
|
||||
</div>
|
||||
<div class="divcodeblock">
|
||||
<pre>
|
||||
<code class="language-css">
|
||||
#divroundedcorners {
|
||||
background-color: lightgreen;
|
||||
border-radius: 7px;
|
||||
padding: 5px;
|
||||
min-height: 100px;
|
||||
margin: 0 3em;
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
<pre><code class="language-css">#divroundedcorners {
|
||||
background-color: lightgreen;
|
||||
border-radius: 7px;
|
||||
padding: 5px;
|
||||
min-height: 100px;
|
||||
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:
|
||||
@ -52,17 +48,13 @@
|
||||
|
||||
</div>
|
||||
<div class="divcodeblock">
|
||||
<pre>
|
||||
<code class="language-css">
|
||||
#divroundonecorner {
|
||||
background-color: lightskyblue;
|
||||
border-radius: 0 27px 0 0;
|
||||
padding: 5px;
|
||||
min-height: 100px;
|
||||
margin: 0 3em;
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
<pre><code class="language-css">#divroundonecorner {
|
||||
background-color: lightskyblue;
|
||||
border-radius: 0 27px 0 0;
|
||||
padding: 5px;
|
||||
min-height: 100px;
|
||||
margin: 0 3em;
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -76,4 +68,4 @@
|
||||
|
||||
<script src="../scripts/prism.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -31,20 +31,16 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="divcodeblock">
|
||||
<pre class="language-css" data-lang="css">
|
||||
<code class="language-css">
|
||||
.logoimg {
|
||||
width: fit-content;
|
||||
margin: 2em 1em;
|
||||
max-width: 250px;
|
||||
padding: 5px;
|
||||
box-shadow:
|
||||
inset 60px 0 330px #f0f,
|
||||
0 0 60px #f0f,
|
||||
-10px 0 50px #0ff;
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
<pre class="language-css" data-lang="css"><code class="language-css">.logoimg {
|
||||
width: fit-content;
|
||||
margin: 2em 1em;
|
||||
max-width: 250px;
|
||||
padding: 5px;
|
||||
box-shadow:
|
||||
inset 60px 0 330px #f0f,
|
||||
0 0 60px #f0f,
|
||||
-10px 0 50px #0ff;
|
||||
}</code></pre>
|
||||
</div>
|
||||
<div class="divp">
|
||||
<p>
|
||||
@ -59,17 +55,13 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="divcodeblock">
|
||||
<pre class="language-css" data-lang="css">
|
||||
<code class="language-css">
|
||||
#textshadow {
|
||||
color: #f0f;
|
||||
text-shadow:
|
||||
1px 1px 2px black,
|
||||
0 0 25px blue,
|
||||
0 0 5px darkblue;
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
<pre class="language-css" data-lang="css"><code class="language-css">#textshadow {
|
||||
color: #f0f;
|
||||
text-shadow:
|
||||
1px 1px 2px black,
|
||||
0 0 25px blue,
|
||||
0 0 5px darkblue;
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -83,4 +75,4 @@
|
||||
|
||||
<script src="../scripts/prism.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user