I have a few divs one on top of the other that present a progress bar.
I got the css from sketch (graphic artist program).
In sketch the divs blend into each other, but when I take the css and put it in a html page it doesn't look as good.
Any idea what it can be?
I am attaching the css and screenshots:
.bar-bg {
width: 256px;
height: 10px;
opacity: 0.2;
border-radius: 5px;
box-shadow: inset 0 1px 6px 0 rgba(0, 0, 0, 0.9);
border: solid 1px $white;
background-color: $dark-blue;
}
.oval {
width: 24px;
height: 24px;
opacity: 0.9;
mix-blend-mode: color-dodge;
background-image: radial-gradient(circle at 52% 50%, #cf2d8e, #000000);
margin-top: -16px;
}
.progress {
height: 8px;
opacity: 0.9;
border-radius: 4px;
box-shadow: 0 0 6px 5px rgba(44, 146, 255, 0.7), inset 0 0 0 1px $icons;
border: solid 1px $blue;
background-color: $primary-1;
margin-top: -9px;
margin-left: 1px;
}
<div id="progressContainer">
<div id="bar" class="bar-bg"></div>
<div id="progress" class="progress" [style.width.px]="getProgress()"></div>
<div id="currentValue" class="oval" [style.margin-left.px]="getOvalLocation()"></div>
</div>
when I run it it looks like this:
trying to get it to look like this:
As you can see in image2 the divs blend into each other better than in image1.
Related
I want to make a card look like this, the border or the sides of the card are semi-circular, is it possible to make it with css? if yes, how? Thank you in advance
.wrapper {
}
.content-card {
width: 315px;
height: 131px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.12);
border-radius: 8px;
}
<div class="wrapper">
<div class="content-card">
</div>
</div>
Multiple background can do it:
.content-card {
width: 300px;
height: 150px;
background:
radial-gradient(8px at left ,#0000 98%,#fff) left ,
radial-gradient(8px at right,#0000 98%,#fff) right;
background-size: 50.5% 25px;
background-repeat:repeat-y;
filter: drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.12));
border-radius: 8px;
}
body {
background: pink;
}
<div class="content-card">
</div>
The old way - border-image
It permits you to use the willing image for borders, it was widely use for this kind of cases. You can have repeat option on it to allow different box's sizes with the same style.
The mozilla doc is quite explicit with good examples of it : https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
The recent way - without image
You have the possibility to use pseudo-element :after and :before and stylize those elements with a repeated background using radial-gradient.
body {
background-color: #ffaaaa;
}
.ticket {
position: relative;
width: 300px;
height: 170px;
margin: 10px;
border-radius: 10px;
background: white;
box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.12);
}
.ticket:before,
.ticket:after {
content: '';
position: absolute;
top: 5px;
width: 6px;
height: 160px;
}
.ticket:before {
left: -5px;
background: radial-gradient(circle, transparent, transparent 50%, #FBFBFB 50%, #FBFBFB 100%) -7px -8px/16px 16px repeat-y;
}
.ticket:after {
left: 300px;
background: radial-gradient(circle, transparent, transparent 50%, #FBFBFB 0%, #FBFBFB 100% ) -3px -7px / 16px 16px repeat-y;
}
<div class="ticket"></div>
I am trying to get a vertical effect for a sidebar on a page. I have tried the deg option but it still shows a horizontal line
.sidebar {
position: relative;
display: inline-block;
padding: 15px 25px;
background-image: linear-gradient(90deg, #1559EC, #1559EC);
color: #fff;
font-size: 36px;
font-family: Arial;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
.sidebar:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: 50%;
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}
<div class="sidebar">
The quick brown fox
</div>
The issue is not the gradient but the pseudo element. The gradient is using the same color so the angle is useless. What you need is to invert height/width values on the pseudo element and adjust the direction of its gradient. You can also replace the gradient of the main element by simple color:
.sidebar {
position: relative;
display: inline-block;
padding: 15px 25px;
background:#1559EC;
color: #fff;
font-size: 36px;
font-family: Arial;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
.sidebar:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 50%;
height: calc(100% - 4px);
background: linear-gradient(to right,rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}
<div class="sidebar">
The quick brown fox
</div>
And you can simplify it like below using multiple background on the main element:
.sidebar {
position: relative;
display: inline-block;
padding: 15px 25px;
background:
linear-gradient(to right,rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)) 2px 2px/50% calc(100% - 4px)no-repeat,
#1559EC;
color: #fff;
font-size: 36px;
font-family: Arial;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
<div class="sidebar">
The quick brown fox
</div>
The gradient you're trying to change has both colors the same so you won't see the difference. The easiest way to make what you want IS using a generator since the code for each render engine is a bit different.
The easiest keyword solution is to use "to direction" instead of a degree. See below. The first box is top to bottom and the second is left to right.
Your example has a pseudo-class (:after) adding a second gradient to create the hard line. You could achieve a similar effect by adding more stops to the gradient.
.box{
width: 100px;
height: 100px;
margin-bottom: 20px
}
.gradient1 {
background: linear-gradient(to bottom, #8fc400, #29b8e5);
}
.gradient2 {
background: linear-gradient(to right, #8fc400, #29b8e5);
}
.gradient3 {
background: linear-gradient(to bottom, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
}
<div class="box gradient1">
</div>
<div class="box gradient2">
</div>
<div class="box gradient3">
</div>
This is what i have got so far
After after checking out tutorial
I want know how curved effect is generated on divs the only question that i found near to what i was looking for was At here at stackoverlow but that too dint help
How folded edge effect is created on as in the above picture
Css
#MenuShape{
height:50px;
background-color:orange;
width:200px;
position:relative;
text-align:center;
left:100px;
}
#MenuShape:after{
content:"";
position: absolute;
width: 0;
height: 0;
left:200px;
border-top: 50px solid transparent;
border-left: 100px solid orange;
border-bottom: 0px solid transparent;
}
#MenuShape:before{
content:"";
position: absolute;
width: 0;
height: -50;
left:-100px;
border-top: 50px solid transparent;
border-right: 100px solid orange;
border-bottom: 0px solid transparent;
}
HTML
<div id="MenuShape" >
sachin
</div>
https://css-tricks.com/ this the site on inspecting it i found its span wrapped
anchor tag along with svg tag
<a href="/" class="home">
<svg viewBox="0 0 100 25" class="shape-tab">
<use xlink:href="#shape-tab"></use>
</svg>
<span>Blog</span></a>
Click here to see the unexpected behaviour it works fine in codepen
Here is a final demo (archived) on the folded corners:
and the following code is how you can create them:
.note {
position: relative;
width: 30%;
padding: 1em 1.5em;
margin: 2em auto;
color: #fff;
background: #97C02F;
overflow: hidden;
}
.note:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #658E15 #658E15;
background: #658E15;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
/* Firefox 3.0 damage limitation */
display: block;
width: 0;
}
.note.rounded {
-moz-border-radius: 5px 0 5px 5px;
border-radius: 5px 0 5px 5px;
}
.note.rounded:before {
border-width: 8px;
border-color: #fff #fff transparent transparent;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}
<div class="note"></div>
To create a curved wave effect you can use this code:
#wave {
position: relative;
height: 70px;
width: 600px;
background: #e0efe3;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}
<div id="wave"></div>
To achieve the curve you’ll need to inverse where it starts. Follow the same demo, just reverse your values.
See a live demonstration (archived) of how border radius can create the shapes and effects you want and adjust each corner to see it in action.
I would like to create a Vodafone logo with css like this one:
I know some people are able to draw anything with css. I can't figure out how to make the tear drop shape. This is what I have as far as now:
#logoMain {
width: 100px;
height: 100px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 50%;
box-shadow: 0px 0px 50px 0px #999 inset;
position: relative;
}
#logoMainafter {
width: 100px;
height: 100px;
margin-top: -35px;
margin-left: 55px;
display: block;
border-radius: 50%;
background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%);
-webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
-webkit-filter: blur(10px);
}
#logoInside {
width: 50px;
height: 50px;
margin: 24px;
background-color: #fe0000;
border: 1px solid red;
border-radius: 50%;
box-shadow: 0px 0px 15px 3px #a80000 inset;
}
<body>
<div id="logoMain">
<div id="logoInside"></div>
<div id="logoMainafter"></div>
</div>
</body>
Can anyone give me any ideas how to create this unusual shape?
For more complex shapes I'd look at using d3js or raphael and the svg element with css backing it. Take a look at this example. There is alot of other examples on the same site of complex shapes you can draw with CSS with a little help from JS.
Well, since anybody is answering, here you have a draft to begin with
CSS
#logoMain {
width: 100px;
height: 100px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 50%;
box-shadow: 0px 0px 50px 0px #999 inset ;
position: relative;
}
#logoMainafter {
width: 100px;
height: 100px;
margin-top: -35px;
margin-left: 55px;
display: block;
border-radius: 50%;
background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%);
-webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
-webkit-filter: blur(10px);
}
#logoInside {
width: 50px;
height: 50px;
margin: 24px;
background-color: #fe0000;
border: 1px solid red;
border-radius: 50%;
box-shadow: 0px 0px 15px 3px #a80000 inset;
z-index: 23;
position: absolute;
}
#logoMain:after {
content: "";
width: 50px;
height: 50px;
position: absolute;
top: 2px;
left: 57px;
/* background-color: green; */
border-radius: 50%;
box-shadow: -19px 17px 0px 14px #e80000;
clip: rect(0px, 12px, 63px, -110px);
z-index: 0;
}
fiddle
This is probably not the best use of your time, drawing this in CSS. Use a graphics editor that is made for it and export it to SVG or any other picture format. The pain you need to go to code this is not worth it.
I made a horizontal progress bar that does not have a problem with it
But the progress bar's vertical lines are not correct.
I put a picture of the problem.
jsfiddle.net/post98/juGXZ/1/
HTML
<body>
<div class="progress-bar horizontale">
<div class="inner"><span>|||||||</span></div>
</div>
<div class="progress-bar verticale">
<div class="inner"><span>___ ___ ___ ___ ___</span></div>
</div>
</body>
CSS
body {
background: url('https://www.dropbox.com/s/8g7pf7ig7fw5e0v/main_bg.png') repeat;
}
.progress-bar.verticale {
width: 24px;
height: 300px;
/*border: 1px solid #060707;*/
margin: 10px auto;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
border-radius: 10px;
padding: 4px;
transform: rotate(180deg);
display: inline-block;
}
.progress-bar.horizontale {
width: 300px;
height: 24px;
/*border: 1px solid #060707;*/
margin: auto;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
border-radius: 10px;
padding: 4px;
display: inline-block;
}
.progress-bar.horizontale .inner {
background: linear-gradient(#FFCC33, #CC9900);
border-radius: 12px;
position: absolute;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
height: 24px;
width: 200px;
}
.progress-bar.horizontale .inner span {
background: repeat scroll 0 0 #999999;
position: absolute;
font: bold 120px/40px sans-serif ;
letter-spacing: -6px;
height: 24px;
opacity: 0.06;
overflow: hidden;
transform: skewX(-30deg);
}
.progress-bar.verticale .inner {
background: linear-gradient(#FFCC33, #CC9900);
border-radius: 12px;
position: absolute;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
height: 200px;
width: 24px;
}
.progress-bar.verticale .inner span {
background: repeat scroll 0 0 #999999;
position: absolute;
font: bold 20px/30px sans-serif ;
letter-spacing: -6px;
height: 200px;
width: 20px;
opacity: 0.06;
overflow: hidden;
transform: skewY(30deg);
}
Here the Picture
You can make the lines thick by replacing the underscores _ by a thick character like this one: ▀
A demo.
Edit:
ASCII code of the character: 223 (Top half block).
You can thicken the lines like this:
.progress-bar.verticale .inner span {
background: repeat scroll 0 0 #999999;
position: absolute;
font: bold 120px/30px sans-serif ; //thicken lines to same width as horizontal progress bar.
letter-spacing: -6px;
height: 200px;
width: 25px; //change width to fit width of div.
opacity: 0.06;
overflow: hidden;
transform: skewY(30deg);
margin:0px 0px 0px 0px;
bottom: 35px; //Position revision to justify font resizing.
}