diff options
Diffstat (limited to 'build/animated-card-tiles')
| -rw-r--r-- | build/animated-card-tiles/index.html | 329 |
1 files changed, 329 insertions, 0 deletions
diff --git a/build/animated-card-tiles/index.html b/build/animated-card-tiles/index.html new file mode 100644 index 0000000..0ef7448 --- /dev/null +++ b/build/animated-card-tiles/index.html @@ -0,0 +1,329 @@ +<!doctype html> +<html lang="en" id="top"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="icon" href="data:,"> + <title>Animated Card Tiles</title> + <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>Animated Card Tiles</h1> +<p>2019-02-27</p> +<p><em>The design trend of using "cards" or "tiles" to display interactive</em> sections/article headings in an app or website remains a popular choice among designers. So, let's build a set of animated cards with only HTML & CSS. </p> +<h2>What we will be building (live demo)</h2> +<p>This is the set of animated card tiles we will be creating:</p> +<p><em>(try hovering)</em></p> +<p><a href="https://codepen.io/bradleytaunt/pen/rNjBpob">Live CodePen</a></p> +<h2>The HTML</h2> +<p>For the base skeleton of these cards we only need:</p> +<ul> +<li>a <code>flexbox</code> main container to hold everything</li> +<li>a <code>.card-tile</code> parent element</li> +<li>the inner child element that will display on <code>:hover</code></li> +<li>proper <code>h4</code> and <code>p</code> tags inside that child element</li> +</ul> +<pre><code><div class="card-tiles-container"> + <div class="card-tile"> + <div class="text-content"> + <h4>Card Title</h4> + <p>Inner card content text</p> + </div> + </div> +</div> +</code></pre> +<p>That's all that is needed - for now. We will be returning to this code shortly to add some extra classes to make our lives easier.</p> +<h2>The CSS</h2> +<p>First we set the main housing container to use <code>flex</code> so we save ourselves the headache of aligning all the cards in a nice row:</p> +<pre><code>.card-tiles-container { + display: flex; + font-size: 14px; + margin: 20px 0; +} +</code></pre> +<p>Next we create the default styling for our tile cards and set the <code>transform</code> property to scale the card on <code>:hover</code>:</p> +<pre><code>/* Default card tile styles */ +.card-tile { + border: 1px solid; + border-radius: 10px; + cursor: pointer; + height: 150px; + margin: 0 10px; + overflow: hidden; + position: relative; + width: 33.33%; +} +.card-tile:hover { + transform: scale(1.1); +} +</code></pre> +<h3>Where are my cards?!</h3> +<p>Don't panic if you can't <em>visually</em> see any card elements in your demo yet - that's to be expected. We will be styling these card elements momentarily.</p> +<p>Our next step is to hide the default inner <code>text-content</code> and only show it on hover. We achieve this by setting it's position to <code>absolute</code>, placing it's opacity at 0 and pushing it's z-index back to -1.</p> +<p>When the user hovers over a main card tile, we change the <code>text-content</code> values of both the opacity and z-index to 1.</p> +<pre><code>/* Card tile text content */ +.card-tile .text-content { + background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%); + bottom: 10px; + border: 1px solid rgba(0,0,0,0.4); + border-radius: 5px; + box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), + 0 2px 4px rgba(0,0,0,0.5); + height: 65px; + left: 10px; + opacity: 0; + padding: 10px; + position: absolute; + width: calc(100% - 20px); + z-index: -1; +} +.card-tile:hover .text-content { + opacity: 1; + z-index: 1; +} +</code></pre> +<p>Finally we add some minor styling for the inner header and paragraph tags:</p> +<pre><code>.card-tile .text-content h4, +.card-tile .text-content p { + color: #fff; + margin: 0; + text-shadow: 1px 1px 1px rgba(0,0,0,0.6); +} +</code></pre> +<h3>Don't forget mobile</h3> +<p>We want out UI to stack the cards if users are viewing them on smaller devices:</p> +<pre><code>@media(max-width: 600px) { + .card-tiles-container { + flex-direction: column; + } + .card-tile { + margin: 0 0 10px 0; + width: 100%; + } +} +</code></pre> +<h2>Customizing each card</h2> +<p>Remember how I mentioned that we would be adding more classes to the original HTML? Now is the time. We will be including a simple class on each card tile to provide it's own custom coloring:</p> +<pre><code><div class="card-tiles-container"> + <!-- `Blue` class --> + <div class="card-tile blue"> + <div class="text-content"> + <h4>Card Title</h4> + <p>Inner card content text</p> + </div> + </div> + <!-- `Orange` class --> + <div class="card-tile orange"> + <div class="text-content"> + <h4>Card Title</h4> + <p>Inner card content text</p> + </div> + </div> + <!-- `Green` class --> + <div class="card-tile green"> + <div class="text-content"> + <h4>Card Title</h4> + <p>Inner card content text</p> + </div> + </div> +</div> +</code></pre> +<p>And these color classes correlate to some new CSS styling:</p> +<pre><code>/* Blue Card */ +.card-tile.blue { + background-color: #0093E9; + background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%); + border-color: #0093E9; + box-shadow: 0 4px 12px rgba(128,208,199,0.7), + inset 0 2px 1px rgba(255,255,255,0.6); +} +.card-tile.blue:hover { + box-shadow: 0 8px 18px rgba(128,208,199,0.4), + inset 0 2px 1px rgba(255,255,255,0.6); +} +</code></pre> +<pre><code>/* Orange Card */ +.card-tile.orange { + background-color: #FAD961; + background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%); + border-color: #F76B1C; + box-shadow: 0 4px 12px rgba(247,107,28,0.7), + inset 0 2px 1px rgba(255,255,255,0.6); +} +.card-tile.orange:hover { + box-shadow: 0 8px 18px rgba(247,107,28,0.4), + inset 0 2px 1px rgba(255,255,255,0.6); +} +</code></pre> +<pre><code>/* Green Card */ +.card-tile.green { + background-color: #096e40; + background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%); + border-color: #096e40; + box-shadow: 0 4px 12px rgba(9,110,64,0.7), + inset 0 2px 1px rgba(255,255,255,0.6); +} +.card-tile.green:hover { + box-shadow: 0 8px 18px rgba(9,110,64,0.4), + inset 0 2px 1px rgba(255,255,255,0.6); +} +</code></pre> +<h3>Adding transitions</h3> +<p>We can now see the actual cards visually and have the ability to interact with them, but there is a problem - they don't animate.</p> +<p>Lucky we can target all elements we wish to animate with the <code>transition</code> property, like so:</p> +<pre><code>/* Shared transitions */ +.card-tile, +.card-tile .text-content { + transition: .3s ease all; +} +</code></pre> +<p>Done and done.</p> +<h2>The final code</h2> +<p>To make things easier for reference, I have included all the <code>html</code> and <code>css</code> below. Please feel free to use these cards anywhere you like and change them as you see fit!</p> +<h3>HTML</h3> +<pre><code><div class="card-tiles-container"> + <div class="card-tile blue"> + <div class="text-content"> + <h4>Card Title</h4> + <p>Inner card content text</p> + </div> + </div> + <div class="card-tile orange"> + <div class="text-content"> + <h4>Card Title</h4> + <p>Inner card content text</p> + </div> + </div> + <div class="card-tile green"> + <div class="text-content"> + <h4>Card Title</h4> + <p>Inner card content text</p> + </div> + </div> +</div> +</code></pre> +<h3>CSS</h3> +<pre><code>.card-tiles-container { + display: flex; + font-size: 14px; + margin: 20px 0; +} +/* Shared transitions */ +.card-tile, +.card-tile .text-content { + transition: .3s ease all; +} +/* Default card tile styles */ +.card-tile { + border: 1px solid; + border-radius: 10px; + cursor: pointer; + height: 150px; + margin: 0 10px; + overflow: hidden; + position: relative; + width: 33.33%; +} +/* Blue Card */ +.card-tile.blue { + background-color: #0093E9; + background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%); + border-color: #0093E9; + box-shadow: 0 4px 12px rgba(128,208,199,0.7), + inset 0 2px 1px rgba(255,255,255,0.6); +} +.card-tile.blue:hover { + box-shadow: 0 8px 18px rgba(128,208,199,0.4), + inset 0 2px 1px rgba(255,255,255,0.6); +} +/* Orange Card */ +.card-tile.orange { + background-color: #FAD961; + background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%); + border-color: #F76B1C; + box-shadow: 0 4px 12px rgba(247,107,28,0.7), + inset 0 2px 1px rgba(255,255,255,0.6); +} +.card-tile.orange:hover { + box-shadow: 0 8px 18px rgba(247,107,28,0.4), + inset 0 2px 1px rgba(255,255,255,0.6); +} +/* Green Card */ +.card-tile.green { + background-color: #096e40; + background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%); + border-color: #096e40; + box-shadow: 0 4px 12px rgba(9,110,64,0.7), + inset 0 2px 1px rgba(255,255,255,0.6); +} +.card-tile.green:hover { + box-shadow: 0 8px 18px rgba(9,110,64,0.4), + inset 0 2px 1px rgba(255,255,255,0.6); +} +/* Card tile text content */ +.card-tile .text-content { + background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%); + bottom: 10px; + border: 1px solid rgba(0,0,0,0.4); + border-radius: 5px; + box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), + 0 2px 4px rgba(0,0,0,0.5); + height: 65px; + left: 10px; + opacity: 0; + padding: 10px; + position: absolute; + width: calc(100% - 20px); + z-index: -1; +} +.card-tile .text-content h4, +.card-tile .text-content p { + color: #fff; + margin: 0; + text-shadow: 1px 1px 1px rgba(0,0,0,0.6); +} +/* All animations on hover */ +.card-tile:hover { + transform: scale(1.1); +} +.card-tile:hover .text-content { + opacity: 1; + z-index: 1; +} +@media(max-width: 600px) { + .card-tiles-container { + flex-direction: column; + } + .card-tile { + margin: 0 0 10px 0; + width: 100%; + } +} +</code></pre> +<footer role="contentinfo"> + <h2>Menu Navigation</h2> + <ul id="menu"> + <li><a href="/">Home</a></li> + <li><a href="/projects">Projects</a></li> + <li><a href="/uses">Uses</a></li> + <li><a href="/wiki">Wiki</a></li> + <li><a href="/resume">Resume</a></li> + <li><a href="/colophon">Colophon</a></li> + <li><a href="/now">Now</a></li> + <li><a href="/donate">Donate</a></li> + <li><a href="/atom.xml">RSS</a></li> + <li><a href="#top">↑ Top of the page</a></li> + </ul> + <small> + Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br> + Maintained with ♥ for the web. <br> + Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br> + The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>. + </small> +</footer>
\ No newline at end of file |