I tried to design a progress bar using css3 but when I load the html in my google chrome it is blank.
What is wrong with this mark up? Please help me to fix it
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.progress-bar {
background-color: #1a1a1a;
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0;
border-radius: 5px;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
display: inline-block;
height: 100%;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
transition: width .4s ease-in-out;
}
</style>
</head>
<body>
<div class="progress_bar blue stripes"> <!--stripes defines the animation type for the current progrss bar,the blue class adds a blue style for the progress bar-->
<span style="width:40%"></span> <!--span will help us filling the progress bar , an inline style set width will help in specifying the fill state-->
</div>
</body>
</html>
The problem is in your css you are using class progress-bar but in HTML you are using class with different name progress_bar see the difference between these 2 classes.
.progress-bar {
background-color: #1a1a1a;
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0;
border-radius: 5px;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
display: inline-block;
height: 100%;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
transition: width .4s ease-in-out;
}
--your HTML code is--
<div class="progress-bar blue stripes"> <!--stripes defines the animation type for the current progrss bar,the blue class adds a blue style for the progress bar-->
<span style="width:40%"></span> <!--span will help us filling the progress bar , an inline style set width will help in specifying the fill state-->
</div>
Here is the Demo
Try changing progress-bar to progress_bar
JSBIN
You are using wrong class in css. Check out the above JSBin for working code.
.progress_bar {
background-color: #1a1a1a;
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0;
border-radius: 5px;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress_bar span {
display: inline-block;
height: 100%;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
transition: width .4s ease-in-out;
}
Related
Currently, I am playing with HTML and CSS and I wanted to make a icon from this image
the image is somewhat like that. I tried adding different shapes of ovals and circles inside the bigger circle but it did not work. For the shaded part, I used a box-shadow in styling it. There are already too many divs in my sample icon. I just want to have it simple and readable.
Here is my HTML structure:
<link rel="stylesheet" href="style.css">
<div class="cont">
<div class="icon2">
<div class="inner-circle"></div>
</div>
</div>
and here is my CSS:
.cont {
width: 190px;
height: 190px;
padding: 20px;
}
.icon2 {
position: relative;
border: 2px solid #353332;
width: 187px;
height: 184px;
border-radius: 50%;
background-color: #fff;
box-shadow: inset 20px 35px #1CAEE3;
transform: rotate(177deg);
}
.inner-circle {
border: 7px solid #353332;
width: 120px;
height: 183px;
background-color: #fff;
border-radius: 50% 50% 50% 49% / 60% 52% 40% 40%;
transform: rotate(240deg);
display: block;
margin: 6px 0px 4px 35px;
border-top: 0;
border-bottom: 0;
border-left: 0;
}
Can you explain me this and how can I come up with a solution to my problem? I'm stuck for hours and I just wanted to try it with pure HTML and CSS and not using photoshop.
You can easily do this with one element and radial-gradient. Simply adjust the percentage used inside the gradient to control the shape:
.box {
width:150px;
height:150px;
border-radius:50%;
border:4px solid;
background:
radial-gradient(circle at top left,transparent 59.4%,black 60% calc(60% + 4px),orange calc(60% + 5px));
}
<div class="box"></div>
You can also use box-shadow ;)
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.
demo aside your image:
div {
border: solid 6px;
display: inline-flex;
height: 200px;
width: 200px;
border-radius: 50%;
box-shadow: inset -50px -70px 1px -30px rgb(255, 127, 39), inset -56px -77px 1px -33px;
}
code {
font-size: 30px;
color: green;
margin: auto;
font-weight: bold;
}
div,
img {
vertical-align: middle;
}
<img src="https://i.stack.imgur.com/HRpQY.png">
<div><code>box-shadow</code></div>
another example :
div {
float:left;
height: 180px;
width: 180px;
margin: 1em;
box-sizing: border-box;
padding: 25px;
background: #F4E5D9;
box-shadow: inset -40px -40px 3px -20px #C5824D, inset 40px 40px 3px -20px #EABD9A, inset 0 0 2px 30px #AD6026, inset 0 0 0px 32px #705642, inset 0 -55px 3px 10px #705B4B, inset 0 55px 3px 10px #705B4B, 0 0 3px 2px #705B4B, 0 0 3px 4px #665447, 0 0 3px 7px #3F332A, 0 0 3px 9px #705642, 88px 90px 1px -86px gray, 87px 85px 2px -82px #F2C232, 85px 95px 2px -82px #A30700, 92px 92px 2px -82px #C5824D, 88px 90px 10px -70px white;
border-radius:50%;
display:flex;
flex-direction:column;
justify-content:center;text-align:center;
}
div + div {border-radius:4em /50%;
<div>
<p>inset shadow </p>
<p>border-radius </p>
<p>decreased shadow </p>
</div>
<div>
<p>inset shadow </p>
<p>border-radius </p>
<p>decreased shadow </p>
</div>
you may also draw citrus slices https://codepen.io/gcyrillus/pen/wutEK .
but SVG would be at best here ;)
You could make use of a pseudo element and have an overflow:hidden to hide the rest of the pseudo element's parts that fall outside of the div's 'outer circle'
div {
height: 200px;
width: 200px;
overflow: hidden;
border: 5px solid black;
background:orange;
border-radius: 50%;
position: relative;
}
div:after {
content: "";
position: absolute;
height: 100%;
width: 200%;
border: inherit;
border-radius: 50%;
background: white;
top: -20%;
left: -100%;
}
<div></div>
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.
So I'm totally new to HTML/CSS. I'm designing a fun project now to learn web development.
I created a search bar and wanted to add the famous round corners with border-radius. So far it works good. The problem is that the white background shines through the edges now, since the search bar is located in the menu bar.
I will post a screenshot and the code below. I'm not 100% familiar with the CSS box-model. I guess there lies the problem. Maybe I can fill the void with my menu background image? Hope someone can guide me where to fix this problem.
Screenshot:
https://picload.org/view/prwpirg/bildschirmfoto2015-09-20um16.3.png.html
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>facefuck</title>
<link rel="stylesheet" href="./css/style.css" type="text/css"/>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="headerMenu">
<div id="wrapper">
<div class="logo">
<img src="./img/face_logo.jpg" />
</div>
<div class="search_box">
<form action="search.php" method="GET" id="search">
<input type="text" name="q" size="60" placeholder="Put your dick here" />
</form>
</div>
<div id="menu">
<a href="#" />Home</a>
<a href="#" />About</a>
<a href="#" />Sign Up</a>
<a href="#" />Sign In</a>
</div>
</div>
</div>
</body>
</html>
CSS Code:
* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
background-color: #EAEDF5;
}
.headerMenu {
background-image: url("../img/menu_bg.png");
height: 60px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
#wrapper {
background-image: url("../img/menu_bg.png");
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
.logo {
background-image: url("../img/menu_bg.png");
width: 125px;
}
.logo img {
width: 150px;
height: 100%;
}
.search_box {
position: absolute;
top: 17px;
margin-left: 150px;
}
#search input[type="text"] {
background: url(../img/search_white.png) no-repeat 10px 6px #D8D8D8;
outline: none;
border: 0 none;
border-radius: 100px;
font: bold 12px Arial, Helvetica, Sans-serif;
width:300px;
padding: 5px 15px 5px 35px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
background: url(../img/search_black.png) no-repeat 10px 6pc #fcfcfc;
color: #6a6f75;
width: 300px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
...
It is caused by
* {
background-color: #EAEDF5;
}
This will make your .search_box and form have that background color too. You can override it by using:
.search_box, form {
background-color: transparent;
}
I'd recommend removing the first rule, though, and only apply the #EAEDF5 background color to the body instead of all elements.
To visualize this with a concrete example:
* {
background-color: gray;
}
#a {
padding: 20px;
background-color: pink;
}
#c {
padding: 10px;
background-color: white;
border-radius: 20px;
}
<div id="a">
<div id="b">
<div id="c">
Hello world!
</div>
</div>
</div>
In the above example, the * selector will target all elements (all divs and the body), thus setting the background color of every div to gray. The two divs with ids a and c will override this background color, while b does not and get the background color it should use from the * selector, so it'll have a gray background color instead of the initial value of transparent, which would've let the pink shine through.
To fix the issue, either forcing the #b div to have a transparent background works or by changing the *-selector to body, which will then only color the background color of the page instead of every single element (unless overridden).
See my recommended fix in action here:
body {
background-color: gray;
}
#a {
padding: 20px;
background-color: pink;
}
#c {
padding: 10px;
background-color: white;
border-radius: 20px;
}
<div id="a">
<div id="b">
<div id="c">
Hello world!
</div>
</div>
</div>
I am trying to set the width of an element progress to be the width between two other elements. Here is the HTML code I am using
<span class="current_rank"><?php echo $this->current_rank;?></span>
<div class="progress">
<div class="progress-bar" role="progressbar"></div>
</div>
<span class="next_rank"><?php echo $this->next_rank;?></span>
I am trying to get the width of the progress bar to be the width between the two <span>'s
Is this possible with CSS?
Update
.progress {
width: 550px;
height: 15px;
margin-bottom: 10px;
overflow: hidden;
background-color: #666;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
width: 0;
height: 100%;
font-size: 12px;
line-height: 15px;
color: #333;
text-align: center;
background-color: #ffd700;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.VIP_ranking > .current_rank {
margin-left: 30px;
margin-right: 25px;
}
.VIP_ranking > .next_rank {
float: right;
margin-right: 22.5px;
}
.VIP_ranking > div.progress{
position:absolute;
display:inline;
margin-left: 10px;
}
There are several CSS only solutions, but it really depends what are the requirements, in terms of browsers compatibility.
CSS calc function - you can use it if you know the width of the span elements, either the absolute width or the width in percentage. For example: width: calc(100% - 200px) or calc(80%). This solution will work in IE9+, Chrome and FF
Using display:flex; and justifying your content. You can read more about it here. You will not need to know the width of the spans, but this solution will only be compatible in IE10+, Chrome and FF.
This is what I currently have:
What I'm trying to do is remove the bottom box-shadow of the textarea (the one just above the B, I, and U) so that it ends up looking like this:
Here's the JSFiddle: http://jsfiddle.net/MgcDU/7616/
HTML:
<div class="editor span4">
<textarea class="span4"></textarea>
<ul class="format-post">
<li><b>B</b></li>
<li><i>I</i></li>
<li><u>U</u></li>
</ul>
</div>
CSS:
#import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
body {
margin: 10px;
}
textarea {
border-radius: 2px 2px 0 0;
border-bottom-color: #eee;
}
textarea:focus {
border-bottom-color: #eeeeee;
}
textarea:focus + .format-post {
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 7px rgba(82, 168, 236, 0.6);
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.format-post {
list-style: none;
background: #fafafa;
height: 35px;
border: 1px solid #cccccc;
border-top: 0;
border-radius: 0 0 2px 2px;
margin: 0;
margin-top: -10px;
}
.format-post li {
width: 35px;
height: 35px;
border-right: 1px solid #eee;
text-align: center;
line-height: 33px;
font-size: 14px;
color: #333;
cursor: pointer;
display: inline-block;
}
Please help.
I just changed the box-shadow to
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 -4px 7px rgba(82, 168, 236, 0.6);
and it worked! :)
The bottom color was still blue, so I just changed it to
border-bottom: 1px solid #999;
You can change it if needed! :)
Here is the fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/MgcDU/7617/
Pardon me, I just saw that you want the textarea to be colored, which doesn't fit for the question. You're saying in title to remove the border-bottom. But in answer you're having bottom border for both.
If you want to get the border and all animation when textarea is not active, then remove :focus and it will do the job.
And I am still very sorry, for unclear answer because I am not able to get it, which should be answered the question or the answer.