Дизайн карточки на чистом CSS

Дизайн карточки на чистом CSS

Создавать красивый дизайн у карточки можно только на чистом CSS с добавлением FontAwesome иконок.

HTML разметка

Внутри контейнера card у нас находится блок с окружностью, фотография и текстовый контент с иконками из библиотеки FontAwesome.

//ссылка на библиотеку
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer"/>

<div class="card">
    <div class="circle">
        <div class="imgBx">
        <img src="img.jpg">
        </div>
    </div>
    <div class="content">
        <a href="#" class="icon">
        <i class="fa fa-linkedin"></i>
        </a>
        <h3>Sophia Anderson</h3>
        <div class="text">
        <h4>Frontend Developer</h4>
        <a href="#"><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
        </div>
    </div>
</div>

CSS код

Разместим карточку в центре экрана.

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*{
    margin: 0;/*обнуление отступов*/
    padding: 0;/*обнуление полей*/
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex;/*гибкий flex контейнер*/
    justify-content: center;/*в центре по горизонтали*/
    align-items: center;/*в центре по вертикали*/
    background: radial-gradient(#777,#111);/*градиентный фон*/
    min-height: 100vh;/*на всю высоту экрана*/
}
.card{
    position: relative;/*относительное позиционирование*/
    width: 340px;/*ширина карточки*/
    height: 450px;/*высота карточки*/
    overflow: hidden;/*скрыть за пределами карточки*/
    background: #fff;/*фон карточки*/
    border-radius: 10px;/*закругление углов*/
}

Дизайн карточки на чистом CSS

С помощью свойства clip-path отсечем по форме круга часть изображения внизу. Псевдоэлемент before создаст декоративную розовую полоску.

.circle{
    position: absolute;/*абсолютное позиционирование*/
    top: -190px;/*позиция сверху*/
    left: 50%;/*позиция слева*/
    transform: translateX(-50%);/*сдвиг по оси X*/
    width: 500px;/*ширина*/
    height: 500px;/*высота*/
    clip-path: circle();/*отсечение по кругу*/
    background: #f00;
}
.circle::before{
    content: '';
    position: absolute;
    top: -8px;
    left: -16px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: transparent;/*прозрачный фон*/
    box-shadow: 0 0 0 20px rgba(255,0,0,0.5);/*тень*/
    z-index: 10000;/*на верхнем слое*/
    pointer-events: none;
}

Дизайн карточки на чистом CSS

Позиционируем картинку так, как нам надо и установим hover-эффект масштабирования.

.imgBx{
    position: absolute;
    width: 340px;
    height: 310px;
    background: #ff0;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 1000;
}
.imgBx img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;/*сохраняет соотношение сторон*/
    transition: 0.5s;/*плавный переход*/
    transform-origin: top;/*направление трансформации*/
}
.imgBx:hover img{
    transform: scale(1.5);/*масштабирование*/
}

И последнее — оформим текст и иконки.

.content{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 140px;
    padding: 20px 30px;
}
.fa-linkedin{
    background: #0e76a8;
    padding: 2px 4px;
    color: #fff;
    border-radius: 2px;
}
h3{
    margin: 7px 0 2px;
    font-size: 1.4em;
    font-weight: 700;
    color: #333;
}
.text{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text h4{
    font-weight: 500;
    color: #e91e63;
}
.text a .fa {
    color: #e91e63;
}

Дизайн карточки на чистом CSS

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button