Creating a Stunning Bike Card with Pure CSS
CSS allows us to create visually appealing and intricate designs, and here we'll delve into a bike card entirely crafted using CSS.
HTML (Haml) Code:
#wrap
%input.initial{:type => "checkbox"}/
%input.wheel1{:name => "wheel", :type => "radio"}/
%input.wheel2{:name => "wheel", :type => "radio"}/
%input.wheel3{:name => "wheel", :type => "radio"}/
%input.wheel4{:name => "wheel", :type => "radio"}/
%input.buy{:type => "checkbox"}/
%h1 Configure the Bike
%h2 Added to Cart
%h3 Wheels
-4.times do
.wheeltoggle
.buy
.toggle.expand
%i.fas.fa-bicycle
.toggle
%i.fas.fa-bicycle
.background
.frame
.rear
.stem
.shaft
.seat
.wheel.one.front
.inner
.wheel.one.back
.inner
CSS (SCSS) Code:
$ease1: cubic-bezier(0.75, 0.885, 0.32, 1);
$p: #4e567d;
$r: #ff6a5e;
body {
display: grid;
place-items: center;
height: 100vh;
font-family: "Roboto";
background: linear-gradient(90deg, rgba(39,40,37,1) 4%, rgba(78,177,104,1) 19%, rgba(22,122,109,1) 30%, rgba(122,17,86,1) 39%, rgba(252,232,0,1) 56%, rgba(20,0,252,1) 73%, rgba(170,3,3,1) 94%);;
#wrap {
width: 800px;
height: 550px;
background: purple;
box-shadow: 0 20px 40px -15px rgba(255, 0, 0, 0.25);
position: relative;
border-radius: 5px;
overflow: hidden;
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(15, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
h1,
h2 {
grid-area: 4 / 10 / 5 / 15;
color: black;
position: relative;
z-index: 9;
font-size: 28px;
transition: 0.4s $ease1;
text-align: right;
opacity:0.25;
}
h2 {
grid-area: 4 / 2 / 5 / 7;
text-align: left;
transform: translateY(100px);
opacity: 0;
}
h3 {
position: relative;
z-index: 9;
grid-area: 10 / 11 / 11 / 12;
opacity: 0.25;
transition: 0.4s $ease1;
}
.toggle {
width: 30px;
height: 30px;
box-shadow: -5px 0 0 rgba(255, 255, 255, 0.15);
z-index: 9;
background: pink;
position: relative;
grid-area: 4 / 2 / 5 / 3;
transition: 0.2s ease-in-out;
&.expand {
&:before {
content: "CODEWITHSHOBHIT";
position: absolute;
color: yellow;
top: -40px;
width: 100px;
font-weight: 900;
}
}
i {
color: linear-gradient(90deg, rgba(39,40,37,1) 4%, rgba(78,177,104,1) 19%, rgba(22,122,109,1) 30%, rgba(122,17,86,1) 39%, rgba(252,232,0,1) 56%, rgba(20,0,252,1) 73%, rgba(170,3,3,1) 94%);;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&:not(.expand) {
margin-top: 40px;
box-shadow: -5px 0 0 $r;
i {
transform: translate(-50%, -50%) rotate(-90deg);
}
}
}
input {
cursor: pointer;
opacity: 0;
}
.buy {
grid-area: 14 / 3 / 15 / 5;
background: linear-gradient(90deg, rgba(39,40,37,1) 4%, rgba(78,177,104,1) 19%, rgba(22,122,109,1) 30%, rgba(122,17,86,1) 39%, rgba(252,232,0,1) 56%, rgba(20,0,252,1) 73%, rgba(170,3,3,1) 94%);;
position: relative;
height: 50px;
left: 40px;
border-radius: 3px;
z-index: 9;
transition: 0.2s ease-in-out;
transform: translateY(200px);
&:not(input) {
pointer-events: none;
animation: fadein 0.2s ease-in-out 1 forwards;
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
&:after {
content: "Buy Now";
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 0 0 1px $r;
border-radius: inherit;
right: calc(100% + 10px);
top: 0;
display: flex;
justify-content: center;
align-items: center;
color: pink;
cursor: pointer;
transition: 0.6s ease-in-out;
transform: translateY(200px);
}
}
&:before {
content: "Check Out";
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
animation: buynow 1s ease-in-out 1 forwards;
@keyframes buynow {
0% {
opacity: 0;
}
100% {
opacity: 1;
content: "Check Out";
}
}
}
}
input.initial {
position: relative;
grid-area: 4 / 2 / 5 / 3;
z-index: 999;
width: 30px;
height: 70px;
opacity: 0;
&:first-of-type {
&:hover {
& ~ .toggle.expand {
background: $r;
}
}
}
&:checked {
pointer-events: none;
& ~ .toggle:not(.expand) {
transform: translateX(-100px);
}
& ~ input[type="radio"] {
pointer-events: all;
}
& ~ .wheeltoggle,
& ~ h3, & ~ h1 {
filter: saturate(1);
opacity: 1;
}
& ~ .buy {
transform: translateY(0);
min-width: 110px;
transition-delay: 1s;
&:after {
transform: translateY(200px);
}
&:checked {
transform: translateY(-250px);
& ~ .toggle {
opacity: 0;
}
& ~ .frame {
.wheel {
.inner {
animation: wheelroll6 1.25s ease-in-out 1 forwards;
}
}
}
& ~ h2 {
transform: translateY(0px);
transition-delay: 0.4s;
opacity: 1;
}
& ~ .wheeltoggle,
& ~ h1,
& ~ h3 {
transform: translateY(100px);
opacity: 0;
}
& ~ .wheeltoggle {
@for $i from 1 through 4 {
&:nth-of-type(#{$i}) {
transition-delay: #{$i/20}s;
}
}
}
& ~ h3 {
transition-delay: 0.1s;
}
& ~ .buy {
animation: bounceback 1s ease-in-out 1 forwards;
&:after {
transition-delay: 0.3s;
transform: translateY(0);
opacity: 1;
}
&:before {
animation: buynow2 1s ease-in-out 1 forwards;
@keyframes buynow2 {
100% {
content: "Back";
}
}
}
@keyframes bounceback {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(200px);
}
50.5% {
transform: translateY(200px);
opacity: 0;
}
51% {
transform: translateY(-200px);
opacity: 0;
}
100% {
transform: translateY(-250px);
}
}
}
& ~ .frame:not(.two):not(i):not(.buy) {
transform: scale(0.7) translateX(350px) translateY(50px);
transition: 0.75s $ease1;
transition-delay: 0.25s;
}
~ .background {
&:before {
transition:transform 0.4s $ease1, left 0.4s $ease1 !important;
transition-delay:0.4s, 0.8s !important;
transform-origin:right;
transform:scaleX(2) !important;
left:-5%;
}
&:after {
transform: scaleY(1.25) translateX(-40px) !important;
transition-delay: 0.3s;
}
}
}
&:not(div) {
pointer-events: all;
z-index: 999;
&:hover ~ .buy {
transition-delay: 0s;
background: darken($r, 10%);
}
}
}
}
}
.wheeltoggle {
box-shadow: 0 0 0 1px #efefef, 0 10px 20px -20px $p;
border-radius: 3px;
transition: 0.3s ease-in-out;
pointer-events: none;
filter: saturate(0);
opacity: 0.5;
background: #fff;
z-index: 9;
&:before {
content: "";
position: absolute;
width: 100%;
height: 50px;
top: 0;
transition: 0.4s ease-in-out;
}
@for $i from 1 through 4 {
&:nth-of-type(#{$i}) {
&:after {
content: "Wheel Type #{$i}";
position: absolute;
width: 100%;
top: 55px;
font-size: 10px;
text-align: center;
line-height: 1.25;
color: $p;
text-transform: uppercase;
}
&:before {
background: url(https://assets.codepen.io/383755/wheel#{$i}.png)
50%
50% /
80%
auto
no-repeat;
}
}
}
}
input[type="radio"],
.wheeltoggle {
position: absolute;
z-index: 999;
width: 50px;
height: 90px;
z-index: 999;
pointer-events: none;
&.wheel1,
&:not(input):nth-of-type(1) {
grid-area: 11 / 14 / 12 / 15;
}
&.wheel2,
&:not(input):nth-of-type(2) {
grid-area: 11 / 13 / 12 / 14;
}
&.wheel3,
&:not(input):nth-of-type(3) {
grid-area: 11 / 12 / 12 / 13;
}
&.wheel4,
&:not(input):nth-of-type(4) {
grid-area: 11 / 11 / 12 / 12;
}
@for $i from 1 through 4 {
&.wheel#{$i} {
&:checked ~ .wheeltoggle {
&:nth-of-type(#{$i}) {
box-shadow: 0 0 0 1px $r, 0 10px 20px -30px $p;
}
}
&:hover ~ .wheeltoggle {
&:nth-of-type(#{$i}) {
box-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px $p;
transform: scale(1.05);
&:before {
transform: rotate(180deg);
}
}
}
&:checked {
& ~ .frame {
> div.wheel {
animation: wheelout#{$i} 0.75s ease-in-out 1 forwards 0.25s;
.inner {
&:before {
background-image: url(https://assets.codepen.io/383755/wheel#{$i}.png);
animation: wheelroll#{$i} 1s ease-in-out 1 forwards 0s;
@keyframes wheelroll#{$i} {
from {
transform: rotate(0deg);
}
to {
transform: rotate(720deg);
}
}
@keyframes wheelroll6 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
}
&.back {
animation: wheelback#{$i} 0.75s $ease1 1 forwards 0.25s;
@keyframes wheelback#{$i} {
0% {
transform: translate(0px);
}
50% {
transform: translateX(-700px);
}
100% {
transform: translate(0px);
}
}
}
@keyframes wheelout#{$i} {
0% {
transform: translate(0px);
}
50% {
transform: translateX(700px);
}
100% {
transform: translate(0px);
}
}
}
> div:not(.wheel) {
animation: jump#{$i} 0.75s $ease1 1 forwards 0.25s;
@keyframes jump#{$i} {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-75px) rotate(-2.5deg);
}
100% {
transform: translateY(0);
}
}
}
}
}
}
}
&:checked {
& ~ .frame {
> div:not(.wheel) {
animation: jump 1s ease-in-out 1 forwards;
}
}
}
}
input.initial:checked {
& ~ .toggle {
box-shadow: -5px 0 0 $r;
&:not(.expand) {
box-shadow: -5px 0 0 rgba(255, 255, 255, 0.15);
}
}
& ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) {
transform: rotate(0deg);
margin-left: 0px;
*:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) {
transform: rotate(0deg);
margin-left: 0px;
&:before,
&:after {
transform: rotate(0deg);
}
}
&.background {
&:after {
transform: scaleY(1.25) translateX(30px);
}
&:before {
transition: 0.5s $ease1;
}
}
&.frame {
transform: scale(0.7) rotate(0deg) translateY(50px);
margin-left: -25px;
}
&:before,
&:after {
transform: rotate(0deg);
}
}
}
* {
transition: transform 0.3s $ease1, margin-left 0.3s $ease1;
&.frame {
transition: transform 0.6s $ease1, margin-left 0.4s $ease1;
transition-delay: 0.2s, 0.4s;
}
&:before,
&:after {
transition: transform 0.3s $ease1, margin-left 0.3s $ease1;
}
}
.background {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: $p;
overflow: hidden;
&:before {
content: "";
position: absolute;
width: 65%;
height: 100%;
left: 35%;
top: 0;
background: linear-gradient(90deg, rgba(193,211,177,1) 4%, rgba(255,255,255,1) 19%, rgba(178,146,146,1) 39%, rgba(248,248,248,1) 56%, rgba(149,143,152,1) 73%, rgba(247,247,247,1) 94%);;
z-index: 2;
transition: $ease1 0.5s ease-in-out;
}
&:after {
content: "IF Mode";
position: absolute;
z-index: 0;
width: 100%;
height: 80%;
top: 10%;
left: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 200px;
font-weight: 900;
color: pink;
transition: 1s ease-in-out;
transform: scaleY(1.25);
}
}
.frame {
position: absolute;
top: 60px;
left: 85px;
width: 427px;
height: 365px;
z-index: 2;
transform-origin: 190px 210px;
transform: scale(0.8) rotate(-62.5deg);
div {
position: absolute;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
left: 0;
&.wheel {
&.two,
&.three,
&.four {
&.front {
transform: translateX(700px);
margin-left: 0px;
}
&.back {
transform: translateX(-700px);
}
}
&.front {
transform-origin: 273px 190px;
margin-left: -75px;
transform: rotate(115deg);
transition-delay: 0.5s, 0.8s;
z-index: 2;
}
&.back {
z-index: -1;
.inner {
left: -40px;
}
}
.inner {
position: absolute;
width: 210px;
height: 210px;
border-radius: 100%;
z-index: -1;
top: 170px;
left: 300px;
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url("https://assets.codepen.io/383755/wheel1.png");
background-size: contain;
transform: rotate(360deg);
transition: transform 1.25s $ease1,
background-image 0s ease-in-out;
transition-delay: 0.1s, 0.5s;
}
}
}
&.rear {
background-image: url("https://assets.codepen.io/383755/rear.png");
}
&.stem {
background-image: url("https://assets.codepen.io/383755/stem.png");
transform-origin: 273px 190px;
margin-left: -105px;
transform: rotate(115deg);
transition-delay: 0.5s, 0.8s;
}
&.shaft {
background-image: url("https://assets.codepen.io/383755/shaft.png");
transform-origin: 220px 200px;
transform: translateX(-70px) translateY(40px);
transition-delay: 0.8s;
}
&.seat {
background-image: url("https://assets.codepen.io/383755/seat.png");
transform: translateY(100px) translateX(40px);
transition: 0.4s ease-in-out;
transition-delay: 0.65s;
z-index: -1;
}
}
}
}
}
In this card, we've demonstrated how various elements of a bike are created using CSS, providing the user with an immersive understanding of the product. Users can interact with elements such as changing bike wheels, the "Buy Now" button, and the overall visual presentation.
Feel free to incorporate this CSS Product Card into your website for a visually appealing and unique user experience. Its implementation will elevate your website to a new level, captivating users with a fresh and engaging design.
We hope you find this walkthrough informative, and you consider integrating it into your projects. Happy coding!
Live Preview
See the Pen Pure CSS Product Card by Codewithshobhit (@Codewithshobhit) on CodePen.
No comments:
Post a Comment