I am trying to create a CSS progress bar however for some reason the UNFILL part (white background) doesn't overlap with the green background which is the FILL part.
Any idea how to make it like that?
Also which browser this should ONLY or WILL NOT work for since this is a #Keyframe CSS3?
CSS:
.container{
width: 400px;
margin: 0 auto;
}
.bar{
width: 100%;
background: #141414;
padding: 17px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.bar-fill{
height: 15px;
display: block;
background: #45c9a5;
width: 0%;
border-radius: 8px;
-webkit-transition: width 0.8s ease;
transition: width 0.8s ease;
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
}
.bar-unfill{
height: 15px;
display: block;
background: #fff;
width: 100%;
border-radius: 8px;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
from {width: 0%;}
to {width: 100%;}
}
/* Standard syntax */
#keyframes mymove {
from {width: 0%;}
to {width: 100%;}
}
.title{
background: #545965;
color: #fff;
padding: 15px;
float: left;
position: relative;
right: 60px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
Here is the JSFIDDLE: https://jsfiddle.net/xdbb3ypc/1/
Thanks!
Please provide JSFIDDLE ALSO
Just position 'filled' part inside 'unfilled', ie something like that:
<div class="container">
<div class="title">Testing</div>
<div class="bar">
<span class="bar-unfill">
<span class="bar-fill"></span>
</span>
</div>
</div>
you should position the filled bar inside the unfilled bar, to allow it to be drawn on top of it
<div class="container">
<div class="title">Testing</div>
<div class="bar">
<span class="bar-unfill">
<span class="bar-fill"></span>
</span>
</div>
</div>
JSFiddle: https://jsfiddle.net/z4kn3p40/
Related
I am working on a menu with CSS where when I point on the third item in the first row of the menu, the item will be bigger and then the second row will be messy. I tried to change the margins of the items and the sizes too, but it didn't work with me. also, I tried to change the padding of the menu body and the size, but nothing worked too.
I hope there is someone who could help.
thank you in advance
https://jsfiddle.net/a1dzbg1v/1/
here are HTML code and CSS
#menu {
padding: 0 10px;
}
.menu {
padding: 3px 5px;
margin: 0 5px;
position: relative;
display: inline-block;
border: 2px solid black;
border-radius: 10px;
float: right;
cursor: pointer;
}
.menu:hover {
background: #f9e8b5;
}
.menu-content {
position: absolute;
right: 0px;
width: 273px;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
text-align: center;
border: 1px solid black;
border-radius: 10px;
color: black;
background: linear-gradient(to bottom, #d3bd7b 0%,#ead28a 50%);
height: 0px;
padding: 40px 5px 20px 5px;
-webkit-transition: height 2s ease-out; /* For Safari 3.1 to 6.0 */
transition: height 2s ease-out;
}
.menu-content:hover {
height: auto;
padding: 45px 5px 25px 5px;
-webkit-transition: height 2s ease-out; /* For Safari 3.1 to 6.0 */
transition: height 2s ease-out;
}
.menu .menu-content {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;
}
.menu:hover .menu-content {
display: block;
visibility: visible;
opacity: 1;
}
.menu-header {
position: absolute;
top: 0px;
left: 0px;
width: 283px;
height: 40px;
background: black;
margin: 0px;
padding: 0px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.menu-header p{
color: #ead28a;
font-weight: bold;
font-size: 20px;
margin: 8px;
}
.menu-footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 283px;
height: 20px;
background: black;
margin: 0px;
padding: 0px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.menu-footer p{
color: #ead28a;
margin: 4px;
}
.menu-item {
visibility: hidden;
list-style-type: none;
height: 60px;
width: 60px;
margin: 15px;
float: left;
border-radius: 10px;
-webkit-transition: width 2s, height 2s, margin 2s, visibility 2s, opacity 1s linear; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, margin 2s, visibility 2s, opacity 1s linear;
}
.menu-content .menu-item{
}
.menu-content:hover .menu-item {
visibility: visible;
opacity: 1;
}
.menu-item:hover {
height: 85px;
width: 85px;
margin: 0px;
background: #f9e8b5;
padding: 0px;
}
.menu-item a {
height: 60px;
width: 60px;
display: block;
text-decoration: none;
border-radius: 10px;
margin: 0px;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: linear-gradient(to bottom, #d3bd7b 0%,#ead28a 50%);
transform: scale(1);
-webkit-transition: width 2s, height 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s;
}
.menu-item a:hover {
height: 85px;
width: 85px;
display: block;
margin: 0px;
background: #f9e8b5;
padding: 0px;
transform: scale(1);
}
.menu-item a p {
visibility: hidden;
opacity: 0;
margin: 0px;
-webkit-transition:visibility 2s, opacity 1s linear; /* For Safari 3.1 to 6.0 */
transition: visibility 2s, opacity 1s linear;
-webkit-transition-delay: 0.5s; /* Safari */
transition-delay: 0.5s;
}
.menu-item:hover.menu-item a p {
font-size: 16px;
visibility: visible;
opacity: 1;
}
.menu-item a img {
margin-top: 10px;
}
.menu-item:hover.menu-item a img {
margin-top: 20px;
}
<div id="menu">
<div class="menu">
<spin><img class="icon" src="#" /></spin>
<div class="menu-content">
<div class="menu-header">
<p>User Menu</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 1</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 2</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 3</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 4</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 5</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 6</p>
</div>
<div class="menu-footer">
<p><?php echo date("m-d-Y :: H:i:s");?></p>
</div>
</div>
</div>
</div>
I don't know where the rule about the transformation matrix is coming from; in an element inspector, it shows up in "Computed" styles, but I don't see any rule with a transform matrix in your actual CSS.
That said, I ran your code snippet and the only way I could figure out to fix your problem was to add
clear: left;
to your fourth menu-item div (the Meals one). You can do that the usual way in your stylesheet by calling nth-child or giving that element its own class name. You could also do an inline style but generally I know that's not recommended.
I'm sure there's a better way to fix this that wouldn't involve applying this to only one of your menu item divs, but it works.
I am having a progess bar which should become filled up by 50% width.
This is my current html and css for the progress bar.
HTML:
<div id="ProgressBar">
<div id="Progress"></div>
</div>
CSS:
#ProgressBar {
width: 100%;
height: 30px;
border: 1px solid black;
border-radius: 7px;
padding: 4px;
}
#Progress {
width: 10%;
background-color: #4A90E2;
height: 100%;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
border-color: #4A90E2;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#Progress:hover {
width: 50%;
}
As you can see the transition is starting after a hover over the progress. My goal is to have this transaition starting directly after the page loads. I know there are some examples in the internet but they are all having fade-in effects only and I can't figure it out.
I appreciate your help.
Here my fiddle:
https://jsfiddle.net/Anokrize/ssL9fjy9/
(I would like to avoid any javascript or jquery, if that is possible)
How about doing it with keyframes, like this:
#ProgressBar {
width: 100%;
height: 30px;
border: 1px solid black;
border-radius: 7px;
padding: 4px;
}
#Progress {
width: 50%;
background-color: #4A90E2;
height: 100%;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
border-color: #4A90E2;
animation-name: progressBar;
animation-iteration-count: 1;
animation-duration: 2s;
}
#keyframes progressBar {
0% {
width: 10%;
}
100% {
width: 50%;
}
}
<div id="ProgressBar">
<div id="Progress"></div>
</div>
A straight forward way of getting this done is through jquery:
$(window).load(function() {
$("#Progress").css("width", "50%");
});
Usually you'd want something feeding a progress bar so it's actually showing progress... but if you just want it to start on load, you can use the animation property with keyframes.
#ProgressBar {
width: 100%;
height: 30px;
border: 1px solid black;
border-radius: 7px;
padding: 4px;
}
#Progress {
width: 10%;
background-color: #4A90E2;
height: 100%;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
border-color: #4A90E2;
animation: progress 1s ease-out forwards;
}
#keyframes progress {
from { width: 10%; }
to { width: 50%; }
}
I'm trying to make a search bar in my asp.net project, and so far I only know how to use CSS/bootstrap to make the button which works well with the css effects I've added. How do I change my codes to use an asp.net button instead - without compromising on my css effects? This is how an asp.net button looks like:
<asp:Button ID="Button1" runat="server" Text="Button" />
I'm changing to an asp.net button because I realised that the CSS/bootstrap button doesn't have the onclick needed to bring me to code view in asp.net (because I need to add C# codes into the button).
Here is my how my button looks like currently:
<div class="sb_container">
<input type="text" placeholder="Search..." id="sew_searchBox" class="search"> </input>
<button class="icon" onclick="keyotiSearchBox.doSearch()"></button>
</div>
I've added Css in this button as well:
.sb_container{
overflow: hidden;
width: 220px;
vertical-align: middle;
white-space: nowrap;
}
.sb_container input.search{
width: 200px;
height: 35px;
background: #FFF;
border: none;
font-size: 10pt;
float: left;
color: #000000;
padding-left: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.sb_container input.search::-webkit-input-placeholder { color: black;}
.sb_container input.search:-moz-placeholder { /* Firefox 18- */ color: black; }
.sb_container input.search::-moz-placeholder { /* Firefox 19+ */ color: black; }
.sb_container input.search:-ms-input-placeholder { color: black; }
.sb_container button.icon {
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: none;
background: #f7f7f7;
height: 35px;
width: 50px;
color: #4f5b66;
opacity: 0;
font-size: 10pt;
-webkit-transition: all .55s ease;
-moz-transition: all .55s ease;
-ms-transition: all .55s ease;
-o-transition: all .55s ease;
transition: all .55s ease;
}
.sb_container:hover button.icon, .sb_container:active button.icon, .sb_container:focus button.icon{
outline: none;
opacity: 1;
margin-left: -50px;
background-image:url('search.png');
background-repeat: no-repeat;
background-position: center;
}
.sb_container:hover button.icon:hover{
background: #f7f7f7;
background-image:url('search.png');
background-repeat: no-repeat;background-position: center;
}
I am creating a custom side navigation for one of my home projects and I recently was informed that instead of using several <nav> tags and placing them manually I should use a single <nav> and then a list on the inside. This however, has caused issues the replication of the way the side nav I had set up works
The following .css is the code which produces the format of the side navigation
nav {
display: block;
color: black;
padding: 10px;
text-transform: uppercase;
right: 0px;
position: fixed;
z-index: 3000;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
-webkit-transition: all 250ms ease-out !important;
-moz-transition: all 250ms ease-out !important;
transition: all 250ms ease-out !important;
border: 1mm;
border-color: #CCCCFF;
border-left-style: solid;
}
#topnav:hover,
#nav2:hover,
#nav3:hover,
#nav4:hover,
#nav5:hover,
#nav6:hover,
#botnav:hover {
z-index: 5000;
width: 3cm;
background-color: black;
border-style: solid;
border-right-style: none;
color: white;
-webkit-border-top-left-radius: 4mm;
-moz-border-radius-topleft: 4mm;
border-top-left-radius: 4mm;
-webkit-border-bottom-left-radius: 4mm;
-moz-border-radius-bottomleft: 4mm;
border-bottom-left-radius: 4mm;
}
nav:hover span {
display: none;
}
#topnav {
top: 100px;
background-color: white;
border-top-style: solid;
-webkit-border-top-left-radius: 4mm;
-moz-border-radius-topleft: 4mm;
border-top-left-radius: 4mm;
}
#topnav:hover:before {
content: "Top";
}
#nav2 {
top: 140px;
background-color: red;
}
#nav2:hover:before {
content: "Red";
}
#nav3 {
top: 180px;
background-color: blue;
}
#nav3:hover:before {
content: "blue";
}
#nav4 {
top: 220px;
background-color: green;
}
#nav4:hover:before {
content: "green";
}
#nav5 {
top: 260px;
background-color: purple;
}
#nav5:hover:before {
content: "purple";
}
#nav6 {
top: 300px;
background-color: orange;
}
#nav6:hover:before {
content: "orange";
}
#botnav {
top: 340px;
background-color: white;
border-bottom-style: solid;
-webkit-border-bottom-left-radius: 4mm;
-moz-border-radius-bottomleft: 4mm;
border-bottom-left-radius: 4mm;
}
#botnav:hover:before {
content: "200";
}
This can be seen put in place on the JSFiddle
Whilst editing my code I have had an issue when you hover over a list item. When the <li> item extends, it extends the <nav> and the <ul> as well. This is not what I intended it to do. I intended it to only extend <li> item.
.sidenav {
display: block;
color: black;
text-transform: uppercase;
right: 0px;
top: 10%;
position: fixed;
z-index: 3000;
text-align: center;
border: 1mm;
border-color: #CCCCFF;
border-style: solid;
border-right-style: none;
-webkit-border-bottom-left-radius: 4mm;
-moz-border-radius-bottomleft: 4mm;
border-bottom-left-radius: 4mm;
-webkit-border-top-left-radius: 4mm;
-moz-border-radius-topleft: 4mm;
border-top-left-radius: 4mm;
}
.sidenav ul {
list-style-type: none;
}
.sidenav li {
padding: 10px;
width: 20px;
height: 20px;
line-height: 20px;
-webkit-transition: all 250ms ease-out !important;
-moz-transition: all 250ms ease-out !important;
transition: all 250ms ease-out !important;
}
.sidenav li:hover {
width: 3cm;
background-color: white;
}
This can be seen put in place in this JSFiddle.
I thought this might be able to be masked by setting the text-align: right and then change the text-align of the <li> item being hovered over, only when it was being hovered over. This works however it then meant the whole of the border moved out instead of only the border around the <li> item being hovered over and the background colours of the <li> items are also extended out instead of just the one being hovered over.
The question
Essentially my question is how do I need to edit my css so that the nav bar which is structured like
<nav>
<ul>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</nav>
behave in the same way my first structure shown in the first JSFiddle did? How can I manipulate a single <li> tag without effecting the whole <ul> or <nav>?
So the reason that the sidenav is expanding when the li elements do, is because there's no explicit width placed on that parent element. So it's defaulting to width: auto. Thus, when the li elements expand, so does the parent. I've got a solution working that approximates your original example.
Here is the updated fiddle.
I only made a few small updates to get it working. Here they are:
.sidenav {
width: 40px;
}
.sidenav li {
position: relative;
right: 0;
}
.sidenav li:hover {
right: 200%;
}
Note, these are styles added in addition to what was already there, nothing removed. Hopefully this at least helps you get on the right path with this new solution!
I'm designing an animated progress bar to display ratings on my website. At the end of the bar, I want to display inside a circle the rating number (out of 10) corresponding to the final progress % of the bar. I want to have a responsive design.
My problem arises when dealing with a high progress %, such as 95%. The circle with the rating value is sent down to the next line. It is also the case when resizing my browser with a progress value such as 75%. With lower values, everything is fine. I tried to play around with negative margin-left and margin-right values for #ratingnumber, which seems to help a bit but still had trouble keeping the rating circle on the progress bar for really high progress %.
I'm looking for the CSS tweak to keep the rating circle on the progress bar for every rating cases.
jsfiddle for 95%: http://jsfiddle.net/4pzm98b0
jsfiddle for 50%: http://jsfiddle.net/z1wtqebj/
<div id="progressbar">
<div id="progress"></div>
<div id="ratingnumber">
9.5
</div>
</div>
body {
background-color: #aaa;
padding: 40px;
}
#progressbar {
width: 100%;
height: 20px;
background-color: white;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 3px;
border: 3px solid #666666;
clear: both;
}
#progress {
background: green;
height: 20px;
width: 0%;
max-width: 100%;
float: left;
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
#ratingnumber{
border: 4px solid green;
background: white;
padding: 10px;
float: left;
font-size: 28px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
border-radius: 50%;
position: relative;
left: -30px;
top: -24px;
}
#-webkit-keyframes progress {
from { }
to { width: 95% }
}
#-moz-keyframes progress {
from { }
to { width: 95% }
}
#-ms-keyframes progress {
from { }
to { width: 95% }
}
#keyframes progress {
from { }
to { width: 95% }
}
Add white-space: nowrap to the parent element, #progressbar. Then remove float: left from the children elements, and change the display to inline-block in order for them to respect the white-space property on the parent. Set vertical-align: top on the children in order to fix the vertical alignment.
Updated Example
#progressbar {
white-space: nowrap;
}
#ratingnumber, #progress {
display: inline-block;
vertical-align: top;
}
The positioning on the #ratingnumber element also needs to be changed to:
#ratingnumber {
position: relative;
top: -20px;
}