Follow Us On Telegram Telegram link
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodeAtNow - Pure CSS Card UI</title>
<link href="https://fonts.googleapis.com/css?family=Raleway+Dots" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class='card'>
<input checked='checked' id='rad1' name='rad' type='radio'>
<div for='rad1'>
<h1>1</h1>
<div class='btn'></div>
</div>
<input id='rad2' name='rad' type='radio'>
<div for='rad2'>
<h1>2</h1>
<div class='btn'></div>
</div>
<input id='rad3' name='rad' type='radio'>
<div for='rad3'>
<h1>3</h1>
<div class='btn'></div>
</div>
<input type='checkbox'>
<a>Read More</a>
<p>Phasellus nec sem in justo pellentesque facilisis. In hac habitasse platea dictumst. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<div class='shapes'></div>
<div class='photo'>
<div></div>
<div></div>
<div></div>
</div>
<div class='blob'>
<div class='glob'></div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
<svg class="svg" viewBox="0 0 400 400">
<defs>
<filter id="duotone-filter-post-one">
<feColorMatrix type="matrix" values="0.14453125 0 0 0 0.33203125 0.71875 0 0 0 0.27734375 -0.34765625 0 0 0 0.73046875 0 0 0 1 0"></feColorMatrix>
</filter>
</defs>
</svg>
<!-- partial -->
</body>
</html>
CSS
@charset "UTF-8";
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: "Raleway Dots";
background: radial-gradient(ellipse at bottom left, #FE8D58, #FE8D58 20%, transparent 20%), linear-gradient(to bottom, #B9ACCA, #fff);
}
body input[type=radio] {
position: absolute;
z-index: 999;
left: 0;
bottom: 0;
width: 33.33%;
opacity: 0;
overflow: hidden;
height: 30px;
}
body input[type=radio]:hover + div .btn {
background: #B9ACCA;
}
body input[type=radio]:hover + div .btn:after {
color: #fff;
}
body input[type=radio]:nth-of-type(2) {
left: 33.33%;
}
body input[type=radio]:nth-of-type(2) + div .btn {
left: 33.33%;
}
body input[type=radio]:nth-of-type(2) + div .btn:after {
content: "2";
}
body input[type=radio]:nth-of-type(3) {
left: 66.66%;
}
body input[type=radio]:nth-of-type(3) + div .btn {
left: 66.66%;
}
body input[type=radio]:nth-of-type(3) + div .btn:after {
content: "3";
}
body input[type=radio]:checked + div .btn {
box-shadow: 0 0 0 2px #6D44B5;
z-index: 10;
padding: 5px 0;
}
body input[type=radio]:checked + div .btn:before {
left: -25%;
}
body input[type=radio]:checked + div .btn:after {
color: #fff;
}
body input[type=radio] + div .btn {
position: absolute;
width: 33%;
bottom: 0;
left: 0;
height: 25px;
box-shadow: 0 0 0 2px #B9ACCA;
overflow: hidden;
z-index: 9;
cursor: pointer;
}
body input[type=radio] + div .btn:after {
content: "1";
position: absolute;
color: #FE8D58;
font-weight: 900;
font-size: 22px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(calc(-50% - 2.5px));
line-height: 0;
color: #B9ACCA;
}
body input[type=radio] + div .btn:before {
content: "";
position: absolute;
width: 150%;
height: 100%;
left: 0;
top: 0;
background: #6D44B5;
left: -150%;
transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body svg {
position: absolute;
width: 0;
height: 0;
}
body .card {
width: 500px;
min-width: 500px;
height: 350px;
position: relative;
max-width: 100%;
background: #fff;
}
body .card * {
transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body .card h1, body .card a {
position: absolute;
right: 30px;
z-index: 9;
color: #fff;
font-size: 200px;
font-weight: 100;
margin: 0;
top: 0;
line-height: 0.75;
transform: scale(0) rotateX(180deg);
opacity: 0;
}
body .card p {
position: absolute;
z-index: 999;
width: 75%;
font-size: 18px;
font-weight: 100;
font-family: "Raleway";
line-height: 26px;
left: 12.5%;
color: #fff;
display: inline-block;
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
transition: none;
}
body .card a {
color: #6D44B5;
font-size: 15px;
bottom: 50px;
top: auto;
width: 50%;
display: block;
text-align: center;
letter-spacing: 5px;
text-transform: uppercase;
font-weight: 900;
padding: 15px 5px;
border: 2px solid;
cursor: pointer;
left: -50px;
opacity: 1;
transform: none;
height: 12.5px;
font-family: "Raleway";
}
body .card a:before {
content: "BACK";
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%) scale(0);
font-size: 15px;
opacity: 0;
}
body .card input[type=checkbox] {
z-index: 999;
position: absolute;
bottom: 50px;
width: 50%;
left: -50px;
height: 50px;
opacity: 0;
}
body .card input[type=checkbox]:hover ~ a {
background: #fba0cc;
color: #fff;
border-color: #fba0cc;
}
body .card input[type=checkbox]:checked ~ p {
transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.175);
transition-delay: 0.2s;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
body .card input[type=checkbox]:checked ~ a {
z-index: 100;
color: #fff;
font-size: 0;
}
body .card input[type=checkbox]:checked ~ a:before {
opacity: 1;
transform: translateX(-50%) translateY(-50%) scale(1);
}
body .card input[type=checkbox]:checked ~ .blob {
z-index: 99;
transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body .card input[type=checkbox]:checked ~ .blob:before, body .card input[type=checkbox]:checked ~ .blob:after {
transform: scale(0);
}
body .card input[type=checkbox]:checked ~ .blob .glob {
transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1);
min-width: 110%;
min-height: 110%;
border-radius: 0px;
top: -5%;
right: -5%;
}
body .card input[type=radio] + div {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
body .card input[type=radio]:checked + div h1 {
transform: scale(1) rotate(0deg);
opacity: 1;
}
body .card input[type=radio]:nth-of-type(2):checked + div ~ .blob .glob {
width: 70%;
height: 75%;
background: #FE8D58;
}
body .card input[type=radio]:nth-of-type(2):checked + div ~ .blob:before {
top: 40%;
background: #FE8D58;
}
body .card input[type=radio]:nth-of-type(2):checked + div ~ .blob:after {
background: #FE8D58;
}
body .card input[type=radio]:nth-of-type(3):checked + div ~ .blob .glob {
width: 70%;
height: 55%;
background: #F45746;
}
body .card input[type=radio]:nth-of-type(3):checked + div ~ .blob:before {
top: 20%;
background: #F45746;
left: 40%;
}
body .card input[type=radio]:nth-of-type(3):checked + div ~ .blob:after {
background: #F45746;
left: 70%;
}
body .card input[type=radio]:nth-of-type(1):checked + div ~ .photo div:nth-of-type(1) {
transform: rotateX(0deg);
}
body .card input[type=radio]:nth-of-type(2):checked + div ~ .photo div:nth-of-type(2) {
transform: rotateX(0deg);
}
body .card input[type=radio]:nth-of-type(3):checked + div ~ .photo div:nth-of-type(3) {
transform: rotateX(0deg);
}
body .card input[type=radio]:nth-of-type(2):checked + div ~ .shapes {
top: 35%;
left: 65%;
width: 90px;
}
body .card input[type=radio]:nth-of-type(2):checked + div ~ .shapes:before {
left: 120px;
top: 170px;
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
body .card input[type=radio]:nth-of-type(3):checked + div ~ .shapes {
top: 55%;
left: 55%;
width: 140px;
}
body .card input[type=radio]:nth-of-type(3):checked + div ~ .shapes:before {
left: 140px;
top: -40px;
-webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
clip-path: polygon(100% 0, 0 0, 100% 100%);
}
body .card:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: transparent;
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
z-index: 200;
}
body .card .photo {
position: absolute;
width: 50%;
height: 100%;
z-index: 0;
overflow: hidden;
perspective: 300px;
}
body .card .photo div {
position: absolute;
width: 75%;
height: 50%;
transform: rotateX(-180deg);
top: -12.5%;
margin-left: -12.5%;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 100%;
box-shadow: inset 0 0 0 5px #fff, 0 0 0 5px #fba0cc, 0 0 0 10px #fff;
}
body .card .photo div:before {
content: "💯";
font-size: 75px;
position: absolute;
left: 50%;
top: 50%;
margin: 20px 0 0 5px;
transform: translateX(-50%) translateY(-50%);
filter: saturate(0) brightness(20);
opacity: 0.25;
}
body .card .photo div:first-of-type {
background: #fba0cc;
}
body .card .photo div:nth-of-type(2) {
background: #F45746;
box-shadow: inset 0 0 0 5px #fff, 0 0 0 5px #F45746, 0 0 0 10px #fff;
}
body .card .photo div:nth-of-type(2):before {
content: "👯";
}
body .card .photo div:nth-of-type(3) {
background: #B9ACCA;
box-shadow: inset 0 0 0 5px #fff, 0 0 0 5px #B9ACCA, 0 0 0 10px #fff;
}
body .card .photo div:nth-of-type(3):before {
content: "💋";
}
body .card .shapes {
position: absolute;
left: 45%;
top: 20%;
background: #FE8D58;
width: 60px;
height: 4px;
z-index: 2;
box-shadow: 0 8px 0 0 #FE8D58, 0 16px 0 0 #FE8D58, 0 24px 0 0 #FE8D58, 0 32px 0 0 #FE8D58;
mix-blend-mode: screen;
}
body .card .shapes:before {
content: "";
position: absolute;
width: 40px;
height: 40px;
background: linear-gradient(to bottom, #FE8D58, #F45746);
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
left: 175px;
top: 160px;
transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body .card .blob {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
filter: url(#goo);
}
body .card .blob .glob {
position: absolute;
width: 60%;
height: 75%;
background: #6D44B5;
border-radius: 100%;
top: -25%;
right: -25%;
}
body .card .blob:before, body .card .blob:after {
content: "";
position: absolute;
width: 50%;
height: 60%;
background: #6D44B5;
border-radius: 100%;
right: 0;
top: 20px;
transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body .card .blob:after {
right: -15%;
top: 20%;
width: 40%;
height: 60%;
}
JS
No JavaScript
