Related
What I'm trying to achieve is a green rectangle on the red rectangle, but the green rectangle should start at a lower point, not according to the height of the DIV and end before the red one.
Illustration:
#div_1{
width: 200px;
min-height: 35px;
background:linear-gradient(to top, red 10%, transparent 10%), linear-gradient(90deg, blue 0% 10%,
red 10% 15%,green 15% 80%,red 80% 85%
,blue 85% 100%);
}
<div id ="div_1"></div>
#div_1{
width: 400px;
height: 100px;
background:linear-gradient(to left, blue 15%, transparent 10%),linear-gradient(to right, blue 10%, transparent 10%), linear-gradient(to top, red 15%, transparent 10%),linear-gradient(to bottom, red 15%, transparent 10%), linear-gradient(90deg,blue 0% 10%,red 10% 15%,green 15% 80%,red 80% 85%
,blue 85% 100%);
}
<div id ="div_1"></div>
I want to create a circular progress bar around an image that should look like this :
I have tried making the circle fill but it just transforms into a spinner with the following code
.wrapper {
width: 152px;
height: 152px;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #21ac62;
width: 120px;
height: 120px;
animation: fill ease-in-out 3s;
transform: rotate(360deg);
}
.wrapper {
background: url('https://i.ibb.co/5T3p5sY/icon-3151974-1280.png') center no-repeat;
background-size:50%;
}
#keyframes fill{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="jQuery-plugin-progressbar.css">
</head>
<body>
<div class="wrapper">
<div class="loader"></div>
</div>
</body>
</html>
I achieved the goal without changing the HTML layout using clip-path animation.
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
.wrapper {
width: 152px;
height: 152px;
background-image: url('https://i.ibb.co/5T3p5sY/icon-3151974-1280.png');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
.loader {
border: 16px solid #21ac62;
border-radius: 50%;
width: 120px;
height: 120px;
animation: fill linear 3s;
}
#keyframes fill {
0% {
clip-path: polygon(50% 0%, 50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
}
12.5% {
clip-path: polygon(50% 0%, 50% 50%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
}
37.5% {
clip-path: polygon(50% 0%, 50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 0%);
}
62.5% {
clip-path: polygon(50% 0%, 50% 50%, 0% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%);
}
87.5% {
clip-path: polygon(50% 0%, 50% 50%, 0% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
100% {
clip-path: polygon(50% 0%, 50% 50%, 50% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
}
<div class="wrapper">
<div class="loader"></div>
</div>
Edit: This should be smoother:
.wrapper {
width: 152px;
height: 152px;
background-image: url('https://i.ibb.co/5T3p5sY/icon-3151974-1280.png');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
.loader {
border: 16px solid #21ac62;
border-radius: 50%;
width: 120px;
height: 120px;
animation: fill linear 3s;
}
#keyframes fill {
0% {
clip-path: polygon(50% -20.71%, 50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
}
12.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
}
25% {
clip-path: polygon(50% -20.71%, 50% 50%, 120.71% 50%, 120.71% 50%, 120.71% 50%, 120.71% 50%, 100% 0%);
}
37.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 0%);
}
50% {
clip-path: polygon(50% -20.71%, 50% 50%, 50% 120.71%, 50% 120.71%, 50% 120.71%, 100% 100%, 100% 0%);
}
62.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 0% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%);
}
75% {
clip-path: polygon(50% -20.71%, 50% 50%, -20.71% 50%, -20.71% 50%, 0% 100%, 100% 100%, 100% 0%);
}
87.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 0% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
100% {
clip-path: polygon(50% -20.71%, 50% 50%, 50% -20.71%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
}
<div class="wrapper">
<div class="loader"></div>
</div>
For more Information and Full Explaination, Reach to https://dev.to/shantanu_jana/circular-progress-bar-using-html-and-css-1oda
body {
background:#d2eaf1;
}
.circle-wrap {
margin: 150px auto;
width: 150px;
height: 150px;
background: #fefcff;
border-radius: 50%;
border: 1px solid #cdcbd0;
}
.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
width: 150px;
height: 150px;
position: absolute;
border-radius: 50%;
}
.circle-wrap .circle .mask {
clip: rect(0px, 150px, 150px, 75px);
}
.circle-wrap .inside-circle {
width: 122px;
height: 122px;
border-radius: 50%;
background: #d2eaf1;
line-height: 120px;
text-align: center;
margin-top: 14px;
margin-left: 14px;
color: #1e51dc;
position: absolute;
z-index: 100;
font-weight: 700;
font-size: 2em;
display:flex;
align-items:center;
justify-content:center;
}
/* color animation */
/* 3rd progress bar */
.mask .fill {
clip: rect(0px, 75px, 150px, 0px);
background-color: #227ded;
}
.mask.full,
.circle .fill {
animation: fill ease-in-out 3s;
transform: rotate(135deg);
}
#keyframes fill{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(135deg);
}
}
<body>
<div class="circle-wrap">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
</div>
<div class="inside-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-apple" viewBox="0 0 16 16">
<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282z"/>
<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282z"/>
</svg> </div>
</div>
</div>
</body>
I want to resize a soccer pitch that I've drawn in CSS. Basically, the idea is to make the pitch responsive and become a reusable component for web/native development (I will be using React).
Here's my code snippet so far- I'm struggling to figure out how to maximise the CSS width so that it takes up most of the available space, whilst still keeping the same dimensions/scale of a soccer pitch (on multiple devices). How should I adjust my width and height fields?
html {
--green: #4c7;
--light: #5d8;
background: var(--green);
}
body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vmin;
height: 60vmin;
border: 0.5vmin solid white;
background-image:
radial-gradient(circle at 0% 0%, transparent 1%, white 0 1.5%, transparent 0),
radial-gradient(circle at 100% 0%, transparent 1%, white 0 1.5%, transparent 0),
radial-gradient(circle at 0% 100%, transparent 1%, white 0 1.5%, transparent 0),
radial-gradient(circle at 100% 100%, transparent 1%, white 0 1.5%, transparent 0),
radial-gradient(circle at 50% 50%, white 1%, transparent 0),
radial-gradient(circle at 50% 50%, transparent 14%, white 0 14.75%, transparent 0),
linear-gradient(to right, transparent 49.75%, white 0 50.25%, transparent 0),
repeating-linear-gradient(to right, var(--green) 0 10%, var(--light) 0 20%);
}
You can use the CSS media query aspect-ratio.
Depending on whether the viewport has aspect ratio greater than or less than 9/6 you can set the height of the pitch to the maximum (100vh) and the width as 9/6*100vh and vice versa.
This snippet actually uses 95vh/vw to give you a bit of room round the edge so you can see it's working. Also it defines a class 'pitch' and uses a div as the pitch element rather than body - though of course you are free to use body in the way you have it might be rather constricting if, say, you want to put things round the edge of the pitch.
html {
--green: #4c7;
--light: #5d8;
background: var(--green);
}
.pitch {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 95vw;
height: calc((6 / 9) * 95vw);
border: 0.5vmin solid white;
background-image: radial-gradient(circle at 0% 0%, transparent 1%, white 0 1.5%, transparent 0), radial-gradient(circle at 100% 0%, transparent 1%, white 0 1.5%, transparent 0), radial-gradient(circle at 0% 100%, transparent 1%, white 0 1.5%, transparent 0), radial-gradient(circle at 100% 100%, transparent 1%, white 0 1.5%, transparent 0), radial-gradient(circle at 50% 50%, white 1%, transparent 0), radial-gradient(circle at 50% 50%, transparent 14%, white 0 14.75%, transparent 0), linear-gradient(to right, transparent 49.75%, white 0 50.25%, transparent 0), repeating-linear-gradient(to right, var(--green) 0 10%, var(--light) 0 20%);
}
#media (min-aspect-ratio: 9/6) {
/* this means that we have to fit the height to 100vh and the width must adjust accordingly */
.pitch {
padding-bottom: 0;
height: 95vh;
width: calc((9 / 6) * 95vh);
}
}
<div class="pitch"></div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I would want to add to my website a progress bar with this design:
The progress pie
How do I make a progress pie with an image inside it, and when it moves it display the image inside it with colors?
This is non-trivial but could be achieved by using two images, clip-path and a script, a greyscale image and a coloured image.
Position the greyscale image under the coloured one.
Use clip-path to only show a portion of the coloured image.
Adjust the clip-path values using a JavaScript loop OR using a css key-frames animation
Here's a simplified keyframes example:
.greyscale {
filter: grayscale(1);
}
.color {
overflow: hidden;
animation: clippy 2s infinite;
}
#keyframes clippy {
0% { clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0); }
12.5% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 0, 100% 0, 100% 0, 100% 0); }
25% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 50%, 100% 50%, 100% 50%); }
37.5% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%); }
50% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 100%, 50% 100%); }
62.5% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 100%); }
75% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 0 50%); }
87.5% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 0 0); }
100% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); }
}
div {
border-radius: 50%;
height: 200px;
overflow: hidden;
position: relative;
width: 200px;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
position: absolute;
}
<div>
<img class="greyscale" src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg">
<img class="color" src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg">
</div>
I am developing a site for my client and he asked me to have the same below site kind a effect for his website
http://www.big.dk/
here you can see text is filling up and after it finish filling all the letters, homepage loads up. any idea how can I copy the same kind a effect or any code you can share. I try to rip the code but I think the site is using swf file not jquery as I couldn't rip it successfully.
To achieve the effect mentioned, I followed the following approach.
Create an image with required text on it (StackOverflow for example).
Make the text on this image transparent. (I did it in Microsoft Powerpoint).
This is how the image looks
Note that the text area is transparent. Download this image and open it in any image viewer to verify.
Then, Create a gradient. (You can use this for simplicity)
Combining the above resources, here is the fiddle.
#color {
position: absolute;
width: 800px;
height: 130px;
background: -moz-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* ff3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ff0000), color-stop(25%, #2AA830), color-stop(50%, #05C1FF), color-stop(75%, #ffff00), color-stop(100%, #0808BF));
/* safari4+,chrome */
background: -webkit-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* safari5.1+,chrome10+ */
background: -o-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* opera 11.10+ */
background: -ms-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* ie10+ */
background: linear-gradient(90deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* w3c */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0808BF', GradientType=1);
/* ie6-9 */
}
#text {
position: absolute;
width: 800px;
height: 130px;
background: url('http://i.stack.imgur.com/plKV4.png');
background-size: 100% 100%;
}
#slider {
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;
background: gray;
animation: slide forwards 5s linear;
}
#keyframes slide {
0% {
left: 0%;
}
100% {
left: 100%;
}
}
<div id="color">
<div id="slider"></div>
<div id="text"></div>
</div>
I have used keyframes animation to fill the color.
It can be easily replaced by jQuery