I am trying to make a progress bar which is my requirement like the following image:
My code is:
<!DOCTYPE html>
<html>
<head>
<style>
.bar {
box-sizing: content-box;
height: 20px;
margin: 0 20px 50px;
padding-bottom: 60px;
padding-left: 50px;
padding-right: 50px;
}
.bar span {
display: block;
height: 100%;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(0 0 0 / 26%);
position: relative;
}
.bar span:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: 50px 50px;
background-image: linear-gradient(
-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent );
animation: move 2s linear infinite;
}
#keyframes move {
0% { background-position: 0 0; }
100% { background-position: 50px 50px; }
}
</style>
</head>
<body>
<div class="bar animate"><span style="width: 100%"></span></div>
</body>
</html>
And I get this through my code:
Can anyone help me getting the exact progress bar or similar as shown in the expected like where am I going wrong ?
Thanks in advance
I am not saying this is the only way of fixing this. But you could just go ahead and invert the colors you have.
background-image: linear-gradient(
-45deg,
rgb(0 0 0 / 20%) 25%,
transparent 25%,
transparent 50%,
rgb(0 0 0 / 20%) 50%,
rgb(0 0 0 / 20%) 75%,
transparent 75%,
transparent );
And invert the colors for this one as well:
background-color: rgb(255 255 255 / 26%);
.bar {
box-sizing: content-box;
height: 20px;
margin: 0 20px 50px;
padding-bottom: 60px;
padding-left: 50px;
padding-right: 50px;
}
.bar span {
display: block;
height: 100%;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(255 255 255 / 26%);
position: relative;
}
.bar span:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: 50px 50px;
background-image: linear-gradient(
-45deg,
rgb(0 0 0 / 20%) 25%,
transparent 25%,
transparent 50%,
rgb(0 0 0 / 20%) 50%,
rgb(0 0 0 / 20%) 75%,
transparent 75%,
transparent );
animation: move 2s linear infinite;
}
#keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
<body>
<div class="bar animate">
<span style="width: 100%"></span>
</div>
</body>
You need a background with repeating-linear-gradient
.background-lines {
background: repeating-linear-gradient(-45deg, grey,
grey 5px, white 5px, white 10px);
}
<div class="background-lines">
text if needed
</div>
You added your colors the wrong way.
At first the background-color from .bar span gets applied, resulting in a gray background for the whole bar.
And at second the gradient from .bar span:after get's appliced since it comes AFTER the actual html element.
Therefore just swap your colors and you are good to go.
So the white/transparent color on your span and the gray color on your :after.
Like so:
body {
background: white;
}
.bar {
box-sizing: content-box;
height: 20px;
margin: 0 20px 50px;
padding-bottom: 60px;
padding-left: 50px;
padding-right: 50px;
}
.bar span {
display: block;
height: 100%;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgba(255, 255, 255, .2);
position: relative;
}
.bar span:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: 50px 50px;
background-image: linear-gradient(
-45deg, rgba(0, 0, 0, .26) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .26) 50%, rgba(0, 0, 0, .26) 75%, transparent 75%, transparent );
animation: move 2s linear infinite;
}
#keyframes move {
0% { background-position: 0 0; }
100% { background-position: 50px 50px; }
}
<div class="bar animate"><span style="width: 100%"></span></div>
Also keep in mind, as soon as you change the background color for the outer container for your bar (eg. body tag), the bar wil result in another color as well, since you are using transparent colors.
Related
Hi I am trying to make a speedometer with gradient colours. My current code gets gradient colours, but its left to right.
Standing gradient - Wrong
I don't want the gradient that is in the vertical order. I want it to curve and fade.
Code:
.gauge {
font-family: Arial, Helvetica, sans-serif;
background-color: red;
background-image: linear-gradient(to right , red , orange , yellow , green);
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.09), 0 0 35px 5px rgba(255, 255, 255, 0.29);
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
position: relative;
overflow: hidden;
/* safari fix */
-webkit-transform-style: flat;
-webkit-transform: translateZ(0px);
}
<div class="gauge"></div>
What i am trying to achieve is a gradient of pizza pieces.
This can be achieved using conic-gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient
.conic-gradient {
width: 150px;
height: 150px;
background: conic-gradient(from 180deg, blue, green, yellow, orange, red);
border-radius: 100%;
}
<div class="conic-gradient">
<div>
You need to tweak it to your needs.
A mix of radial and conic gradients might also do, here a possible example:
.gauge {
font-family: Arial, Helvetica, sans-serif;
background:
/*black part */radial-gradient( circle at bottom center, black 59px, #5555 , transparent 65px),
/*pizza's pieces*/conic-gradient( from 4.7rad at 50% 100%, #39ab5e 0deg 36deg, #9ca92e 36deg 72deg, #eec22a 72deg 108deg, #e07b27 108deg 144deg, #e2443c 144deg);
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.09), 0 0 35px 5px rgba(255, 255, 255, 0.29);
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
position: relative;
overflow: hidden;
/* safari fix */
-webkit-transform-style: flat;
-webkit-transform: translateZ(0px);
}
/* demo purpose*/
html {
min-height: 100vh;
display: grid;
}
body {
background: #3D1873;
margin: auto;
}
.gauge {
color: white;
display: grid;
align-items: end;
justify-content: center;
font-size: 1.7em;
line-height:2.75
}
<div class="gauge">BIM</div>
colors blending
.gauge {
font-family: Arial, Helvetica, sans-serif;
background:
/*black part */radial-gradient( circle at bottom center, black 59px, #5555 , transparent 65px),
/*pizza's pieces*/conic-gradient( from 4.7rad at 50% 100%, #39ab5e 0deg 36deg, #9ca92e 36deg 72deg, #eec22a 72deg 108deg, #e07b27 108deg 144deg, #e2443c 144deg);
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.09), 0 0 35px 5px rgba(255, 255, 255, 0.29);
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
position: relative;
overflow: hidden;
/* safari fix */
-webkit-transform-style: flat;
-webkit-transform: translateZ(0px);
}
/* colors blending to next */
.gauge ~ .gauge {
background:
/*black part */radial-gradient( circle at bottom center, black 59px, #5555 , transparent 65px),
/*pizza's pieces*/conic-gradient( from 4.7rad at 50% 100%, #39ab5e , #9ca92e 36deg, #eec22a 72deg, #e07b27 108deg, #e2443c 144deg );
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.09), 0 0 35px 5px rgba(255, 255, 255, 0.29);
}
/* demo purpose*/
html {
min-height: 100vh;
display: grid;
text-align:center;
color:white;
}
body {
background: #3D1873;
display:flex;
margin: auto;
}
.gauge {
margin:1em;
color: white;
display: grid;
align-items: end;
justify-content: center;
font-size: 1.7em;
line-height:2.75;
flex-shrink:0;
}
.gauge:before {
content:'';
position:absolute;
bottom:-3px;
left:20px;
width:80px;
height: 6px;
background:linear-gradient(to left , transparent 55px, black 55px);
border-radius:50%;
box-shadow:3px 2px 2px #555;
clip-path: polygon(-10px -10px, 20px -10px, 20px 10px, -10px 10px);
transform-origin:center right;
transform:rotate(90deg);
animation: 4s rot infinite alternate;
}
#keyframes rot{
15%, from {transform:rotate(0deg)}
90%, to {transform:rotate(180deg)}
}
.gauge ~.gauge:before {
animation-play-state:paused;
}
.gauge ~ .gauge:hover:before {
animation: 4s rot infinite alternate;
}
<div class="gauge">BIM</div>
Next: animation paused<br>
hover to play animation
<div class="gauge">BIM</div>
i want to make a division like below image. i tried to make it by CSS3 transform property but it make full division 2D. i want to make just top left side. can your please help me?
try this one :), not the exact css you want, but hopefully this will help. check this link for the output. >> http://prntscr.com/lijc08
.hvr-curl-top-right {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
}
.hvr-curl-top-right:before {
width: 20px;
height: 20px;
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
top: 0;
right: -2px;
background: transparent;
// background: linear-gradient(225deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
background: -webkit-linear-gradient(225deg,transparent 45%,#ffde72 50%,#ffde72 56%,#ffde72 80%);
background: linear-gradient(225deg,transparent 45%,#ffde72 50%,#ffde72 56%,#ffde72 80%);
box-shadow: -1px 1px 1px rgba(0, 0, 0, .4);
-webkit-transition-property: width, height;
transition-property: width, height
}
I have created a shape which represents a page with a shadow that gets bigger towards the bottom.
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div></div>
I need this to be rotated but when i try to add transform: rotate(10deg), the box-shadow illusion gets ruined and goes on top of the parent layer.
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
transform: rotate(10deg);
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div></div>
I have found this question: Which CSS properties create a stacking context? but there doesn't seem to be a proposed solution for my requirement.
Would there be any good solutions which would work in my case. I do not mind if they are SVG, filter, canvas or any thing else as long as it is supported reasonably well.
If you use another div it fixes the problem that you are experiencing, so that the background colour is on the inner div and the rotate is on the outer div.
Else you might need to use another method to get the same result.
body {
background: #dddddd;
}
.two{
background: white;
height: 300px;
width: 300px;
padding: 10px;
}
div.one {
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
transform: rotate(10deg);
}
div.one:before,
div.one:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div.one:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div class="one">
<div class="two">
</div>
</div>
Note: This answer does not describe how to fix the stacking context problem that is seen in your approach. This just provides a couple of alternate approaches that could be used to achieve a similar effect. Advantage of these approaches is that they should work in IE10+ and does not require any extra elements.
I would still recommend vals' answer if IE support is not mandatory.
Method 1: Perspective Transform
This is almost similar to the one that you had used except that it uses a single pseudo-element rotated with perspective to produce the shadows. Since only one pseudo-element is utilized, the other pseudo can be used to add a white foreground above the shadows.
body {
background: #dddddd;
}
div {
position: relative;
height: 300px;
width: 300px;
padding: 10px;
margin: 40px auto;
transform: rotate(10deg);
}
div:before,
div:after {
position: absolute;
content: '';
top: 0px;
}
div:before {
height: 100%;
width: 100%;
left: 0px;
background: white;
}
div:after {
height: 98%;
width: 97%;
left: 1.5%;
transform-origin: bottom;
transform: perspective(125px) rotateX(1deg);
box-shadow: 10px 0px 10px rgba(0, 0, 0, .5), -10px 0px 10px rgba(0, 0, 0, .5);
z-index: -1;
}
<div></div>
Method 2: Linear Gradients
We can use linear-gradient background images and position them appropriately to produce an effect similar to the one produced by the box-shadows. But as you can see in the output, it doesn't quite match up to a shadow because the blurred areas are not the same.
Here, we make use of the following:
One small angled linear gradient image (to top left) to produce the shadow on the left side of the box.
Another small angled linear gradient image (to top right) to produce the shadow on the right side of the box.
A large linear-gradient image for the white colored area (which is almost a solid color). A gradient is used here instead of a solid color because the size of a gradient image can be controlled.
body {
background: #dddddd;
}
div {
margin: 40px auto;
height: 300px;
width: 300px;
transform: rotate(10deg);
backface-visibility: hidden;
background: linear-gradient(to right, transparent 0.1%, white 0.1%), linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%);
background-size: 280px 100%, 10px 97%, 10px 97%;
background-position: 10px 0px, left top, right top;
background-repeat: no-repeat;
background-origin: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>
The bottom of the gradient still doesn't get the blur that is seen in the box-shadow output. If needed, this can be achieved to some extent by adding even more gradients like in the below snippet.
body {
background: #dddddd;
}
div {
margin: 40px auto;
height: 300px;
width: 300px;
transform: rotate(10deg);
backface-visibility: hidden;
background: linear-gradient(to right, transparent 0.1%, white 0.1%), linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%), linear-gradient(to bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 5%, transparent 60%), linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 5%, transparent 70%);
background-size: 280px 100%, 10px 97%, 10px 97%, 10px 2.5%, 10px 2.5%;
background-position: 10px 0px, left top, right top, left 99.25%, right 99.25%;
background-repeat: no-repeat;
background-origin: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>
When you go into the transforms world, the transforms themselves will solve some of the problems that they create.
You can solve this with the 3d equivalent of z-index, the Z coordinate
Unfortunately, this won't work in IE (I believe until they support preserve 3d)
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
transform: translateZ(1px) rotate(10deg);
transform-style: preserve-3d;
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: translateZ(-1px) rotate(1.5deg);
}
div:after {
transform: translateZ(-1px) rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div></div>
Is it possible to create two arrows like the photo below with css or I have to use a png or svg?
So far
HTML
a {
position: relative;
display: block;
padding-left: 30px;
line-height: 45px;
height: 45px;
}
a:after,
a:before {
right: 100%;
top: 26px;
border-left: 1px solid black;
content: " ";
height: 30px;
width: 25px;
position: absolute;
pointer-events: none;
left: 7px;
}
a:after {
-webkit-transform: rotate(135deg);
left: -11px;
}
a:before {
-webkit-transform: rotate(45deg);
top: 5px;
}
Next
jsfiddle
I can't figure how to put another pair of borders.
Thanks in advance
With a bit of tinkering of your example, it's possible, but you'd probably be better off using another method to draw it or using an icon or icon font.
Here's the fiddle
Achieved with
transform: skew();
rather than rotate.
It's possible, but I would just use a SVG in this case:
http://jsfiddle.net/6v7Np/
HTML
<div class="arrow_box"></div>
<div class="arrow_box alt"></div>
CSS
.arrow_box {
position: relative;
background: #fff;
top:50px;
left:60px;
}
.arrow_box.alt {
left:80px;
}
.arrow_box:after, .arrow_box:before {
right: 100%;
top: 50%;
border: solid transparent;
content:" ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 30px;
margin-top: -30px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000;
border-width: 31px;
margin-top: -31px;
}
With gradients:
a{
position: relative;
padding-left: 40px;
}
a::before{
content: '';
position: absolute;
width: 40px;
height: 40px;
left: 0;
top: 0;
background-image:
linear-gradient(135deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
linear-gradient(45deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
linear-gradient(135deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
linear-gradient(45deg, transparent 0px, transparent 19px, black 20px, transparent 21px);
background-repeat: no-repeat;
background-size: 50% 50%;
background-position: 0% top, 0% bottom, 50% top, 50% bottom;
/* distance ^ ^ */
}
http://jsfiddle.net/E8sRw/
Is it possible to create this shape in CSS3? How?
I am stuck: http://dabblet.com/gist/2962169
h1 {
background-color: #434b82;
border-radius: 20px 0 0 20px;
transform: skew(-20deg);
}
<h1>TEST</h1>
You mean somthing like this
h1 {
background-color: #434b82;
border-radius: 20px 0 0 20px;
width:500px;
height:40px;
border-right: 40px solid transparent;
}
h1:after{
position:absolute;
width: 80px;
border-top: 40px solid #434b82;
margin-left:500px;
border-right: 20px solid transparent;
content:"";
}
<h1></h1>
We can use linear-gradient() to draw this shape on rectangular element.
This trick uses the idea of dividing whole shape in two parts and then draws each part on the background independently.
div {
background-image: linear-gradient(to left, #434b82, #434b82),
linear-gradient(to left top, transparent 50%, #434b82 50%);
background-position: top right 20px, 100% 100%;
background-size: 100% 100%, 20px 100%;
background-repeat: no-repeat;
}
div {
background-image: linear-gradient(to left, #434b82, #434b82),
linear-gradient(to left top, transparent 50%, #434b82 50%);
background-position: top right 20px, 100% 100%;
background-size: 100% 100%, 20px 100%;
background-repeat: no-repeat;
border-radius: 30px 0 0 30px;
line-height: 50px;
padding: 0 25px;
height: 50px;
width: 200px;
color: #fff;
}
<div>
Some Text Here...
</div>