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

added transitions site + styles
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
surtur 2020-03-30 22:08:02 +02:00
parent 8e8f275e7c
commit c177888cd9
Signed by: wanderer
GPG Key ID: 19CE1EC1D9E0486D
3 changed files with 100 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
css/style.css
View File

@ -496,3 +496,32 @@ pre {
}
}
#divtransitioncolorandopacity {
border-radius: 7px;
min-height: 100px;
margin: 0 3em;
background-color: lightskyblue;
-webkit-transition: background-color 1s ease-in, opacity 750ms ease-out;
-moz-transition: background-color 1s ease-in, opacity 750ms ease-out;
transition: background-color 1s ease-in, opacity 750ms ease-out;
opacity: .7;
}
#divtransitioncolorandopacity:hover {
background: purple;
opacity: .95;
}
#divtransitionshape {
border-radius: 7px;
min-height: 100px;
margin: 0 3em;
background-color: lightgreen;
-webkit-transition: -webkit-transform 1s ease-in-out, margin 500ms ease-in-out;
-moz-transition: transform 1s ease-in-out, margin 500ms ease-in-out;
transition: transform 1s ease-in-out, margin 500ms ease-in-out;
transition-property: transform, margin;
}
#divtransitionshape:hover {
margin: 0 6em;
}

2
index.html
View File

@ -31,7 +31,7 @@
<li><a href="./pages/shadows.html">shadows</a></li>
<li><a href="./pages/2Dtransforms.html">2D transforms</a></li>
<li><a href="./pages/3Dtransforms.html">3D transforms</a></li>
<li><a href="#">transitions</a></li>
<li><a href="./pages/transitions.html">transitions</a></li>
<li><a href="./pages/animations.html">animations</a></li>
<li><a href="#">multiple columns</a></li>
<li><a href="#">box sizing</a></li>

70
pages/transitions.html Normal file
View File

@ -0,0 +1,70 @@
<!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>transitions - tew-0x00</title>
<meta name="description" content="transitions - tew-0x00">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script defer src="../scripts/prism.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/prism.css" data-noprefix/>
</head>
<body>
<header>
<div id="divlogoimg">
<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>
<div id=divtransitioncolorandopacity></div>
<p>background color transition on hover/tap</p>
<div class="divcodeblock">
<pre><code class="language-css">#divtransitioncolorandopacity {
border-radius: 7px;
min-height: 100px;
margin: 0 3em;
background-color: lightskyblue;
-webkit-transition: background-color 1s ease-in, opacity 1s ease-out;
-moz-transition: background-color 1s ease-in, opacity 1s ease-out;
transition: background-color 1s ease-in, opacity 1s ease-out;
opacity: .7;
}
#divtransitioncolorandopacity:hover {
background: purple;
opacity: .95;
}</code></pre>
</div>
<div id=divtransitionshape></div>
<p>A div that shrinks width-wise on hover/tap</p>
<div class="divcodeblock">
<pre><code class="language-css">#divtransitionshape {
border-radius: 7px;
min-height: 100px;
margin: 0 3em;
background-color: lightgreen;
-webkit-transition: -webkit-transform 1s ease-in-out, margin 500ms ease-in-out;
-moz-transition: transform 1s ease-in-out, margin 500ms ease-in-out;
transition: transform 1s ease-in-out, margin 500ms ease-in-out;
transition-property: transform, margin;
}
#divtransitionshape:hover {
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>
· WTFPL<br>
<a href="https://git.dotya.ml/wanderer/TEW-0x00" target="_blank" title="page source">source</a>
</footer>
</body>
</html>