added shadows page + updates
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
20d4b4e753
commit
948ffd05df
GPG Key ID:
19CE1EC1D9E0486D
@ -19,6 +19,7 @@ pre[class*="language-"] {
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
background: #151718;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
@ -32,15 +33,16 @@ pre[class*="language-"] {
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
padding: .0em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
border-radius: .3em;
|
||||
max-height: 30em;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #272822;
|
||||
background: #151718;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
body {
|
||||
background: #2b2b2b;
|
||||
font-size: 16px;
|
||||
overflow-y: auto;
|
||||
/* overflow-y: auto; */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -13,9 +13,15 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
section {
|
||||
display: block;
|
||||
max-width: 700px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
p {
|
||||
color: gainsboro;
|
||||
text-align: justify;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5 {
|
||||
@ -27,12 +33,6 @@ img {
|
||||
border-radius: 3px
|
||||
}
|
||||
|
||||
.divcodeblock {
|
||||
margin: 0 30em 0 30em;
|
||||
text-align: justify;
|
||||
min-height: min-content;
|
||||
}
|
||||
|
||||
a:link {
|
||||
cursor: pointer;
|
||||
color: #36c;
|
||||
@ -109,17 +109,44 @@ ul li{
|
||||
}
|
||||
|
||||
.divp {
|
||||
margin: 0 30em 0 30em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.divcodeblock {
|
||||
display: block;
|
||||
position: relative;
|
||||
border: lightblue 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
max-width: 700px;
|
||||
max-height: 30em;
|
||||
min-height: 2em;
|
||||
padding: .7em 1.1em;
|
||||
font-size: .9em;
|
||||
line-height: 1.5;
|
||||
letter-spacing: normal;
|
||||
white-space: pre;
|
||||
color: #eee;
|
||||
background: #151718;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#bggradient {
|
||||
margin: 0 30em 0 30em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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%);
|
||||
}
|
||||
#bggradient p {
|
||||
/* color: yellow; */
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
min-height: 50px;
|
||||
margin: 2em;
|
||||
}
|
||||
@ -22,7 +22,7 @@
|
||||
<ul >
|
||||
<li><a href="./pages/roundcorners.html">CSS3 round corners</a></li>
|
||||
<li><a href="./pages/backgroundgradient.html">CSS3 background gradient</a></li>
|
||||
<li><a href="#">CSS3 shadows</a></li>
|
||||
<li><a href="./pages/shadows.html">CSS3 shadows</a></li>
|
||||
<li><a href="#">CSS3 2D transforms</a></li>
|
||||
<li><a href="#">CSS3 3D transforms</a></li>
|
||||
<li><a href="#">CSS3 transitions</a></li>
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
<h2 class="subtitle"> > CSS DEMO < </h2>
|
||||
<h3 class="title">background gradient</h3>
|
||||
|
||||
<section>
|
||||
<div id="bggradient">
|
||||
<p>
|
||||
Background gradient cas be used to display a nice smooth transition between at least two colors.<br>
|
||||
@ -27,13 +28,14 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="divcodeblock">
|
||||
<pre>
|
||||
<pre class="language-css" data-lang="css">
|
||||
<code class="language-css">
|
||||
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>
|
||||
</section>
|
||||
|
||||
<footer class="copyright">
|
||||
© 2020 <a href="https://git.dotya.ml/wanderer" target="_blank">wanderer</a>
|
||||
|
||||
29
pages/shadows.html
Normal file
29
pages/shadows.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>shadows - tew-0x00</title>
|
||||
<meta name="description" content="round corners - tew-0x00">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/prism.css" data-noprefix/>
|
||||
</head>
|
||||
<body>
|
||||
<h2 class="subtitle"> > CSS DEMO < </h2>
|
||||
<h3 class="title">shadows</h3>
|
||||
|
||||
<footer class="copyright">
|
||||
© 2020 <a href="https://git.dotya.ml/wanderer" target="_blank">wanderer</a>
|
||||
· <a href="https://tew0x00.dotya.ml/">tew-0x00</a>
|
||||
· WTFPL<br>
|
||||
<a href="https://git.dotya.ml/wanderer/TEW-0x00" target="_blank" title="page source">source</a>
|
||||
</footer>
|
||||
|
||||
|
||||
<script src="../prism.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user