8,957
edits
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
/* --- ImageFrame Styles --- */ | |||
.image-frame { | |||
display: inline-block; | |||
padding: 12px 24px 8px 24px; /* Тонкие верх/низ, широкие бока */ | |||
border-left: 16px solid #c72a37; /* Боковые стороны широкие */ | |||
border-right: 16px solid #c72a37; | |||
border-top: 6px solid #d7484b; /* Верх и низ тоньше, чуть светлее */ | |||
border-bottom: 6px solid #d7484b; | |||
background: #181217; | |||
border-radius: 24px; | |||
box-shadow: 0 4px 20px rgba(50,20,30,0.07); | |||
margin: 16px auto; | |||
transition: | |||
transform 0.4s cubic-bezier(.22,1,.36,1), | |||
box-shadow 0.4s cubic-bezier(.22,1,.36,1), | |||
opacity 0.8s cubic-bezier(.22,1,.36,1); | |||
opacity: 0; | |||
transform: scale(0.96) translateY(40px); | |||
animation: frameIn 1s cubic-bezier(.22,1,.36,1) forwards; | |||
text-align: center; | |||
max-width: 370px; | |||
} | |||
@keyframes frameIn { | |||
to { | |||
opacity: 1; | |||
transform: scale(1) translateY(0); | |||
} | |||
} | |||
.image-frame:hover, .image-frame:focus-within { | |||
transform: scale(1.06) translateY(-8px); | |||
box-shadow: 0 12px 32px rgba(150,20,20,0.18), 0 2px 14px rgba(0,0,0,0.09); | |||
z-index: 3; | |||
} | |||
/* Картинка внутри рамки */ | |||
.framed-img, .image-frame img { | |||
display: block; | |||
max-width: 98%; | |||
margin: 0 auto 6px auto; | |||
border-radius: 14px; | |||
box-shadow: 0 1.5px 5px rgba(0,0,0,0.06); | |||
} | |||
/* Подпись */ | |||
.image-caption { | |||
font-size: 1.11em; | |||
margin-top: 6px; | |||
color: #e0a6b4; | |||
letter-spacing: .02em; | |||
font-family: 'Segoe UI', 'Arial', sans-serif; | |||
text-align: center; | |||
padding-bottom: 2px; | |||
} | |||