From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/animated-card-tiles/index.html | 217 ++++++++++++++++++++--------------- 1 file changed, 125 insertions(+), 92 deletions(-) (limited to 'build/animated-card-tiles/index.html') diff --git a/build/animated-card-tiles/index.html b/build/animated-card-tiles/index.html index 0ef7448..699610d 100644 --- a/build/animated-card-tiles/index.html +++ b/build/animated-card-tiles/index.html @@ -1,54 +1,61 @@ - + Animated Card Tiles - - + + +
-

Animated Card Tiles

+

Animated Card Tiles

+

2019-02-27

-

The design trend of using "cards" or "tiles" to display interactive 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.

-

What we will be building (live demo)

+ +

The design trend of using “cards” or “tiles” to display interactive 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.

+ +

What we will be building (live demo)

+

This is the set of animated card tiles we will be creating:

+

(try hovering)

+

Live CodePen

-

The HTML

+ +

The HTML

+

For the base skeleton of these cards we only need:

+ -
<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>
-
-

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.

-

The CSS

+ +

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.

+ +

The CSS

+

First we set the main housing container to use flex so we save ourselves the headache of aligning all the cards in a nice row:

+ 
.card-tiles-container {
     display: flex;
     font-size: 14px;
     margin: 20px 0;
 }
+

Next we create the default styling for our tile cards and set the transform property to scale the card on :hover:

-
/* Default card tile styles */
+
+
/* Default card tile styles */
 .card-tile {
     border: 1px solid;
     border-radius: 10px;
@@ -63,11 +70,16 @@
     transform: scale(1.1);
 }
 

-
Where are my cards?!

-
Don't panic if you can't visually see any card elements in your demo yet - that's to be expected. We will be  styling these card elements momentarily.

-
Our next step is to hide the default inner text-content and only show it on hover. We achieve this by setting it's position to absolute, placing it's opacity at 0 and pushing it's z-index back to -1.

+
+
Where are my cards?!

+
+
Don’t panic if you can’t visually see any card elements in your demo yet - that’s to be expected. We will be  styling these card elements momentarily.

+
+
Our next step is to hide the default inner text-content and only show it on hover. We achieve this by setting it’s position to absolute, placing it’s opacity at 0 and pushing it’s z-index back to -1.

+
 
When the user hovers over a main card tile, we change the text-content values of both the opacity and z-index to 1.

-
/* Card tile text content */
+
+
/* 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;
@@ -88,7 +100,9 @@
     z-index: 1;
 }
 

+
 
Finally we add some minor styling for the inner header and paragraph tags:

+
 
.card-tile .text-content h4,
 .card-tile .text-content p {
     color: #fff;
@@ -96,8 +110,11 @@
     text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
 }
 

-
Don't forget mobile

+
+
Don’t forget mobile

+
 
We want out UI to stack the cards if users are viewing them on smaller devices:

+
 
@media(max-width: 600px) {
     .card-tiles-container {
         flex-direction: column;
@@ -108,34 +125,39 @@
     }
 }
 

-
Customizing each card

-
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:

-
<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>
+
+
Customizing each card

+
+
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:

+
+
<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>
 

+
 
And these color classes correlate to some new CSS styling:

-
/* Blue Card */
+
+
/* Blue Card */
 .card-tile.blue {
     background-color: #0093E9;
     background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
@@ -147,8 +169,8 @@
     box-shadow: 0 8px 18px rgba(128,208,199,0.4), 
                 inset 0 2px 1px rgba(255,255,255,0.6);
 }
-

-
/* Orange Card */
+
+/* Orange Card */
 .card-tile.orange {
     background-color: #FAD961;
     background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
@@ -160,8 +182,8 @@
     box-shadow: 0 8px 18px rgba(247,107,28,0.4), 
                 inset 0 2px 1px rgba(255,255,255,0.6);
 }
-

-
/* Green Card */
+
+/* Green Card */
 .card-tile.green {
     background-color: #096e40;
     background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%);
@@ -174,52 +196,63 @@
                 inset 0 2px 1px rgba(255,255,255,0.6);
 }
 

-
Adding transitions

-
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.

+
+
Adding transitions

+
+
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.

+
 
Lucky we can target all elements we wish to animate with the transition property, like so:

-
/* Shared transitions */
+
+
/* Shared transitions */
 .card-tile,
 .card-tile .text-content {
     transition: .3s ease all;
 }
 

+
 
Done and done.

-
The final code

+
+
The final code

+
 
To make things easier for reference, I have included all the html and css below. Please feel free to use these cards anywhere you like and change them as you see fit!

-
HTML

-
<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>
+
+
HTML

+
+
<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>
 

-
CSS

+
+
CSS

+
 
.card-tiles-container {
     display: flex;
     font-size: 14px;
     margin: 20px 0;
 }
-/* Shared transitions */
+/* Shared transitions */
 .card-tile,
 .card-tile .text-content {
     transition: .3s ease all;
 }
-/* Default card tile styles */
+/* Default card tile styles */
 .card-tile {
     border: 1px solid;
     border-radius: 10px;
@@ -230,7 +263,7 @@
     position: relative;
     width: 33.33%;
 }
-/* Blue Card */
+/* Blue Card */
 .card-tile.blue {
     background-color: #0093E9;
     background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
@@ -242,7 +275,7 @@
     box-shadow: 0 8px 18px rgba(128,208,199,0.4), 
                 inset 0 2px 1px rgba(255,255,255,0.6);
 }
-/* Orange Card */
+/* Orange Card */
 .card-tile.orange {
     background-color: #FAD961;
     background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
@@ -254,7 +287,7 @@
     box-shadow: 0 8px 18px rgba(247,107,28,0.4), 
                 inset 0 2px 1px rgba(255,255,255,0.6);
 }
-/* Green Card */
+/* Green Card */
 .card-tile.green {
     background-color: #096e40;
     background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%);
@@ -266,7 +299,7 @@
     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 */
 .card-tile .text-content {
     background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
     bottom: 10px;
@@ -288,7 +321,7 @@
     margin: 0;
     text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
 }
-/* All animations on hover */
+/* All animations on hover */
 .card-tile:hover {
     transform: scale(1.1);
 }
-- 
cgit v1.2.3-54-g00ecf