added rounded corners page examples + styling
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
fcae82822f
commit
1c4b964160
GPG Key ID:
19CE1EC1D9E0486D
|
|
@ -24,7 +24,9 @@ h1,h2,h3,h4,h5 {
|
|||
}
|
||||
|
||||
img {
|
||||
border-radius: 3px
|
||||
border-radius: 3px;
|
||||
margin: 3em;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
a:link {
|
||||
|
|
@ -119,6 +121,7 @@ footer {
|
|||
align-content: center;
|
||||
text-align: center;
|
||||
margin: 0 3em;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
|
|
@ -158,4 +161,20 @@ pre {
|
|||
margin: 0 auto;
|
||||
max-width: 900px;
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
#divroundedcorners {
|
||||
background-color: lightgreen;
|
||||
border-radius: 7px;
|
||||
padding: 5px;
|
||||
min-height: 100px;
|
||||
margin: 0 3em;
|
||||
}
|
||||
|
||||
#divroundonecorner {
|
||||
background-color: lightskyblue;
|
||||
border-radius: 0 27px 0 0;
|
||||
padding: 5px;
|
||||
min-height: 100px;
|
||||
margin: 0 3em;
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<h3 class="subtitle"> > CSS DEMO < </h3>
|
||||
<p>Hello friend. This page tries to demonstrate basic CSS3 functionality.
|
||||
<ul >
|
||||
<li><a href="./pages/roundcorners.html">CSS3 round corners</a></li>
|
||||
<li><a href="./pages/roundedcorners.html">CSS3 round corners</a></li>
|
||||
<li><a href="./pages/backgroundgradient.html">CSS3 background gradient</a></li>
|
||||
<li><a href="./pages/shadows.html">CSS3 shadows</a></li>
|
||||
<li><a href="#">CSS3 2D transforms</a></li>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,8 @@
|
|||
circle,
|
||||
rgba(2,0,36,1) 0%,
|
||||
rgba(9,9,121,1) 52%,
|
||||
rgba(0,212,255,1) 100%);
|
||||
rgba(0,212,255,1) 100%
|
||||
);
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
<!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>round corners - 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">round corners</h3>
|
||||
|
||||
<div class="divcodeblock">
|
||||
<pre>
|
||||
<code class="language-css">
|
||||
p {
|
||||
color: red
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!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>rounded corners - 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">round corners</h3>
|
||||
|
||||
<div id="divsection">
|
||||
<p>
|
||||
Rounded corners is what we call the corners when they appear..well..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 {
|
||||
background-color: lightgreen;
|
||||
min-height: 100px;
|
||||
margin: 0 3em;
|
||||
border-radius: 7px;
|
||||
}
|
||||
</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>
|
||||
<div id=divroundonecorner>
|
||||
|
||||
</div>
|
||||
<div class="divcodeblock">
|
||||
<pre>
|
||||
<code class="language-css">
|
||||
#divroundonecorner {
|
||||
background-color: lightskyblue;
|
||||
border-radius: 0 0 0 17px;
|
||||
padding: 5px;
|
||||
min-height: 100px;
|
||||
margin: 0 3em;
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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