Пример как сделать адаптивные отзывы на CSS.
На сегодня основная масса пользователей интернета пользуются мобильными телефонами, но и с компьютеров тоже не малое их число. Несомненно важно иметь адаптивный дизайн сайта под любые устройства, чтобы не отставать от прогресса и современного дизайна!
И вот очередной пример использования адаптивных отзывов для сайта на чистом CSS.
HTML:
<div class="testimonial">
<p>" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet faucibus turpis ac accumsan. Integer aliquet semper massa quis commodo. Nam quis nibh vel ante imperdiet ornare a in lacus. Phasellus laoreet pretium diam ac semper "</p>
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Jane Doe">
<h4>Jane Doe</h4>
</div>
<div class="testimonial">
<p>" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet faucibus turpis ac accumsan. Integer aliquet semper massa quis commodo. Nam quis nibh vel ante imperdiet ornare a in lacus. Phasellus laoreet pretium diam ac semper "</p>
<img src="https://randomuser.me/api/portraits/men/14.jpg" alt="John Doe">
<h4>John Doe</h4>
</div>
CSS:
.testimonial {
--w:600px;
--c:calc(100vw - var(--w));
max-width:500px;
margin:20px auto clamp(20px,var(--c)*-1000,120px);
position:relative;
padding-right:clamp(0px,var(--c)*1000,140px);
}
.testimonial p {
padding:10px;
background:#37b1d9;
border-radius:15px;
margin:0;
font-size:20px;
}
.testimonial img {
position:absolute;
width:clamp(60px,var(--c)*1000,100px);
border-radius:50%;
right:clamp(0px,var(--c)*-1000,40px);
top:clamp(0%,var(--c)*-1000,calc(100% + 15px));
}
.testimonial h4 {
position:absolute;
top:clamp(110px,var(--c)*-1000,calc(100% + 35px));
right:clamp(50px,var(--c)*-1000,110px);
transform:translate(clamp(0px,var(--c)*1000,50%));
margin:0;
}
.testimonial:before {
content: "";
position: absolute;
top: clamp(50px,var(--c)*-1000,calc(100% - 18px));
right: clamp(0px,var(--c)*1000,110px);
width: 40px;
height: 40px;
background: #37b1d9;
clip-path: polygon(20% 0,100% 00%,0 100%);
}
Демо
Вот живая демонстрация:
