Untuk menampilkan CSS Card secara horizontal kita dapat membuatnya dengan coding berikut ini.
Pada script CSS kita gunakan ukuran tinggi dan lebar secara relative dengan satuan em (2em = 2 kali ukuran font saat ini) dan juga vh (1vh = 1% dari tinggi viewport).
Pada script CSS ini juga kita buat supaya tampilan text yang terlalu panjang ditampilkan gradient seolah-olah akan hilang/putus seperti pada card 5.
Berikut coding selengkapnya.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Horizontal Cards</title>
<style>
html,body {
margin: 0; padding:0;
width: 100vw;
overflow-x: hidden;
background-color: #f0f0f0;
font: 14px 'Open Sans', sans-serif;
line-height: 1.4em;
color: #404646;
}
header {
overflow: hidden;
background-color:#1565C0;
color:#ffffff;
padding: 10px;
text-align: center;
font: bold 25px Roboto;
}
.container {
box-sizing: border-box;
min-height: 83vh;
width: 100%;
margin: auto;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
padding: 0.2em;
}
.card {
margin: 0.5em 1.2em 0.5em 0.1em;
height: 14em;
max-width: 99%;
flex: 1 1 auto;
display: flex;
background-color: white;
box-shadow: 1px 3px 3px rgba(0, 10, 20, 0.06);
border-radius: 15px;
}
.card img {
height: 100%;
max-width: 10em;
-o-object-fit: cover;
object-fit: cover;
flex: 1 1 auto;
border-radius: 15px 0 0 15px;
}
.card-body {
width: 12em;
max-height: 100%;
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
padding: 1em;
}
.card-body button {
min-width: 8.3em;
flex: none;
align-self: flex-start;
margin-top: auto;
padding: 0.6em 1.2em;
font-size: 0.92em;
color: #404646;
background: none;
border: 0.5px solid #777;
border-radius: 5px;
}
.card-body button:hover {
border-color: #BBDEFB;
background:#BBDEFB;
}
.card-text {
position: relative;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 0 0.8em 0;
padding: 0;
}
.card-text h3, .card-text p {
margin-top: 0;
}
.card-text:after {
position: absolute;
bottom: 0;
content: "";
width: 100%;
height: 1em;
background: linear-gradient(rgba(255, 255, 255, 0), white);
}
a {
color: #d07777;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
footer {
position:relative;
left: 0;
bottom: 0;
height: 40px;
width: 100%;
background-color:#1565C0;
color: white;
text-align: center;
vertical-align: text-bottom;
}
</style>
</head>
<body>
<header>CSS Horizontal Cards</header>
<div class='container'>
<div class='card'>
<img src='https://images.pexels.com/photos/462235/pexels-photo-462235.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
<div class='card-body'>
<div class='card-text'>
<h3>1. Lorem ipsum</h3>
<p>
Also check out the
<a href='https://codepen.io/abcretrograde/pen/ZogNOZ' target='_blank'>Grid&nbsp;version</a>
</p>
</div>
<button>More...</button>
</div>
</div>
<div class='card'>
<img src='https://images.pexels.com/photos/1065711/pexels-photo-1065711.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
<div class='card-body'>
<div class='card-text'>
<h3>2. Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<button>More...</button>
</div>
</div>
<div class='card'>
<img src='https://images.pexels.com/photos/139248/pexels-photo-139248.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
<div class='card-body'>
<div class='card-text'>
<h3>3. Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<button>More...</button>
</div>
</div>
<div class='card'>
<img src='https://images.pexels.com/photos/6273/home-decoration-interior-decor.jpg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
<div class='card-body'>
<div class='card-text'>
<h3>4. Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<button>More...</button>
</div>
</div>
<div class='card'>
<img src='https://images.pexels.com/photos/924675/pexels-photo-924675.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'/>
<div class='card-body'>
<div class='card-text'>
<h3>5. Lorem ipsum</h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.In porttitor porta mi pharetra tempor.</p>
</div>
<button>More...</button>
</div>
</div>
</div>
<div style="clear: both;"></div>
<footer><p>CSS Horizontal Card - &copy; 2019</p></footer>
</body>
</html>
Selamat mencoba. Semoga bermanfaat.