Hi Friends...
This is an easy tutorial suitable for those fairly new to CSS. This tutorial will teach you how to create a simple Cart pop-up effect, showing a hidden div, when you hover over cart.In this div you can attach or add what ever you want.
C sharp jadu Cart Popup Example
This is an easy tutorial suitable for those fairly new to CSS. This tutorial will teach you how to create a simple Cart pop-up effect, showing a hidden div, when you hover over cart.In this div you can attach or add what ever you want.
Items : 5
Amount : 2000 Rs
Your Code is as under
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>C sharp jadu Cart Popup Example</title>
<style type="text/css">
/* button style */
.cart {
width: 40px;
height: 40px;
padding: 0;
position: absolute;
left: 50%;
margin-left: 195px;
-moz-border-radius: 9999em;
-webkit-border-radius: 9999em;
border-radius: 9999em;
border: none;
background: #e54040;
cursor: pointer;
}
.cart:hover {
-moz-box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);
}
.cart:hover .popup {
visibility: visible;
opacity: 1;
pointer-events: auto;
-webkit-animation-duration: 200ms;
-webkit-animation-name: show-popup;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
-moz-animation-duration: 200ms;
-moz-animation-name: show-popup;
-moz-animation-direction: normal;
-moz-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
-o-animation-duration: 200ms;
-o-animation-name: show-popup;
-o-animation-direction: normal;
-o-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
animation-duration: 200ms;
animation-name: show-popup;
animation-direction: normal;
animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
}
/* popup window style */
.popup {
padding: 20px;
visibility: hidden;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
width: 250px;
margin-left: -205px;
margin-top: 20px;
background: #ffffff;
border: 1px solid #cbcbcb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
}
.popup:after {
position: absolute;
content: ' ';
top: -30px;
height: 30px;
width: 100%;
}
.popup:before {
position: absolute;
content: ' ';
left: 220px;
top: -9px;
width: 16px;
height: 16px;
border-top: 1px solid #cbcbcb;
border-right: 1px solid #cbcbcb;
background: #ffffff;
-moz-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.2);
box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.2);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cart {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAGPSURBVHjajNNNi85RGAbw3zwzI/XMmEHeFYmSvJRSYsOWfAHZ+wAWakp8AAs+A5ImKzujUfKapQnZzIaVxzCYGcMzXRbuydO/Wcxdd+ecq3Ouc67rvk9fkqcY8T8mcA3frSIGcLKBfcMaq4wWpjCNjwi2o71aggGcQT92YBybcLTIZ7ABX7G+xlF8qvWgJMs5kuRFksUkDypPJLmd5FSSW0lOJ7lT+GSSt70E7SQ38i+eJDmSZE+SA0n21bi35heTdJMstnrkzOMlfmELhnEVQxjDOlzBDxwv2c/7kvR6sh+Py8QLeFde9GMJ3arQw/JqrNUwtVMVaWMbFnC51pfwGQfrhR1MNgnm8LpuPVsNdr0236xKncdgyZ0eaBD8xhss4hyOlea1hQ1ha0mZwM8mwRKe4VVJ6K9Daj6PD9V0j7DUNBH6sLNcn8efOtytp7cxW82U3j5Yzs1J7ieZSnI3yXDho0nGC7+XZGMSKxEcSjJbDdVJsrvwww18VxKtFf7HTH2wObwvGfClgS/A3wEAjJAlBBKFdqAAAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-position: center;
}
.checkout {
margin-top: 10px;
padding-left:20px;
}
.checkout-button {
padding: 3px 5px;
background: #e54040;
-moz-box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);
-webkit-box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);
box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);
border: 1px solid #e06b6b;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #ffffff;
}
.checkout-button:hover {
background: #e54040;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.checkout-button:active {
background: #e54040;
-moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="cart">
<div class="popup">
<div class="row checkout">
<h4>Items : 5</h4>
<h4>Amount : 2000 Rs</h4>
</div>
<div class="row checkout">
<span><a class="checkout-button" href="#">View Cart</a></span>
<span class="checkout-button">Checkout</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK7s8u_-x9YxvDCbFYDmafrKWLtODwK86C3LncDREP6q4RH2214oazFpH33V602ftM74TnWABF5fT-VLMo6jxNmUjSrTuuN4K5I2gHjzVRvDSX9lS2ipayUe5nKm_y9_uASW6HU_TqIi8B/s1600-r/finalc%2523logoPNGupdated.png" style="height:60px;width:120px; margin-top:20px;"/>
</div>
</div>
</div>
</body>
</html>
0 comments:
Post a Comment