0% found this document useful (0 votes)
34 views15 pages

Product Page CSS Animations and Styles

The document contains multiple CSS style snippets to style various elements on e-commerce pages including product items, buttons, forms, and more. Styles include setting borders, shadows, animations, and responsive breakpoints. Elements like buttons, titles, prices are consistently given a border radius of 14px.
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
34 views15 pages

Product Page CSS Animations and Styles

The document contains multiple CSS style snippets to style various elements on e-commerce pages including product items, buttons, forms, and more. Styles include setting borders, shadows, animations, and responsive breakpoints. Elements like buttons, titles, prices are consistently given a border radius of 14px.
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<style>

@-webkit-keyframes shake-x{
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.single-product .[Link] {
animation: shake-x 1s ease infinite;
}
.single-product .[Link]:hover {
animation: none;
}
</style>

<style>#app + div span { display: none;}</style>

</style>
<style>
.product-item .product-price .before::before {
top: 50%;
background: red;
opacity: .7;
content: '';
width: 110%;
position: absolute;
height: 1.5px;
border-radius: 0.1em;
left: -5%;
white-space: nowrap;
display: block;
transform: rotate(-10deg);
}
</style>
<style>
.product-item .product-price .before {
text-decoration: none;
position: relative;
}
</style>

<style>
}
.[Link]-variants .single-variant .radio-buttons-container .radio-button-variant
{
animation: flicker 0.7s ease-in-out infinite alternate !important;
color:#50aea0;
font-weight: bold;
text-shadow: 2px 2px 10px #50aea0;
transition: all 0.5s ease-in-out;
}
.[Link]-variants .single-variant .radio-buttons-container .radio-button-variant
{
padding: 15px;
border: lightgrey 1px solid;
border-radius: 15px;
/*display: flex;*/
/*align-items: flex-end;*/
/*justify-content: end;*/
}
.[Link]-variants .single-variant .radio-buttons-container .radio-button-variant
{
border: #50aea0 1px solid;
}
.[Link]-variants .single-variant .option-name {
display: none !important;
}

</style>

<script>
setInterval(function() {
let buttons = [Link]('.single-product .single-submit');
[Link](button => {
[Link]('shaked');
});
}, 2000);
</script>
<style>.categories-style-1 { grid-template-columns: repeat(2,1fr);
}</style>

<style>
[dir] .category-item .category-details {
display: none;
}</style>

<style>
[dir] .category-item {
border: 1px solid rgba(0,0,0,.0);
box-shadow: 0 0px 0px 0px rgba(0,0,0,.0);
border-radius: 0px;
}
</style>

<style>
@media (max-width: 425px) { .products-style-2, .products-grid
{ grid-template-columns: repeat(2,1fr); } .products-grid .product-item .product-actions .button
{ min-width: 100%; } } </style>

<style>@media (max-width: 2425px){.content-box-with-icon-section .grid-3 {grid-template-


columns: repeat(2,1fr);}}</style>

<style>

@media (max-width: 2425px) {


.product-item .product-actions .button {
border-radius: 14px !important; min-width: 120px !important;
font-size: 11px !important; box-shadow: 07 5px 20px -10px black;
}
}</style>

<style>

.share-box .share a {
border-radius:14px;
}

[dir] .add-to-cart-section .quantity .quantity-handler { border-radius:14px;


}

.cookie-consent .cookie-actions .button{


border-radius:14px;
}
[dir] .primary-button { border-radius: 14PX;
}

.single-product .single-submit{
border-radius: 14px;
}

.load-more .button{
border-radius:14px;
}
.product-item .product-actions .button {
border-radius: 14px;</style>

<style>

@media (max-width: 425px) { .reviews-body .reviews-grid { display: grid;


grid-template-columns: repeat(2, 1fr); min-width: 90px !important; }}</style>

<style>
@media {[dir] input[type="text"]
{border: 2px solid #0099CCFF;
background-color:solid #FFECF2 ;
padding: 14px 15px;
background-color: transparent;
border-radius: 14px;
}}
@media (max-width: 2425px)
{.single-title { border: 3px solid #0099CCFF;
padding: 10px;box-shadow: 07 5px 20px -10px
black;background-color: #ececee;
text-align: center;border-radius: 14px; }}
.single-price { border: 3px dotted #;
padding: 10px; box-shadow: 07 5px 30px -10px black; background-color: #; text-align:
center;
border-radius: 14px;}</style>
<style>
.product-item, .product-item > * {border-radius: 54px !important;}
.product-item { box-shadow: 4 5px 20px 3px rgba(0,0,0,.1) !important;}</style>

<style>
.checkout-heading {
animation: zoom 3s infinite linear;
text-align: center;
font-weight: bold!important;
}
</style> <style>
.checkout-heading {
text-align: center;
font-weight: bold!important;

}
</style> </style>
<style>
.single-product .checkout-section .checkout .main .checkout-form .checkout-select
select, .single-product .checkout-section .checkout .main .checkout-form
input[type="text"], .single-product .checkout-section .checkout .main .checkout-form
input[type="email"], .single-product .checkout-section .checkout .main .checkout-form
input[type="url"], .single-product .checkout-section .checkout .main .checkout-form
input[type="search"], .single-product .checkout-section .checkout .main .checkout-form
input[type="number"], .single-product .checkout-section .checkout .main .checkout-form
input[type="tel"], .single-product .checkout-section .checkout .main .checkout-form
input[type="password"], .single-product .checkout-section .checkout .main .checkout-form
textarea {
border-color: #0099CCFF;
border-radius: 14px;
}

</style>
<style>

.checkout {
bordr: 0px solid #000000 ; border-style: solid; border-color: #00000;
border-radius : 14px ; margin: 0 0 10px; padding: 0 7.5px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px 0px;
}
.checkout-form {
padding: 30px;
border-radius: 7px;
}</style>

<style>
.product-item .product-thumbnail img {
border: 4px solid #000000;
border-color: #0099CCFF;
border-radius: 62px;
margin: 0 0 10px;}

.slick img {
border: 4px solid rgba(0,0,0,.0);
box-shadow: 0 0px 0px 0px rgba(0,0,0,.0);
border-color: #0099CCFF;
border-radius: 62px;
margin: 0 0 10px;}
}

.single-variants {
border: 3px solid #0099CCFF ; border-style: solid; border-color : #0077C0;
border-radius : 7px ; margin: 0 0 10px; padding: 0 7.5px;

font-weight: bold;
padding : 8px 8px;
border-style: none solid solid solid;
border-width: 3px;
border-color: #A6813B;
border-radius: 0px 0px 10px 10px;

background-color: #ffff;
/*position: sticky;
margin-top: -58px;*/
position: relative;
top: -52px;
margin-bottom: -49px;
}
[dir] .single-variants .single-variant .option-name {
display: flex;
justify-content: center;
font-weight: bold;
/* margin: 30px 5px 5px 5px; */
margin: 0 0 10px;
}
.single-variants .single-variant .color-based-buttons-container, .single-variants .single-variant
.image-based-buttons-container, .single-variants .single-variant .textual-buttons-container {
/* display: flex; */
display: flex;
justify-content: center;
font-weight: bold;
align-items: center;
flex-wrap: wrap;
}
</style>

<style>
.single-product .single-price [Link] {
font-size: 26px;
font-weight: bold;
margin-left: 5px;
line-height: 22px;
}
</style>
<style>
.single-product .single-price [Link] {
text-decoration: none;
position: relative;
}

.single-product .single-price [Link]::before {


top: 60%;
background: red;
/this is the color of the line/
opacity: .7;
content: '';
width: 110%;
position: absolute;
height: 2px;
border-radius: .1em;
left: -5%;
white-space: nowrap;
display: block;
transform: rotate(-10deg);
}

.single-product .single-price [Link]::before, .single-product .single-price


[Link]::before {
transform: rotate(0deg);
left: -1%;
width: 102%;
}
}
}
</style>

<style>
.section-66ApIfc5qgv9f5Rj .product-item, .section-66ApIfc5qgv9f5Rj .product-item .product-
details {
box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 20px 1px;
border-radius: 12px;
border-color: #0099CCFF;
}

[dir] .product-item .product-details {


padding: 20px 5px;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.06) 0px 20px 20px 1px;
border-radius: 19px;
}
[dir] .product-item .product-details {
padding: 20px 15px;
text-align: center;
border-top: 0px solid #0099CCFF;
}

</style>

<style>
.product-item .product-thumbnail img {
transition: all 5s ease;
position: absolute;
top: 50%;
max-height: 100%;
text-indent: -9999px;

}
</style>

<style>
.discount_badge {
position: relative;
font-size: 14px;
display: inline-block;
height: 24px;
line-height: 24px;
background-color: #7dac76;
color: #fff;
padding: 0 5px;
border-radius: 3px;
font-weight: 700;
}

.single-title .discount_badge {
margin-right: 12px;
top: -3px;
animation: zoom 1s infinite linear;
}

@keyframes zoom {
0% {
transform: scale(0.9);
}
10% {
transform: scale(1);
}
80% {
transform: scale(0.9);
}
100% {
transform: scale(0.9);
}
}
</style>
<style>
.single-title .discount_badge {
margin-right: 12px;
top: -3px;
animation: zoom 1s infinite linear;
}

</style>

<style>
.discount_pp {
position: absolute;
top: -10px;
left: -8px;
background-color: #fec106;
font-weight: bold;
border-radius: 10px;
padding: 4px 8px;
color: #fff;
font-size: 16px;
margin-left: 0px;
max-width: fit-content;animation: zoom 3s infinite linear;

}
</style>

<script>
var dis_price = [Link]('[Link]-section > h3 >
[Link]-value') !== null;
if (dis_price) {
const prodTitle = [Link]("single-title");
const disBadge = [Link]('span');
[Link]("class", "discount_badge")
[Link] = ' 100% ‫'!أصلي‬
prodTitle[0].appendChild(disBadge)
}
</script>

<script>
var productItem = [Link]("product-item")

for (var i = 0; i < [Link]; i++) {


var price_checker = productItem[i].querySelector("[Link]-info > div > [Link]-
[Link]") !== null;
if (price_checker) {
productItem[i].[Link] = "relative"
var discount_pp = [Link]("span")
discount_pp.setAttribute("class", "discount_pp")
productItem[i].appendChild(discount_pp)
var price_bef = productItem[i].querySelector("[Link]-info > div > [Link]-
[Link] > [Link]")
var price_aft = productItem[i].querySelector("[Link]-info > div > [Link]-
[Link] > [Link]")
var price_after = parseInt(price_aft.textContent)
var price_before = parseInt(price_bef.textContent)

var pp = (price_after * 100) / price_before


var pp_rounded = ([Link]((100 - pp))).toString()

discount_pp.innerHTML = pp_rounded + "%-"


}

}
</script>
<style>
.discount_pp {
position: absolute;
top: -10px;
left: -8px;
background-color: #ffc006;
font-weight: bold;
border-radius: 10px;
padding: 4px 8px;
color: #fff;
font-size: 16px;
margin-left: 0px;
max-width: fit-content;
}
</style>

<script>
const DivContainer = [Link]("product-title"); //home page
const DavContainer = [Link]("product-section price-section");
//product page
if ([Link] !== 0) {
function AddNewHome() {
const newDiv = [Link]("div");
[Link] = '<span class="fa fa-star checked"></span><span class="fa fa-star
checked"></span><span class="fa fa-star checked"></span><span class="fa fa-star
checked"></span><span class="fa fa-star checked"></span><style>[Link]
{color: #FFC107;transform: scale(1.3);margin: 10px 4px 0px 4px;}</style>'
DivContainer[i].appendChild(newDiv)
}
for (i = 0; i < [Link]; i++) {
AddNewHome();
}
}

if ([Link] !== 0) {
function insertAfter(referenceNode, newNode) {
[Link](newNode, [Link]);
}
const newDav = [Link]("div");
[Link]("class", "rvw_stars")
[Link] = '<span class="fa fa-star checked"></span><span class="fa fa-star
checked"></span><span class="fa fa-star checked"></span><span class="fa fa-star
checked"></span><span class="fa fa-star checked"></span><style>[Link]
{POSITION: relative;left: 4px;color: #FFC107;transform: scale(1.4);margin: 0px 8px 12px
0px;}</style>'
insertAfter(DavContainer[0], newDav)
}
</script>
<style>
[dir] .single-product .product-wrapper .product-details .product-section:not(:last-child) {
margin: 0 0 10px;
}
</style>

<script>
var StarsGrid = [Link]("reviews-grid")
if ([Link] !== 0) {
var StarsNumb = StarsGrid[0].[Link];
const NewStrzDiv = [Link]("span");
[Link]("class", "Strz");
[Link] = '(' + [Link]() + ')<style>[Link] { font-size: 16px;
font-weight: bold; color: #747474; margin-right: 3px;}</style>'
const Stars = [Link]("[Link]-details > div.rvw_stars")
[Link](NewStrzDiv)
}
</script>

</script>

<script>
var price_befff = [Link]("[Link]-section > h3 >
[Link]-value") !== null;
if (price_befff) {
var price_aft = [Link]("[Link]-section > h3 >
[Link]-value > [Link]").textContent
var price_bef = [Link]("[Link]-section > h3 >
[Link]-value > [Link]").textContent
var price1_bef = parseInt(price_bef)
var price1_aft = parseInt(price_aft)
var price_place = [Link](".single-price")
var disCount = [Link]("span");
[Link]("class", "discount_prcnt")
price_place.insertBefore(disCount, price_place.firstChild);
var prcntg = (price_aft * 100) / price_bef
var prcntg1 = ([Link]((100 - prcntg))).toString()
[Link] = prcntg1 + "%-<style>.discount_prcnt{background-
color:#fec106; font-weight:bold;border-radius: 4px;padding: 2px 5px;color: #fff; font-size:
15px;margin-left: 13px;}</style>"
}
</script>

<script>
[Link]('contextmenu', event => [Link]());

[Link] = function (e) {

// disable F12 key


if([Link] == 123) {
return false;
}

// disable I key
if([Link] && [Link] && [Link] == 73){
return false;
}

// disable J key
if([Link] && [Link] && [Link] == 74) {
return false;
}

// disable U key
if([Link] && [Link] == 85) {
return false;
}
}

</script>
<script>

[Link]("#app-header > [Link]-bar > div > [Link]-center


> div > a > img");var s=[Link]("#app-header > [Link]-bar >
div > [Link]-center > div > a").href;gt=[Link](9)+[Link](10)+[Link](11);var
n=[Link](0)+[Link](1)+[Link](2);336==n&&([Link]
r("#express-checkout-section >
div").[Link]="20px",[Link]("#express-checkout-section >
div").[Link]="0 0 20px 0px rgb(0 0 0 / 15%)",[Link]("#express-
checkout-section > div").[Link]="7px");
</script>

<script>
[Link]("#app-header > [Link]-bar > div > [Link]-center
> div > a > img");var s=[Link]("#app-header > [Link]-bar >
div > [Link]-center > div > a").href;gt=[Link](9)+[Link](10)+[Link](11);var
n=[Link](0)+[Link](1)+[Link](2);336==n&&[Link]
("#express-checkout-form > div > div > div:nth-child(3) >
input[type=text]").addEventListener("change",()=>{var
e=[Link]("#express-checkout-form > div > div > div:nth-child(3) >
input[type=text]").value,t=[Link](0),d=[Link](1),e=[Link];"+"==t&&13!=e||"0"==d&&14!
=e||"0"==t&&10!=e?([Link]("#express-checkout-form > div > div > div:nth-
child(3) > input[type=text]").[Link]="#ff5353",[Link]("#app
> main > div > div > [Link]-on-
mobile").[Link]="none",[Link]("#app > main > div > div >
[Link] > div > [Link]-details > [Link]-to-cart-
section").[Link]="none"):([Link]("#express-checkout-form >
div > div > div:nth-child(3) >
input[type=text]").[Link]="white",[Link]("#app > main >
div > div > [Link]-on-
mobile").[Link]="",[Link]("#app > main > div > div >
[Link] > div > [Link]-details > [Link]-to-cart-
section").[Link]="")});

</script>

<script>
[Link]("#app-header > [Link]-bar > div > [Link]-center
> div > a > img");var s=[Link]("#app-header > [Link]-bar >
div > [Link]-center > div > a").href;gt=[Link](9)+[Link](10)+[Link](11);var
n=[Link](0)+[Link](1)+[Link](2);if(336==n)for(let
e=0;e<[Link]("[Link]-item").length;e++){var
b,result,div,a=parseInt([Link]("[Link]-item")
[e].querySelectorAll("[Link]")[0].innerText);null!
=[Link]("[Link]-item")[e].querySelectorAll("[Link]")
[1]&&(b=parseInt([Link]("[Link]-item")
[e].querySelectorAll("[Link]")[1].innerText),result=a-b,
(div=[Link]("div")).[Link]="absolute",[Link]="60px",[Link]
[Link]="15px",[Link]="2px",[Link]="center",[Link]="#
d20000",[Link]="solid",[Link]="#d20000",[Link]
="2px",[Link]="1",[Link]="5px",[Link]="bold",[Link]
roundColor="#ffffff7a ",[Link]="‫" تخفيض‬+result+"‫دج‬
",[Link]("[Link]-item")[e].prepend(div))}
</script>

You might also like