Pure CSS Giftbox

Developer
Anghelos Coulon
Size
2,082 Kb
Views
127,512
  1. Pure CSS Giftbox Previews
  2. Pure CSS Giftbox HTML Codes
  3. Pure CSS Giftbox CSS Codes
  4. Pure CSS Giftbox JS Codes

How do I make an pure css giftbox?

A HUGE button.. What is a pure css giftbox? How do you make a pure css giftbox? This script and codes were developed by Anghelos Coulon on 31 August 2022, Wednesday.

Pure CSS Giftbox Previews
IQ Test

Pure CSS Giftbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Giftbox</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div id="circle"> <div id="gift"> <div id="ribbon"></div> <div id="giftbox"></div> </div> </div>
</body> <script src="js/index.js"></script>
</body>
</html>

Pure CSS Giftbox - Script Codes CSS Codes

@-webkit-keyframes spin{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes spin{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
body{ background-color:lightgrey;
}
#circle{ width:214px; height:214px; background-color:#FFC847; border-radius:214px; position:absolute; top:0;right:0;bottom:0;left:0; margin:auto; box-shadow:0 1px 2px rgba(0,0,0,0.3);
}
#circle:after{ content:""; display:block; border:7px dashed white; width:200px; height:200px; border-radius:200px; -webkit-animation: spin 30s linear infinite; animation: spin 30s linear infinite;
}
#circle:hover{ background-image:-webkit-radial-gradient(#FFED85, #FFC847 70%); background-image:radial-gradient(#FFED85, #FFC847 70%);
}
#gift{ position:absolute; top:0;right:0;left:0;bottom:0; margin:auto; width:100px; height:125px;
}
#ribbon{ position:relative; width:60px; height:60px; -webkit-transform:rotate(45deg); transform:rotate(45deg); margin:auto; margin-bottom:-38px; border-radius:0 8px 0 8px;
}
#ribbon:before{ content:""; height:24px; width:100%; background-color:#F04D4D; display:block; position:absolute; top:18px; box-shadow:0 0 1px rgba(0,0,0,0.4); border-radius:inherit;
}
#ribbon:after{ content:""; height:100%; width:24px; background-color:#F04D4D; display:block; margin:auto; box-shadow:0 0 1px rgba(0,0,0,0.4); border-radius:inherit;
}
#giftbox{ position:relative; margin:auto; width:100px; height:100px; background-color:white; border-radius:2px; box-shadow:0 0 1px rgba(0,0,0,0.4); overflow:hidden;
}
#giftbox:before{ content:""; height:24%; width:100%; background-color:#F04D4D; display:block; position:absolute; top:38%; box-shadow:inherit;
}
#giftbox:after{ content:""; height:100%; width:24%; background-color:#F04D4D; display:block; margin:auto; box-shadow:inherit;
}

Pure CSS Giftbox - Script Codes JS Codes

/* Rounded dashed borders don't work on firefox */
Pure CSS Giftbox - Script Codes
Pure CSS Giftbox - Script Codes
Home Page Home
Developer Anghelos Coulon
Username anguo
Uploaded August 31, 2022
Rating 3
Size 2,082 Kb
Views 127,512
Do you need developer help for Pure CSS Giftbox?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anghelos Coulon (anguo) Script Codes
Name
Night reading mode
Rotating oven - Animated SVG
Pistachio skin remover machine, animated SVG
Pistachio pattern
Sheji
Lemon
Simple always-visible comment indicator
Donate Button With CSS Animated God Rays
CSS Gas Flame Animation
Ripple
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!