Modern CSS Cards
A card is a flexible box containing some padding around the content. It includes the animation which displays only the useful information to the user. It replaces the use of panels, wells, and thumbnails. It can be used in a single container called a card. To make animated Modern CSS Cards, you need to have a bit of HTML and CSS Knowledge as well, as it would be useful for creating it.
Example:
HTML
<!DOCTYPE html> < html > < head > < title >CSS Cards</ title > < link rel = "stylesheet" href = './index.css' /> </ head > < body > < div class = "container" > < div class = "card" > < div class = "content" > < h2 class = "title" >Data Structures</ h2 > < p class = "data" > A data structure is a particular way of organizing data in a computer so that it can be used effectively. </ p > </ div > </ div > < div class = "card" > < div class = "content" > < h2 class = "title" >Algorithms</ h2 > < p class = "data" > Algorithm refers to a set of rules/instructions that step-by -step define how a work is to be executed upon in order to get the expected results. </ p > </ div > </ div > < div class = "card" > < div class = "content" > < h2 class = "title" >Python</ h2 > < p class = "data" > Python is a high-level, general- purpose and a very popular programming language. </ p > </ div > </ div > < div class = "card" > < div class = "content" > < h2 class = "title" >Java</ h2 > < p class = "data" > Java is one of the most popular and widely used programming language. </ p > </ div > </ div > </ div > </ body > </ html > |
index.css: This file contains all the CSS Styling rules to create the custom animated sidebar.
CSS
* { box-sizing: border-box; } body { display : grid; place-items: center ; } .container { display : grid; grid-gap: 1 rem; padding : 1 rem; grid-template-columns: repeat ( 4 , 1 fr); } .card { position : relative ; display : flex; align-items: flex-end; overflow : hidden ; text-align : center ; color : white ; border-radius: 10px ; box-shadow: 0 1px 1px rgba( 0 , 0 , 0 , 0.1 ), 0 2px 2px rgba( 0 , 0 , 0 , 0.1 ), 0 4px 4px rgba( 0 , 0 , 0 , 0.1 ), 0 8px 8px rgba( 0 , 0 , 0 , 0.1 ), 0 16px 16px rgba( 0 , 0 , 0 , 0.1 ); height : 350px ; } .card:before { content : "" ; position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 110% ; background- size : cover; background-position : 0 0 ; transition: transform calc(var( 850 ms) * 1.5 ) var(cubic-bezier( 0.19 , 1 , 0.22 , 1 )); } .card:after { content : "" ; display : block ; position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 200% ; background-image : linear-gradient( to bottom , rgba( 0 , 0 , 0 , 0 ) 0% , rgba( 0 , 0 , 0 , 0.009 ) 11.7% , rgba( 0 , 0 , 0 , 0.034 ) 22.1% , rgba( 0 , 0 , 0 , 0.072 ) 31.2% , rgba( 0 , 0 , 0 , 0.123 ) 39.4% , rgba( 0 , 0 , 0 , 0.182 ) 46.6% , rgba( 0 , 0 , 0 , 0.249 ) 53.1% , rgba( 0 , 0 , 0 , 0.32 ) 58.9% , rgba( 0 , 0 , 0 , 0.394 ) 64.3% , rgba( 0 , 0 , 0 , 0.468 ) 69.3% , rgba( 0 , 0 , 0 , 0.54 ) 74.1% , rgba( 0 , 0 , 0 , 0.607 ) 78.8% , rgba( 0 , 0 , 0 , 0.668 ) 83.6% , rgba( 0 , 0 , 0 , 0.721 ) 88.7% , rgba( 0 , 0 , 0 , 0.762 ) 94.1% , rgba( 0 , 0 , 0 , 0.79 ) 100% ); transform: translateY( -50% ); transition: transform calc(var( 850 ms) * 2 ) var(cubic-bezier( 0.19 , 1 , 0.22 , 1 )); } .card:nth-child( 1 ):before { background-image : linear-gradient( to bottom right , #0F2027 , #2C5364 ); } .card:nth-child( 2 ):before { background-image : linear-gradient( to bottom right , #333333 , #dd1818 ); } .card:nth-child( 3 ):before { background-image : linear-gradient( to bottom right , #0f0c29 , #24243e ); } .card:nth-child( 4 ):before { background-image : linear-gradient( to bottom right , #000046 , #1CB5E0 ); } .content { position : relative ; display : flex; flex- direction : column; align-items: center ; width : 100% ; padding : 1 rem; transition: transform var( 850 ms) var(cubic-bezier( 0.19 , 1 , 0.22 , 1 )); z-index : 1 ; } .title { font-size : 1.3 rem; font-weight : bold ; line-height : 1.2 ; } .data { margin-top : 1 rem; font-size : 1.125 rem; font-style : italic ; line-height : 1.35 ; } .card:after { transform: translateY( 0 ); } .content { transform: translateY(calc( 100% - 4.5 rem)); } .content>*:not(.title) { opacity: 0 ; transform: translateY( 1 rem); transition: transform var( 850 ms) var(cubic-bezier( 0.19 , 1 , 0.22 , 1 )), opacity var( 850 ms) var(cubic-bezier( 0.19 , 1 , 0.22 , 1 )); } .card:hover, .card:focus-within { align-items: center ; } .card:hover:before, .card:focus-within:before { transform: translateY( -4% ); } .card:hover:after, .card:focus-within:after { transform: translateY( -50% ); } .card:hover .content, .card:focus-within .content { transform: translateY( 0 ); } .card:hover .content>*:not(.title), .card:focus-within .content>*:not(.title) { opacity: 1 ; transform: translateY( 0 ); transition-delay: calc(var( 850 ms) / 8 ); } |
Output:
Supported Browsers:
- Google Chrome
- Edge
- Mozilla Firefox
- Opera
- Safari