i going to create a progress bar, just like the picture below(ues red and green for sharp contrast).
progress bar
my codes is as follows
// react
class App extends React.Component {
render () {
return (
<div className='home-page-wrapper'>
<ProgressBar />
</div>
);
}
}
// css
.outter {
width: 260px;
height: 46px;
border-radius: 22px;
background: green;
overflow: hidden;
.inner {
width: 100%;
height: 100%;
background: red;
transform: translateX(100px);
}
}
the problem is that the red div can not full cover the green one, it looks like that the red div has a green border, how can i do?
Please try this:
.progress-bar {
width:90%;
height:30px;
overflow:hidden;
background:green;
border-radius:6px;
}
.bar {
float:left;
height:100%;
background:red;
}
<div class="progress-bar">
<div class="bar" style="width:45%">
</div>
</div>
You may use this code:
.outter {
width: 260px;
height: 46px;
border-radius: 22px;
background: green;
overflow: hidden;
}
.outter .inner {
height: 100%;
background: red;
border-radius: 22px;
}
<div class="outter">
<div class="inner" style="width: 70%;"></div>
</div>
change the .inner width property to perform the progression.
Related
I am very new to coding so I am sorry if this is a simple question. I am trying to fade out the background while fading in the text using hover states.
This code works, however, I cannot seem to figure out why the hover state extends past the red square. I would like the hover state to only work when you mouse over the red square.
.relative{
position: relative;
}
.background {
background-color: red;
height: 100px;
width: 100px;
}
.text {
position: absolute;
top:0;
}
.relative .text{
transition: 1s;
color: transparent;
}
.relative:hover .text{
color: lightseagreen;
}
.relative:hover .background{
background: black;
transition: 1s;
}
<body>
<div class="relative">
<div class="background"></div>
<div class="text">Hello</div>
</div>
</body>
I think the reason is that the relative class is not the same size as the background, to fix this, add
height: 100px;
width: 100px;
to the relative as well.
Full code below
<DOCTYPE! html>
<html>
<head>
<style>
.relative{
position: relative;
height: 100px;
width: 100px;
}
.background {
background-color: red;
height: 100px;
width: 100px;
}
.text {
position: absolute;
top:0;
}
.relative .text{
transition: 1s;
color: transparent;
}
.relative:hover .text{
color: lightseagreen;
}
.relative:hover .background{
background: black;
transition: 1s;
}
</style>
</head>
<body>
<div class="relative">
<div class="background"></div>
<div class="text">Hello</div>
</div>
</body>
</html>
With pure HTML and CSS it is possible to show and hide content with an anchor tag:
#red { background: red; }
#blue { background: blue; }
#green { background: green; }
.box {
width: 200px;
height: 200px;
display: none;
}
.box:target {
display: block;
}
Red item | Blue item | Green item
<div class="box" id="red"></div>
<div class="box" id="blue"></div>
<div class="box" id="green"></div>
But how can I display the first (red) item on page load?
If you're ok with modifying the html, and putting the red box last then you can do something like:
#red {
background: red;
display: block;
}
#blue { background: blue; }
#green { background: green; }
.box {
width: 200px;
height: 200px;
display: none;
}
.box:target {
display: block;
}
.box:target ~ #red {
display: none;
}
The solution is somehow easy but I cannot show it here. If you are using this code within a page you simply need to append the anchor of the the first a tag to the url to activate its target. So you need to simply do something like this:
wwww.page.html#red
Here is a screenshot of the result:
This will work without modifying the code and you can choose which one to make visible at the start.
You can try this:
#red { background: red; display:block;}
#blue { background: blue; }
#green { background: green; }
.box {
width: 100%;
height: 100%;
display: none;
position: absolute;
top: 0;
left: 0;
}
.box:target {
display: block;
}
.wrapper {
position: relative;
width: 200px;
height: 200px;
}
Red item | Blue item | Green item
<div class="wrapper">
<div class="box" id="red"></div>
<div class="box" id="blue"></div>
<div class="box" id="green"></div>
</div>
Solution(s) :-
<style>
#red {
background: red;
}
#blue {
background: blue;
}
#green {
background: green;
}
.box {
display: none;
}
.box:target {
display: block;
}
</style>
Red item |
Blue item |
Green item
<div class="box" id="red">Red</div>
<div class="box" id="blue">Blue</div>
<div class="box" id="green">Green</div>
Explanation(s) :-
I Finally found a solution for your answer but ...
for it to work properly , you need to add a background color ....
finally , I hope that it is what you wanted .....
Notes And References :-
currently , i have no references for above codes ,
but ,
NOTE : Please Add Background color fr it to work properly
I'm trying to achieve the following:
A background circle with a smaller colored circle inside of it, which must be centered
A small centered image inside of both circles
All of these items needs to be placed in a single div
I'm trying to do this with the minimum amount of code. I want to avoid duplication as much as possible. I believe that all of this can be achieved using before and after selectors, but I'm not sure how to get this done
Here's what I have so far:
CSS:
.grid-container {
display: grid;
grid: 100px / 100px;
}
.circle {
border-radius: 50%;
width: 100%;
height: 100%;
background-color: #e4e4e7;
}
.circle:before {
content: "";
border-radius: 50%;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
background-color: blue;
display: block;
position: relative;
}
.image-one:before {
content: url("https://stackoverflow.com/favicon.ico");
}
.circle-01 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
HTML:
<div class="grid-container">
<div class="circle-01 circle image-one"></div>
</div>
I need a structure whereby I can easily change the color of the inner circle and/or image
Example
<div class="grid-container">
<div class="circle-01 circle image-one yellow"></div>
<div class="circle-01 circle image-two blue"></div>
<div class="circle-01 circle image-three green"></div>
</div>
You can do it with a pseudo element like this, putting the pseudo element on top of the main element and using borders and a background-image. You can even use a background color behind the image if it doesn't fill the whole pseudo element (note the no-repeat, the size and position settings for the background):
.x1 {
width: 300px;
height: 300px;
position: relative;
border-radius: 50%;
border: 10px solid #22f;
margin: 30px;
background: yellow;
}
.x1:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 220px;
height: 220px;
border-radius: 50%;
border: 6px solid #f22;
background: #3d3 url(http://placehold.it/200x200/fa0/?text=this_is_an_image) center center no-repeat;
background-size: 100px 100px;
}
<div class="x1"></div>
Note: the orange square is an image, the green color around it is the background color, the red circle is the border of the pseudo element, the yellow area is the background color of the main element and the blue circle is the border of the main element. Each of these could as well be white or transparent.
ADDITION after additional question in comment:
You can also change the background-colors by adding seperate classes. In the following snippet I added two classes to the div, one that affects the background in the main element and one that affects the background-color of the pseudo element. In the latter case you have to make sure to use the background-color property, not background in the CSS rule - otherwise the background-image would disappear:
.x1 {
width: 300px;
height: 300px;
position: relative;
border-radius: 50%;
border: 10px solid #22f;
margin: 30px;
background: yellow;
}
.x1:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 220px;
height: 220px;
border-radius: 50%;
border: 6px solid #f22;
background: #3d3 url(http://placehold.it/200x200/fa0/?text=this_is_an_image) center center no-repeat;
background-size: 100px 100px;
}
.aqua-outer-bg {
background: aqua;
}
.pink-inner-bg:after {
background-color: pink;
}
<div class="x1 aqua-outer-bg pink-inner-bg"></div>
Note: The original CSS rules remained unchanged, their background colors are overwritten by the additional classes.
ONE MORE ADDITION after additional question in comment from OP on September 18th:
Yes, you can also split that in two classes as I did below (.x1a and .x1b). I simply added both classes to the HTML tag and split up the CSS from x1:after into two rules, one for .x1a:after and one for .x2a:after
.x1a {
width: 300px;
height: 300px;
position: relative;
border-radius: 50%;
border: 10px solid #22f;
margin: 30px;
background: yellow;
}
.x1a:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 220px;
height: 220px;
background: #3d3 url(http://placehold.it/200x200/fa0/?text=this_is_an_image) center center no-repeat;
background-size: 100px 100px;
}
.x1b:after {
border-radius: 50%;
border: 6px solid #f22;
}
.aqua-outer-bg {
background: aqua;
}
.pink-inner-bg:after {
background-color: pink;
}
<div class="x1a x1b aqua-outer-bg pink-inner-bg"></div>
Try running this snippet:
$(document).ready(function() {
var sourceIndex = 1;
var colorIndex = 1;
var colors = [
"rgb(0, 132, 203)",
"rgb(255, 192, 203)",
"rgb(50, 192, 103)",
"rgb(255, 165, 0)"
];
var sources = [
"https://www.linkedin.com/favicon.ico",
"https://www.google.com/favicon.ico",
"http://jsfiddle.net/favicon.ico",
"https://getbootstrap.com/favicon.ico",
"https://www.facebook.com/favicon.ico"
];
$("button").click(function() {
changeStuff($(this).hasClass("changeImage") ? sources : colors, $(this));
function changeStuff(list, selector) {
counter(list, selector);
if (list == sources) {
selector
.prev()
.prev(".outer-circle")
.find(".inner-circle")
.find("img")
.attr("src", list[sourceIndex]);
} else {
if (
selector
.prev(".outer-circle")
.find(".inner-circle")
.css("background-color") == colors[colorIndex]
) {
selector
.prev(".outer-circle")
.find(".inner-circle")
.css("background-color", "tan");
} else {
selector
.prev(".outer-circle")
.find(".inner-circle")
.css("background-color", colors[colorIndex]);
}
}
}
});
function counter(list, selector) {
if (list == sources) {
sourceIndex == list.length - 1 ? (sourceIndex = 0) : sourceIndex++;
} else {
colorIndex == list.length - 1 ? (colorIndex = 0) : colorIndex++;
}
}
});
.container {
display: flex;
align-items: center;
flex-direction: column;
}
.box {
display: flex;
}
.inner-circle {
border-radius: 50%;
width: 80%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
}
.box:first-child .inner-circle {
background-color: blue;
}
.box:nth-child(2) .inner-circle {
background-color: black;
}
.box:nth-child(3) .inner-circle {
background-color: maroon;
}
.outer-circle {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: #e4e4e7;
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
<div class="outer-circle">
<div class="inner-circle">
<img src="https://stackoverflow.com/favicon.ico" alt="">
</div>
</div>
<button class='changeColor'>Change Color</button>
<button class='changeImage'>Change Image</button>
</div>
<div class="box">
<div class="outer-circle">
<div class="inner-circle">
<img src="https://stackoverflow.com/favicon.ico" alt="">
</div>
</div>
<button class='changeColor'>Change Color</button>
<button class='changeImage'>Change Image</button>
</div>
<div class="box">
<div class="outer-circle">
<div class="inner-circle">
<img src="https://stackoverflow.com/favicon.ico" alt="">
</div>
</div>
<button class='changeColor'>Change Color</button>
<button class='changeImage'>Change Image</button>
</div>
</div>
Abracadabra
div {
border-radius: 50%
}
#a {
display: flex;
justify-content: center;
align-items: center;
height: 64px;
width: 64px;
border: 2px solid green;
}
img {
align-self: auto;
border: 2px solid blue;
border-radius: 50%;
padding:5%;
}
<div id="a">
<img src="https://rack.pub/media/janus.png" height="48">
</div>
I have the code which got me three circles connected by two lines. Have a look here: JSFIDDLE
Here is my code:
HTML
<div class="form-group">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="circle" style="float:left;"></div>
<div id="horizontal" style="float:left;"></div>
<div class="circle" style="float: right;"></div>
<div id="horizontal" style="float: right;"></div>
<div class="circle"></div>
</div>
<div class="col-md-4"></div>
</div>
</div>
CSS
#horizontal
{
width: 230px;
border-bottom: 2px solid #CCCCCC;
padding-top: 6px;
}
.circle {
background: #CCCCCC;
width: 15px;
height: 15px;
border-radius: 50%;
border:1px solid #CCCCCC;
}
But this wont be responsive as i am setting width component to it. Is there anyway i can make it responsive using twitter bootstrap.
Using #media queries wont help for this case. Any help will be appreciated.
For info:
You could use a background-image or gradient too : DEMO
CSS revisited
.form-group {
background:linear-gradient(to top,#cccccc,#cccccc) repeat-x center;/* gradient can be replace for a 1pixel gray image */
background-size:2px 2px;
min-width:50px;/* keep those 3 15px boxes on one line */
}
.circle {
background: #CCCCCC;
width: 15px;
height: 15px;
border-radius: 50%;
border:1px solid #CCCCCC;
margin:auto;
}
& less HTML
<div class="form-group">
<div class="circle" style="float:left"></div>
<div class="circle" style="float: right;"></div>
<div class="circle"></div>
</div>
The simplest solution contains two divs and two pseudo elements. position: absolute keeps the circles over the parents border and position: relative keeps the circles positioned relative to the parent.
Have an example!
HTML
<div class="parent"><div class="child"></div></div>
CSS
* {
margin:0;
padding:0;
}
.parent {
margin:100px 0 0;
width:100%;
border-bottom:2px solid #CCC;
position:relative;
z-index:-1;
}
.parent:before,.parent:after,.child {
background:#CCC;
width:15px;
height:15px;
border-radius:50%;
border:1px solid #CCC;
position:absolute;
content:'';
top:-8px;
}
.parent:before {
left:0;
}
.parent:after {
right:0;
}
.child {
left:50%;
margin-left:-8px;
}
Try this:
html:
<div class="responsive-circle"><i></i></div>
css:
.responsive-circle {
height: 2px;
background-color: #CCC;
overflow: visible;
position: relative;
}
.responsive-circle:before,
.responsive-circle:after,
.responsive-circle > i {
background: #CCCCCC;
width: 15px;
height: 15px;
border-radius: 50%;
border:1px solid #CCCCCC;
position: absolute;
content: "";
top: -7px;
}
.responsive-circle:after {
right: 0;
}
.responsive-circle > i {
left: 50%;
left: calc(50% - 9px);
}
demo: http://jsfiddle.net/m787ydjz/
Final resulting background image that I need:
Background image that I have used:
But I have got this Fiddle
::Summary of Fiddle::
HTML...
<div id="top-part">
<div id="topmost">
<div id="top-most" class="wrapper">
</div>
</div>
<div id="topmenu" class="wrapper">
</div>
CSS...
.wrapper{
position: relative;
width: 943px;
margin: 0 auto;
}
#top-part{
background: url(img/bg-header-effects.png) no-repeat top center;
}
#topmost{
background: #900;
opacity: 0.8;
}
#top-most{
height: 139px;
}
#topmenu{
background: #900;
opacity: 0.8;
height: 51px;
border-radius: 0 0 20px 20px;
}
Update - to cover your recent edit
#header{
background: #f00 url('http://i.stack.imgur.com/GWVfL.jpg');
opacity: .6;
width: 100%;
height: 189px;
}
Working Fiddle
You could try using the background property in CSS:
div{
background: url('path_to_your_image.jpg') no-repeat;
}
Learn more about using the background-image property here
Note:
There is a difference between background and background-image. In this answer I've used the background property which basically takes all of the possible options for a background image in CSS and lets them be used in a single call.
For example, you could split the above up into two selectors:
div{
background-image: url('path_to_your_image.jpg') no-repeat;
background-repeat: no-repeat;
}
You could do like this fiddle
html...
<div id="top-part">
<div id="topmost">
</div>
</div>
<div id="top-menu" class="wrapper">
<div id="topmenu">
</div>
</div>
css...
.wrapper{
position: relative;
width: 943px;
margin: 0 auto;
}
#top-part{
background: url(img/bg-header-effects.png) no-repeat top center;
}
#topmost{
background: #900;
opacity: 0.8;
height: 139px;
}
#top-menu{
background: url(img/bg-header-effects.png) no-repeat 50% 45%;
border-radius: 0 0 20px 20px;
}
#topmenu{
background: #900;
opacity: 0.8;
height: 51px;
border-radius: 0 0 20px 20px;
}
The easy approach that I'm thinking of is having a picture within divs covering the whole page. The code will be very simple, but the only downside is the image may be warped or it can be clicked on unless you have this.
HTML:
<div id="backgroundcolor">
<div id="backgroundimage">
</div>
</div>
CSS:
#backgroundcolor {
background-color: #000;
z-index: 1;
}
#backgroundimage {
background: ("http://cdn.theatlantic.com/static/infocus/election110712/s_e01_37923312.jpg");
resize: none;
object-position: center;
object-fit: initial;
}