2026/02/21
Bloggerデザイン : 3Dレイヤー・フリップカード
1. デザインのタイプ
【3Dレイヤー・フリップカード】
カードが回転し、さらに文字が浮かび上がる立体的なカードデザインです。
matsu_U
遊び人
Say hello
2. デザインの特徴
- 物理的浮遊感
文字要素をZ軸方向に浮かせることで、奥行きのある3D効果を演出します。 - スムーズな回転
perspectiveとrotateYを組み合わせた、ブレのない滑らかなフリップアニメーション。
3. 紹介コード
<!-- Font Awesome -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css' rel='stylesheet'/>
<div class="flip-card-container">
<div class="card">
<div class="card-inner">
<div class="front">
<img class="img" src="画像URL"/>
<div class="contents">
<h2 class="title">Paolo Duzioni</h2>
<p class="text">Web Developer</p>
</div>
</div>
<div class="back">
<div class="contents">
<h3 class="subtitle">Say hello</h3>
<ul class="socials">
<li><a href="https://www.facebook.com/paoloduzioni" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="https://twitter.com/PaoloDuzioni" target="_blank"><i class="fab fa-twitter-square"></i></a></li>
<li><a href="https://www.instagram.com/paoloduzionidev/" target="_blank"><i class="fab fa-instagram-square"></i></a></li>
<li><a href="https://www.linkedin.com/in/paolo-duzioni-a3162716a/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<style>
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap");
.flip-card-container {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 0;
font-family: "Source Sans Pro", sans-serif;
}
.flip-card-container .card {
background-color: transparent;
width: 320px;
height: 450px;
margin: 1rem;
perspective: 1000px;
}
.flip-card-container .card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
}
.flip-card-container .card:hover .card-inner {
transform: rotateY(180deg);
}
.flip-card-container .front,
.flip-card-container .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
}
.flip-card-container .front {
background-color: #6200EA;
color: white;
z-index: 2;
transform: rotateY(0deg);
}
.flip-card-container .front .img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
filter: grayscale(70%) brightness(40%);
transform: translateZ(0);
}
.flip-card-container .back {
background-color: #FF9E80;
background-image: linear-gradient(-45deg, #ff774d, #FF9E80);
color: white;
transform: rotateY(180deg);
}
.flip-card-container .contents {
position: relative;
z-index: 3;
transform: translateZ(80px);
}
.flip-card-container .card .contents .title {
font-size: 2.25em;
color: #fff !important;
margin: 0 !important;
}
.flip-card-container .card .contents .title::after,
.flip-card-container .card .contents .subtitle::after {
content: '';
display: block;
width: 30px;
height: 2px;
margin: 1rem auto;
background: #fff;
}
.flip-card-container .card .contents .subtitle {
font-size: 2em;
color: #fff !important;
margin: 0 !important;
}
.flip-card-container .card .contents .text {
font-size: 1.125em;
margin: 0 !important;
}
.flip-card-container .socials {
list-style: none !important;
display: flex;
justify-content: center;
padding: 0 !important;
margin: 0 !important;
}
.flip-card-container .socials a {
display: inline-block;
margin: .5rem;
font-size: 2em;
color: #fff !important;
transition: transform .3s;
}
.flip-card-container .socials a:hover {
transform: translateY(-5px) translateZ(20px);
}
</style>
Bloggerデザイン : グリッドカード
1. デザインのタイプ
【3Dレイヤー・フリップカード】
カードが回転し、さらに文字が浮かび上がる立体的なカードデザインです。
Paolo Duzioni
Web Developer
Say hello
2. デザインの特徴
- 物理的浮遊感
文字要素をZ軸方向に浮かせることで、奥行きのある3D効果を演出します。 - スムーズな回転
perspectiveとrotateYを組み合わせた、ブレのない滑らかなフリップアニメーション。
3. 紹介コード
<!-- Font Awesome -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css' rel='stylesheet'/>
<div class="flip-card-container">
<div class="card">
<div class="card-inner">
<div class="front">
<img class="img" src="https://images.unsplash.com/photo-1555949963-aa79dcee981c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ"/>
<div class="contents">
<h2 class="title">Paolo Duzioni</h2>
<p class="text">Web Developer</p>
</div>
</div>
<div class="back">
<div class="contents">
<h3 class="subtitle">Say hello</h3>
<ul class="socials">
<li><a href="https://www.facebook.com/paoloduzioni" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="https://twitter.com/PaoloDuzioni" target="_blank"><i class="fab fa-twitter-square"></i></a></li>
<li><a href="https://www.instagram.com/paoloduzionidev/" target="_blank"><i class="fab fa-instagram-square"></i></a></li>
<li><a href="https://www.linkedin.com/in/paolo-duzioni-a3162716a/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<style>
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap");
.flip-card-container {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 0;
font-family: "Source Sans Pro", sans-serif;
}
.flip-card-container .card {
background-color: transparent;
width: 320px;
height: 450px;
margin: 1rem;
perspective: 1000px;
}
.flip-card-container .card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
}
.flip-card-container .card:hover .card-inner {
transform: rotateY(180deg);
}
.flip-card-container .front,
.flip-card-container .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
}
.flip-card-container .front {
background-color: #6200EA;
color: white;
z-index: 2;
transform: rotateY(0deg);
}
.flip-card-container .front .img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
filter: grayscale(70%) brightness(40%);
transform: translateZ(0);
}
.flip-card-container .back {
background-color: #FF9E80;
background-image: linear-gradient(-45deg, #ff774d, #FF9E80);
color: white;
transform: rotateY(180deg);
}
.flip-card-container .contents {
position: relative;
z-index: 3;
transform: translateZ(80px);
}
.flip-card-container .card .contents .title {
font-size: 2.25em;
color: #fff !important;
margin: 0 !important;
}
.flip-card-container .card .contents .title::after,
.flip-card-container .card .contents .subtitle::after {
content: '';
display: block;
width: 30px;
height: 2px;
margin: 1rem auto;
background: #fff;
}
.flip-card-container .card .contents .subtitle {
font-size: 2em;
color: #fff !important;
margin: 0 !important;
}
.flip-card-container .card .contents .text {
font-size: 1.125em;
margin: 0 !important;
}
.flip-card-container .socials {
list-style: none !important;
display: flex;
justify-content: center;
padding: 0 !important;
margin: 0 !important;
}
.flip-card-container .socials a {
display: inline-block;
margin: .5rem;
font-size: 2em;
color: #fff !important;
transition: transform .3s;
}
.flip-card-container .socials a:hover {
transform: translateY(-5px) translateZ(20px);
}
</style>
Bloggerデザイン : レスポンシブ対応グリッドレイアウト
1. デザインのタイプ
【CSS Grid Responsive Card Layout】
CSS Gridの auto-fill と minmax を活用した、レスポンシブ対応のカード型オーソドックスなグリッドレイアウトです。
Bloggerデザイン : Border Animation Hover Card
1. デザインのタイプ
【Border Animation Hover Card】
画像がシネマティックに暗転し、時間差で四方から白い枠線が浮かび上がる、洗練されたホバーエフェクト・カードです。ギャラリーサイトやポートフォリオで目を引く、インタラクティブなグリッドレイアウトを採用しています。
Bloggerデザイン : Expanding Flex Accordion
1. デザインのタイプ
【Expanding Flex Accordion】
Flexboxの伸縮性を最大限に活用した、インタラクティブな画像ギャラリーです。マウスを乗せたカードが滑らかに広がり、写真の全貌を映し出すモダンなレイアウトを採用しています。
Bloggerデザイン : グリッドズームカード
1. デザインのタイプ
【Grid Hover Zoom Card】
洗練されたグリッドレイアウトを採用し、ホバー時にカードが滑らかに拡大しながら、詳細情報が浮かび上がるモダンなギャラリーデザインです。
Bloggerデザイン : アコーディオンギャラリー
1. デザインのタイプ
【Vertical Accordion Gallery】
Playfair Displayと縦書き文字を採用した、高級感のあるアコーディオンギャラリーです。
