پیشنمایش زنده
کد HTML
<div class="card-container">
<div class="pixar-card" role="article" aria-labelledby="card-username">
<div class="card-header">
<div class="card-avatar"></div>
<p class="card-username" id="card-username">Buzz Lightyear</p>
</div>
<div class="card-image-area">
<div class="card-image-placeholder"></div>
<p class="card-caption">
To infinity... and beyond! Having a great time exploring the outer
sectors.
</p>
</div>
<div class="card-actions">
<button class="action-button like-button" aria-label="Like Post">
<svg class="action-button-icon" viewBox="0 0 24 24">
<path
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
></path>
</svg>
</button>
<button class="action-button comment-button" aria-label="Comment on Post">
<svg class="action-button-icon" viewBox="0 0 24 24">
<path
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
></path>
</svg>
</button>
</div>
</div>
</div>
کد CSS
.card-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #f0e4d4;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
.pixar-card {
--ui-blue: #5c99e2;
--ui-blue-shadow: #3b76c0;
--ui-green: #61c470;
--ui-green-shadow: #45a253;
--ui-red: #e65e5e;
--ui-red-shadow: #c14242;
--ui-cream: #f5f1e8;
--ui-cream-shadow: #c7c1b5;
--ui-dark: #4d4c4a;
--button-press-depth: 0.15em;
position: relative;
width: 19em;
max-width: 300px;
max-height: 400px;
background-color: var(--ui-cream);
border-radius: 1.5em;
padding: 1.2em;
border: 0.2em solid var(--ui-dark);
box-shadow: 0.6em 0.6em 0 var(--ui-dark);
display: flex;
flex-direction: column;
transition:
transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pixar-card:hover {
transform: translateY(-0.5em) rotate(-2deg);
box-shadow: 0.8em 0.8em 0 var(--ui-dark);
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 1em;
}
.card-avatar {
width: 3.5em;
height: 3.5em;
border-radius: 50%;
background: linear-gradient(45deg, #f9a86d, #f48a58);
border: 0.2em solid var(--ui-dark);
box-shadow: 0.2em 0.2em 0 var(--ui-dark);
flex-shrink: 0;
transition: transform 0.3s ease;
}
.pixar-card:hover .card-avatar {
transform: scale(1.05) rotate(5deg);
}
.card-username {
margin: 0 0 0 0.8em;
font-size: 1.2em;
font-weight: 700;
color: var(--ui-dark);
}
.card-image-area {
background-color: #d8d2c6;
border-radius: 1em;
padding: 0.8em;
border: 0.2em solid var(--ui-dark);
box-shadow: inset 0.2em 0.2em 0 #b3ac9f;
}
.card-image-placeholder {
width: 100%;
height: 5em;
border-radius: 0.6em;
background: linear-gradient(135deg, var(--ui-blue), #8cb9e8);
border: 0.2em solid var(--ui-dark);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pixar-card:hover .card-image-placeholder {
transform: scale(1.03);
}
.card-caption {
margin: 1em 0 0 0;
font-size: 0.9em;
line-height: 1.4;
color: var(--ui-dark);
font-weight: 600;
}
.card-actions {
display: flex;
justify-content: space-around;
margin-top: 1.5em;
}
.action-button {
background: var(--ui-green);
border: 0.2em solid var(--ui-dark);
border-radius: 1em;
padding: 0.5em;
cursor: pointer;
box-shadow:
0 var(--button-press-depth) 0 var(--ui-green-shadow),
0 0.4em 0 var(--ui-dark);
transition:
transform 0.1s ease,
box-shadow 0.1s ease;
}
.action-button:active {
transform: translateY(var(--button-press-depth));
box-shadow:
0 0 0 var(--ui-green-shadow),
0 var(--button-press-depth) 0 var(--ui-dark);
}
.like-button {
background: var(--ui-red);
box-shadow:
0 var(--button-press-depth) 0 var(--ui-red-shadow),
0 0.4em 0 var(--ui-dark);
}
.like-button:active {
box-shadow:
0 0 0 var(--ui-red-shadow),
0 var(--button-press-depth) 0 var(--ui-dark);
}
.action-button-icon {
width: 1.8em;
height: 1.8em;
stroke: var(--ui-dark);
stroke-width: 2.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
display: block;
}