Направете си картичка с изрязано изображение.
Използвайте
background , за да добавите цветен фон към .container елемент.Създайте
.card съдържащa figureс подходящото изображение за изрязването и всяко друго съдържание, което искате.Използвайте
::before псевдоелемента, за да добавите border около figure елемента, съответстващ на .container елемента background и създавайки илюзията за изрезка в .card.
HTML:
<!DOCTYPE HTML>
<!--
Toni Angelchovski HTML5
angelchovski.com |@bgwelding
-->
<html>
<head>
<title>Картичка с изрязано изображение</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<div class="card">
<figure>
<img alt="" src="img/dt_400x400.jpg"/>
</figure>
<p class="content">DT Performance Garages.</p>
</div>
</div>
</header>
</body>
</html>
CSS:
.container {
display: flex;
padding: 96px 24px 48px;
justify-content: center;
align-items: center;
background: #f3f1fe;
}
.card {
width: 350px;
display: flex;
flex-direction: column;
align-items: center;
background: #fff;
border-radius: 10px;
margin: 8px;
box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);
}
.card figure {
width: 120px;
height: 120px;
border-radius: 50%;
margin-top: -60px;
position: relative;
}
.card figure::before {
content: "";
border-radius: inherit;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
border: 1rem solid #f3f1fe;
box-shadow: 0 1px rgba(0, 0, 0, 0.1);
}
.card figure img {
border-radius: inherit;
width: 100%;
height: 100%;
object-fit: cover;
}
.card .content {
text-align: center;
margin: 2rem;
line-height: 1.5;
color: #101010;
}
Last edited: