From a7efc5d8b12b5536fdc27a7a32e5eb3087c76aca Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Wed, 3 Jul 2024 10:50:37 -0400 Subject: Test out kramdown --- posts/animated-card-tiles.md | 492 +++++++++++++++++++++++-------------------- 1 file changed, 258 insertions(+), 234 deletions(-) (limited to 'posts/animated-card-tiles.md') diff --git a/posts/animated-card-tiles.md b/posts/animated-card-tiles.md index 4cbc8b7..318583a 100644 --- a/posts/animated-card-tiles.md +++ b/posts/animated-card-tiles.md @@ -38,28 +38,32 @@ That's all that is needed - for now. We will be returning to this code shortly t 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; - } +~~~css +.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 */ - .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); - } +~~~css +/* 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); +} +~~~ ### Where are my cards?! @@ -69,118 +73,132 @@ Our next step is to hide the default inner `text-content` and only show it on ho 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 { - 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; - } +~~~css +/* 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; +} +~~~ 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; - margin: 0; - text-shadow: 1px 1px 1px rgba(0,0,0,0.6); - } +~~~css +.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); +} +~~~ ### 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; - } - .card-tile { - margin: 0 0 10px 0; - width: 100%; - } - } +~~~css +@media(max-width: 600px) { + .card-tiles-container { + flex-direction: column; + } + .card-tile { + margin: 0 0 10px 0; + width: 100%; + } +} +~~~ ## 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: -
- -
-
-

Card Title

-

Inner card content text

-
-
- -
-
-

Card Title

-

Inner card content text

-
-
- -
-
-

Card Title

-

Inner card content text

-
-
+~~~html +
+ +
+
+

Card Title

+

Inner card content text

+
+
+ +
+
+

Card Title

+

Inner card content text

+
+
+ +
+
+

Card Title

+

Inner card content text

+
+
+~~~ And these color classes correlate to some new CSS styling: - /* 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); - } +~~~css +/* 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); +} +~~~ + +~~~css +/* 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); +} +~~~ + +~~~css +/* 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); +} +~~~ ### Adding transitions @@ -188,11 +206,13 @@ We can now see the actual cards visually and have the ability to interact with t Lucky we can target all elements we wish to animate with the `transition` property, like so: - /* Shared transitions */ - .card-tile, - .card-tile .text-content { - transition: .3s ease all; - } +~~~css +/* Shared transitions */ +.card-tile, +.card-tile .text-content { + transition: .3s ease all; +} +~~~ Done and done. @@ -202,122 +222,126 @@ To make things easier for reference, I have included all the `html` and `css` be ### HTML -
-
-
-

Card Title

-

Inner card content text

-
-
-
-
-

Card Title

-

Inner card content text

-
-
-
-
-

Card Title

-

Inner card content text

-
-
+~~~html +
+
+
+

Card Title

+

Inner card content text

+
+
+
+
+

Card Title

+

Inner card content text

+
+
+
+
+

Card Title

+

Inner card content text

+
+
+~~~ ### CSS - .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%; - } - } +~~~css +.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%; + } +} +~~~ -- cgit v1.2.3-54-g00ecf