影を入れたシンプルなCSSカードデザイン
「box-shadow」で影を入れカードを浮かせたようにしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
padding: 1rem;
}
.card {
display: flex;
flex-direction: column;
width: 30%;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 0;
border-radius: 0.25rem;
box-shadow: 0 10px 20px #ccc;
color: #333;
text-decoration: none;
transition: 0.5s;
}
.card-image {
width: 100%;
object-fit: contain;
}
.card-box {
padding: 1rem;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.card:hover {
box-shadow: 0 10px 20px #999;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="pic-container">
<div class="wrapper">
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2016/05/24/16/48/mountains-1412683_640.png">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2016/05/24/16/48/mountains-1412683_640.png">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2016/05/24/16/48/mountains-1412683_640.png">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
</div>
</div>
</body></html>
画像を半円に切り抜いたCSSカードデザイン
「clip-path」で画像を半円にしてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f1f1f1;
}
.wrapper {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}
.card {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-basis: 48%;
word-wrap: break-word;
background-color: #efefef;
background-clip: border-box;
border: 0;
border-radius: 0.25rem;
box-shadow: 0 10px 20px #ccc;
transition: .5s;
text-decoration: none;
color: #333;
}
.card-image {
width: 100%;
height: 230px;
object-fit: cover;
clip-path: circle(65% at top);
}
.card:hover {
box-shadow: 0 10px 20px #999;
}
.card-box {
padding: 1rem;
color: #333;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="pic-container">
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2018/01/15/07/52/woman-3083401_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
</div>
</body></html>
画像を丸く切り抜いたCSSカードデザイン
「border-radius: 50%;」で画像を丸く切り抜いてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
padding: 0.5rem;
}
.card {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-basis: 30%;
word-wrap: break-word;
background-color: #131D26;
background-clip: border-box;
border: 0;
border-radius: 0.25rem;
box-shadow: 0 10px 20px #ccc;
text-decoration: none;
transition: .5s;
}
.card-image {
margin: 2rem;
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
}
.card:hover {
box-shadow: 0 10px 20px #999;
}
.card-box {
padding: 1rem;
background-color: #62C69A;
color: white;
text-align: center;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="pic-container">
<div class="wrapper">
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_150.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_150.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_150.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
</div>
</div>
</body></html>
画像・テキストを水平方向に配置したCSSカードデザイン
「box-shadow」で影を入れカードを浮かせたようにしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f1f1f1;
}
.card {
display: flex;
align-items: center;
padding: 1rem;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 0;
border-radius: 0.25rem;
box-shadow: 0 10px 20px #ccc;
transition: 0.5s;
width: 600px;
}
.card-image {
width: 30%;
height: 100px;
object-fit: contain;
}
.card-box {
padding-left: 1rem;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.card-link {
color: #333;
text-decoration: none;
}
.card-link:hover .card {
box-shadow: 0 5px 10px #ccc;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 900px; height: 368px; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="pic-container">
<a href="#" class="card-link" target="_blank">
<div class="card pic-image">
<img class="card-image" src="https://cdn.pixabay.com/photo/2020/10/21/18/07/laptop-5673901_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</div>
</a>
</div>
</body></html>
境界線を入れたシンプルなCSSカードデザイン
ホバー時「box-shadow」で影を入れカードを浮かせたようにしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f1f1f1;
}
.wrapper {
display: flex;
justify-content:center;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}
.card {
display: flex;
flex-direction: column;
flex-basis: 30%;
padding: 1rem;
word-wrap: break-word;
background-color: #fff;
box-sizing: border-box;
border-radius: 0.25rem;
border: 1px solid #cdcdcd;
color: #333;
text-decoration: none;
transition: 0.5s;
}
.card-image {
width: 100%;
object-fit: contain;
}
.card-box {
padding: 1rem 0;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.card:hover {
box-shadow: 0 10px 20px #999;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 900px; height: 450px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<div class="wrapper">
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2020/03/03/20/31/boat-4899802_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2020/03/03/20/31/boat-4899802_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2020/03/03/20/31/boat-4899802_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
</div>
</div>
</body></html>