Полупрозрачный дизайн для бизнес карты

Полупрозрачный дизайн для бизнес карты

Полупрозрачный дизайн для бизнес карты

Полупрозрачная бизнес карта органично вписывается в любой дизайн сайта. Если поменять изображение у фона, например на летнюю тему, то бизнес карта заиграет оттенками лета.

HTML разметка + иконки

Бизнес карта состоит из фотографии, полного имени, номера телефона и емайла. Возьмем готовые иконки телефона и конверта из библиотеки Ionicons.


<div class="card">
  <div class="content">
    <div class="imgBx">
      <img src="profile.jpg">
    </div>
    <div class="details">
      <div>
        <h3>Greg Gatewood</h3>
      </div>
      <div>
        <ion-icon name="call-outline"></ion-icon>
        <span>+91 000 000 0000</span>
      </div>
      <div>
        <ion-icon name="mail-outline"></ion-icon>
        <span>support@gmail.com</span>
      </div>
    </div>
  </div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

Полупрозрачный дизайн для бизнес карты

Стилизация карточки

Вставим в качестве фона страницы большое изображение. В центре создадим основу бизнес карты с фотографией владельца данной карты.


@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body {
    display: flex;/*отображать как flexbox сетку*/
    justify-content: center;/*горизонтальное выравнивание*/
    align-items: center;/*вертикальное выравнивание*/
    min-height: 100vh;/*растянуть на всю высоту экрана*/
    background: url(bg.jpg);/*вставить фон*/
    background-size: cover;/*на весь экран сохраняя пропорции*/
    background-position: center;/*картинка в центре*/
}
.card{
    position: relative;/*относительное позиционирование*/
    width: 500px;/*ширина карточки*/
    border-top: 1px solid rgba(255,255,255,0.5);/*верхняя рамка карточки*/
    height: 300px;/*высота карточки*/
    background: rgba(255,255,255,0.1);/*цвет карточки полупрозрачный*/
    backdrop-filter: blur(10px);/*интенсивность размытия*/
    border-radius: 20px;/*закругление углов*/
    overflow: hidden;/*лишнее спрятать*/
    box-shadow: 0 25px 25px rgba(0,0,0,0.1);/*легкая тень*/
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;/*на верхнем слое*/
}

Полупрозрачный дизайн для бизнес карты

Обрежем фотографию по форме круга.


.content {
    display: flex;
    align-items: center;
    gap: 40px;/*промежуток между столбцами сетки*/
    margin-top: -80px;/*отступ сверху*/
}
.content .imgBx{
    position: relative;
    width: 120px;/*ширина бокса для фото*/
    height: 120px;/*высота бокса для фото*/
    overflow: hidden;
    border-radius: 50%;/*создание круглой рамки*/
    box-shadow: 0 0 0 10px rgba(255,255,255,0.1);
}
.content .imgBx img {
    position: absolute;/*абсолютное позиционирование*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;/*фото пропорционально заполняет рамку*/
}

Полупрозрачный дизайн для бизнес карты

Снизу карточки нарисуем полоску, используя псевдоэлемент before. Псевдоэлементы позволяют не создавать лишние элементы в HTML-разметке.


.card::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: #4cc3cc;/*цвет нижней полоски*/
    opacity: 0.75;/*значение прозрачности*/
}
.details{
    display: flex;
    flex-direction: column;/*направление в колонку*/
    gap: 10px;
}
.details h3 {
    font-weight: 600;
    color: #111;
}
.details div {
    display: flex;
    align-items: center;
    gap: 10px;
}
.details ion-icon{
    font-size: 1.4em;/*размер иконок*/
    color: #111;/*цвет иконок*/
}
.details span {
    color: #111;
}

Полупрозрачный дизайн для бизнес карты

Начинающие разработчики часто жалуются, что они достаточно хорошо умею верстать и понимают базовые принципы программирования, но не могут самостоятельно написать не одной строчки кода на JavaScript. Чтобы не отвечать каждому лично, я специально написал статью «5 советов для начинающих разработчиков». Если вам по прежнему трудно справиться с программированием, тогда проще делегировать эту область разработки другим людям. Создать собственную веб-студию стало невероятно просто, когда расписан каждый шаг в
моем видеокурсе.

Источник